javascript - 如何使用 auth0-js 传递附加信息(登录后重定向用户)

Question

我想将用户重定向到登录工作流程之前所在的当前页面。

1. 用户想要转到/profile
2. 页面受到保护；用户被重定向到/login
3. 使用重定向到/callback 的 auth0-js 登录工作流程
4. 我希望回调页面将用户重定向到/profile 页面

是否有可能将附加信息传递给 auth0-js(例如 {from: '/profile'})？

这是我在 React 应用程序中对 Auth0-js 的初始化:

auth0 = new auth0.WebAuth({
        domain: 'xxx.auth0.com',
        clientID: 'xxx',
        redirectUri: 'http://localhost:3000/callback',
        audience: 'https://xxx.auth0.com/userinfo',
        responseType: 'token id_token',
        scope: 'openid profile offline_access'
    });

登录用户:

auth0.authorize();

如果不将信息存储在 localStorage 中，我找不到执行此操作的方法。

Answer 1

披露:我为 Auth0 工作。

您的应用程序不应接受回调中的任意参数并使用它来重定向用户。我建议将信息存储在 localStorage 中，并使用唯一的哈希(例如 state)引用它。

例如

const state = getRandomBytes(32); // Assume that  this method will give you 32 bytes

localStorage[state] = { pathToGotoAfterAuth: '/somepath' };

auth0.authorize({
   state: state
});


// Then later
const authResult = auth0.parseHash();
const state = authResult.state;
const olderAppState = localStorage[state];
localStorage.remove(state);
redirect(olderAppState.pathToGotoAfterAuth);

然后，在回调后，您将收到此状态，然后您的应用程序可以使用存储的版本执行必要的操作。

这有几个优点，例如

• 能够抵御 CSRF 攻击。
• 如果您将来想要恢复更多数据，这很简单。