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

Question

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

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

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

问题发生我点击电子邮件中的魔法 link:

尽管魔术 link 的 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

My questions are:

How to have Auth0 actually redirect to callbackURL?

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)，而不是 "hash URL" 样式。

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

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

所以我认为它也可能适用于 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”

然后，在 console/terminal 中输入：npm install webpack-dev-server

现在我所要做的就是像这样更新回调URL：

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

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

http://localhost:3000/sandbox

并保存。

现在，在成功登录后（当我单击电子邮件中的魔法 link 时），它会打开一个浏览器 window，其中包含以下内容 URL:

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

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

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

Auth0 and angular2: how to set callbackURL and catch the token?

authentication

auth0

angular2-routing

angular