Auth0和angular2:如何设置callbackURL并捕获令牌? [英] Auth0 and angular2: how to set callbackURL and catch the token?

问题描述

我正在尝试使用 Auth0 和 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=[e-mail] (注意#而不是预期的问号)

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=[e-mail] (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

我的问题是:

My questions are:

1. 如何让Auth0实际重定向到callbackURL?
2. 即使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:

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

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

所以我认为即使未指定，它也可能适用于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并捕获令牌?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！