Javascript 如何使用auth0 js传递附加信息（登录后重定向用户）

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

用户希望转到/profile

页面被保护；用户被重定向到/login

使用重定向到/回调的auth0 js登录工作流

我希望回调页面将用户重定向到/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中，我无法找到执行此操作的方法。

披露：我为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攻击
• 如果您想在将来恢复更多数据，这是微不足道的

---

披露：我为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攻击
• 如果您想在将来恢复更多数据，这是微不足道的

---

我刚帮你查过。您需要使用params对象：{redirectUrl:'xxx'，params:{state:statePath/*登录时要重定向到的url的路径*/}}，然后在成功回调时，您可以将其用于location.href，使其处于以下状态：-），因为它将是authResult对象的一部分。我知道“params”只能使用auth0锁（而不是auth0 js）使用。我没有任何可用的“params”属性。因此，如果没有可替换的params设置，则您将保留已使用的localStorage选项。唯一的其他选择是使用弹出式登录。该应用程序不会离开页面，因此您仍然可以使用应用程序的当前状态。但实施起来更难。查找：webAuth.popupState不应用作重定向，auth0 js'

authorize

endpoing将接受一个状态。但是，这应该是一个动态值，而不是静态url。请在我刚刚为您检查过的网站上阅读更多关于此的信息。您需要使用params对象：{redirectUrl:'xxx'，params:{state:statePath/*登录时要重定向到的url的路径*/}}，然后在成功回调时，您可以将其用于location.href，使其处于以下状态：-），因为它将是authResult对象的一部分。我知道“params”只能使用auth0锁（而不是auth0 js）使用。我没有任何可用的“params”属性。因此，如果没有可替换的params设置，则您将保留已使用的localStorage选项。唯一的其他选择是使用弹出式登录。该应用程序不会离开页面，因此您仍然可以使用应用程序的当前状态。但实施起来更难。查找：webAuth.popupState不应用作重定向，auth0 js'

authorize

endpoing将接受一个状态。但是，这应该是一个动态值，而不是静态url。请阅读更多关于此的信息，我在文档中读到，状态不是用来传递自定义值，而是用来最小化CSRF攻击。我将使用localStorage（正如我现在所做的那样），但使用state值作为键。我把它命名为“redirectToUri”，没有进一步检查，这可能不是最好的主意。谢谢澄清。我编辑了我的答案以反映我的建议：）状态值是自动生成的；为什么要指定另一个？我试图回答一个更一般的情况。考虑如果你有两个标签试图并行地做AuthTo，那么它们将覆盖彼此的下一个端点。localStorage.remove（状态）；重定向（olderAppState.PathToToAfterAuth）<==认为需要解析olderAppState。。。因为localStorage的值将是JSON字符串。我在文档中读到，状态不是用来传递自定义值的，而是用来最小化CSRF攻击。我将使用localStorage（正如我现在所做的那样），但使用state值作为键。我把它命名为“redirectToUri”，没有进一步检查，这可能不是最好的主意。谢谢澄清。我编辑了我的答案以反映我的建议：）状态值是自动生成的；为什么要指定另一个？我试图回答一个更一般的情况。考虑如果你有两个标签试图并行地做AuthTo，那么它们将覆盖彼此的下一个端点。localStorage.remove（状态）；重定向（olderAppState.PathToToAfterAuth）<==认为需要解析olderAppState。。。as localStorage值将采用JSON字符串。