使用重定向登录流程并启用CORS解决该问题。
在移动浏览器上,通常会出现同源策略限制的问题。这意味着在JavaScript中无法直接访问从另一个域名加载的内容。为了解决这个问题,我们可以启用CORS(Cross-Origin Resource Sharing)来允许来自其他域的资源被JavaScript访问。此外,我们可以使用重定向登录流程代替默认的弹出窗口登录流程。
实现代码示例如下:
在Auth0应用程序的设置中,指定正确的回调URL和Web Origins。
const auth0 = new Auth0Client({
domain: 'your-auth0-domain',
client_id: 'your-auth0-client-id',
redirect_uri: 'http://localhost:3000/callback', // 指定重定向URL
audience: 'https://your-api-audience/', // 可选,指定API的audience
});
// 在需要访问受保护资源的地方调用此函数
async function getAccessToken() {
try {
const token = await auth0.getTokenSilently(); // getTokenSilently调用将重定向到登录页面
return token;
} catch (e) {
console.error(e);
}
}
// 将以下代码添加到您的后端服务器以启用CORS
const cors = require('cors');
const app = express();
app.use(cors({
origin: 'http://localhost:3000' // 更改为您的应用程序URL
}));
// 在应用程序的回调URL上处理重定向,检查令牌是否返回
app.get('/callback', async (req, res) => {
try {
await auth0.handleRedirectCallback();
res.redirect('/'); // 重定向回主页面或其他需要访问受保护资源的页面
} catch (e) {
console.error(e);
}
});