Auth0 和 Angular 2：如何设置回调 URL 并缓存令牌？

Question

我正在尝试使用Auth0 和angular2 (2.0.0-rc.6) 实现无密码身份验证，使用angular2-webpack-starter 和auth0-lock-passwordless。

表单显示正常，验证邮件使用此代码发送：

this.lock.magiclink({
    callbackURL:"http://localhost:3000/#/sandbox"
    });

问题发生在之后我点击了电子邮件中的魔术链接：

• 即使魔术链接的redirect_uri 看起来是正确的（redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fsandbox），它也会被忽略；

• 相反，在成功登录后（在 Auth0 日志中检查），地址栏中的 url 是（简要）： http://localhost:3000/#access_token=xxxxxxxxxx&id_token=yyyyyyyyy&email=myemail@emails.com（注意 # 而不是预期的问号）

• 然后（大约一秒钟后）它重定向到：http://localhost:3000/#/access_token

---

我的问题是：

1. 如何让 Auth0 真正重定向到 callbackURL？
2. 如何使用新的 angular2 路由器捕获令牌，即使 uri 格式错误？ （查询前缺少问号）

Answer 1

经过一番挣扎，我找到了解决方法。

TL;DR;使用 PathLocationStrategy (HTML 5 pushState)，而不是“hash URL”样式。

---

在 Auth0 控制台（客户端设置）中的Allowed logout URLs 和Allowed origins 下方，指定：

请注意，验证这些 URL 时不会考虑查询字符串和哈希信息。

所以我认为它也可能适用于Allowed Callback URLs，即使它没有被指定。

这可以解释为什么 callbackURL 会被忽略。

---

诀窍就是去掉 URL 中的井号 (#)；哈希是Angular2 Webpack Starter 中的默认LocationStrategy。

为此，在app.modules.ts 中，将RouterModule.forRoot(ROUTES, { useHash: true }) 更改为RouterModule.forRoot(ROUTES, { useHash: false })

---

虽然它应该可以工作，但我遇到了另一个问题：当您重新加载页面时，它会给出一个空白页面，并显示以下消息：

<% if (webpackConfig.htmlElements.headTags) { %>

经过一番谷歌搜索，我找到了fix in this page。

修复方法是删除“webpack-dev-server”中的carret（^）：“^2.1.0-beta.2”（devDependencies，package.json），然后重新安装包：

• 将“^2.1.0-beta.2”替换为“2.1.0-beta.2”

然后，在控制台/终端中，输入：npm install webpack-dev-server

---

现在我要做的就是像这样更新 callbackURL：

this.lock.magiclink({
  callbackURL:"http://localhost:3000/sandbox"
});

并在 Auth0 客户端设置的允许回调 URL 中，插入：

http://localhost:3000/sandbox

然后保存。

现在，在成功登录后（当我单击电子邮件中的魔术链接时），它会打开一个带有以下 URL 的浏览器窗口：

http://localhost:3000/sandbox#access_token=xxxxxxxxxxx&id_token=yyyyyyyyyyy&token_type=Bearer

它应该保留在那里。捕获和保存令牌现在应该是微不足道的......