Question

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

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

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

在点击电子邮件中的魔术链接后出现：

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

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

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


我的问题是：


如何让Auth0实际重定向到callbackURL？

即使uri错误，我如何使用新的angular2路由器捕获令牌？（查询前缺少问号）

Answer 1

经过多次努力，我找到了解决方法。

<强> TL; DR;使用PathLocationStrategy（HTML 5 pushState），而不是＆＃34;哈希URL＆＃34;风格。

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。

解决方法是删除＆＃34; webpack-dev-server＆＃34;：＆＃34; ^ 2.1.0-beta.2＆＃34;中的carret（^）。（devDependencies，package.json），并重新安装包：

替换＆＃34; ^ 2.1.0-beta.2＆＃34; by＆＃34; 2.1.0-beta.2＆＃34;

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

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

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

在Auth0客户端设置中＆＃39;允许的回调网址，插入：

http://localhost:3000/sandbox

并保存。

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

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

它会保持原样。捕获和保存令牌现在应该是微不足道的......

Auth0和angular2：如何设置callbackURL并捕获令牌？

1 个答案: