Auth0和angular2：如何设置回调URL和捕获令牌？

Question

我正在尝试使用Auth0和angular2（2.0.0-rc.6）实现无密码身份验证，使用angular2 webpack starter和Auth0锁无密码。

表单正常显示，身份验证电子邮件使用以下代码发送：

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

问题发生在我单击电子邮件中的神奇链接之后：

>

即使魔术链接的redirect_uri看起来是正确的（redirect_uri=http://localhost:3000/#/sandbox），它也被忽略；

相反，在成功登录（签入Auth0日志）后，地址栏中的url（简短地）：http://localhost:3000/#access_token=xxxxxxxxxx

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

我的问题是：

1. 如何有Auth0实际上重定向到回调URL？
2. 我怎么能抓住令牌与新的angular2路由器，即使uri是错误的？（查询前缺少问号）

Answer 1

经过一番挣扎，我找到了一个变通办法。

TL； DR；使用PathLocationStrategy（超文本标记语言5 pushState），而不是散列URL样式。

在Auth0控制台（客户端设置）的允许注销URL和允许来源下面，指定：

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

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

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

诀窍是摆脱URL中的哈希（#）；哈希是Angular2 Webpack Starter中默认的LocationStrategy。

要做到这一点，请在应用程序中。模块。ts，更改路由模块。forRoot（路由，{useHash:true}）到RouterModule。forRoot（路由，{useHash:false}）

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

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

在谷歌搜索了一下之后，我在这个页面上找到了一个补丁。

修复方法是删除webpack-dev-server："^2.1.0-beta.2"中的carret（^）（dev依赖，package.json），并重新安装包：

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

然后，在控制台/终端中，键入：npm安装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

它应该呆在那里。捕获和保存令牌现在应该很简单。。。