问题描述
我正在尝试使用 Auth0 和 angular2 (2.0.0-rc.6)，使用 angular2-webpack-starter 和 auth0-lock-passwordless .
I am trying to implement passwordless authentication with Auth0 and angular2 (2.0.0-rc.6), using angular2-webpack-starter and auth0-lock-passwordless.
该表单正常显示，并且使用以下代码发送身份验证电子邮件:
The form displays normally, and the authentication e-mail is sent using this code:
this.lock.magiclink({
callbackURL:"http://localhost:3000/#/sandbox"
});
问题出现在之后，我单击电子邮件中的魔术链接:
The issues occur after I click the magic link in the e-mail:
-
即使魔术链接的redirect_uri看起来正确(redirect_uri = http％3A％2F％2Flocalhost％3A3000％2F％23％2Fsandbox)，也将被忽略；
Even though the redirect_uri of the magic link seems correct (redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F%23%2Fsandbox), it is ignored;
相反，成功登录后(已在Auth0日志中检查)，地址栏中的网址是(简短地): http://localhost:3000/#access_token = xxxxxxxxxx& id_token = yyyyyyyy& [email protected] (注意#而不是预期的问号)
Instead, after a successful login (checked in Auth0 logs), the url in the address bar is (briefly):http://localhost:3000/#access_token=xxxxxxxxxx&id_token=yyyyyyyyy&[email protected] (notice the # instead of expected question mark)
然后(大约一秒钟后)将其重定向到: http://localhost:3000/#/access_token
then (after a second or so) it redirects to: http://localhost:3000/#/access_token
- 如何让Auth0实际重定向到callbackURL?
- 即使uri格式错误，如何使用新的angular2路由器捕获令牌? (查询之前缺少问号)
推荐答案
苦苦挣扎后，我找到了解决方法.
After much struggling, I found a workaround.
TL; DR;使用PathLocationStrategy(HTML 5 pushState)，而不是哈希网址"样式.
在Auth0控制台中的Allowed logout URLs和Allowed origins(客户端设置)下，指定为:
Below Allowed logout URLs and Allowed origins in the Auth0 console (Clients settings), it is specified:
所以我认为即使未指定，它也可能适用于Allowed Callback URLs.
So I figured it might apply to Allowed Callback URLs as well, even though it was not specified.
这将解释为什么callbackURL被忽略的原因.
That would explain why callbackURL is ignored.
然后，诀窍是摆脱URL中的哈希(#)；哈希是 Angular2 Webpack Starter 中的默认LocationStrategy.
The trick is then to get rid of the hash (#) in the URLs; the hash is the default LocationStrategy in Angular2 Webpack Starter.
为此，请在app.modules.ts中将RouterModule.forRoot(ROUTES, { useHash: true })更改为RouterModule.forRoot(ROUTES, { useHash: false })
To do that, in app.modules.ts, change RouterModule.forRoot(ROUTES, { useHash: true }) to RouterModule.forRoot(ROUTES, { useHash: false })
尽管它应该可以工作，但我遇到了另一个问题:当您重新加载页面时，它会显示空白页面，并显示以下消息:
Although it should have worked, I came accross yet another issue: when you reload a page, it gives a blank page with the following message:
<% if (webpackConfig.htmlElements.headTags) { %>
经过一段时间的Google搜索，我在此页面中找到了修复程序.
After a little Googling, I found a fix in this page.
解决方法是删除"webpack-dev-server"中的carret(^):"^ 2.1.0-beta.2"(devDependencies，package.json)，然后重新安装软件包:
The fix is to remove the carret (^) in the "webpack-dev-server": "^2.1.0-beta.2" (devDependencies, package.json), and reinstall the package:
- 将"^ 2.1.0-beta.2"替换为"2.1.0-beta.2"
然后在控制台/终端中，输入:npm install webpack-dev-server
then, in console/terminal, type: npm install webpack-dev-server
现在我要做的就是像这样更新callbackURL:
Now all I had to do was to update the callbackURL like so:
this.lock.magiclink({
callbackURL:"http://localhost:3000/sandbox"
});
在"Auth0客户端设置"的允许的回调URL"中，插入:
And in Auth0 Clients settings' Allowed Callback URLs, insert:
http://localhost:3000/sandbox
并保存.
现在，成功登录后(当我单击电子邮件中的魔术链接时)，它将打开带有以下URL的浏览器窗口:
Now, after a successful login (when I click the magic link in the e-mail), it opens a browser window with following URL:
http://localhost:3000/sandbox#access_token=xxxxxxxxxxx&id_token=yyyyyyyyyyy&token_type=Bearer
，它应该留在那儿.捕获和保存令牌现在应该很简单...
and it stays there, as it should. Catching and saving the token should now be trivial...
这篇关于Auth0和angular2:如何设置callbackURL并捕获令牌?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！