authentication - Auth0 和 Angular2 : how to set callbackURL and catch the token?

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 protected] (注意#而不是预期的问号)

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

---

My questions are:

1. How to have Auth0 actually redirect to callbackURL?
2. How can I catch the token with the new angular2 router, even though the uri is misformed? (question mark missing before the query)

Answer 1

经过一番努力，我找到了解决方法。

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

---

在 Auth0 控制台(客户端设置)中的允许的注销 URL 和允许的来源下面，指定了:

Notice that querystrings and hash information are not taken into account when validating these URLs.

所以我认为它也可能适用于允许的回调 URL，即使没有指定。

这可以解释为什么 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”中的尖号 (^):“^2.1.0-beta.2”(devDependencies、package.json)，然后重新安装包:

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

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

---

现在我所要做的就是更新回调URL，如下所示:

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

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