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

问题描述

我正在尝试使用 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 日志中检查)，地址栏中的 url 是(简要地):http://localhost:3000/#access_token=xxxxxxxxxx&id_token=yyyyyyyyy&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

我的问题是:

1. 如何让 Auth0 实际上重定向到 callbackURL?
2. 如何使用新的 angular2 路由器捕获令牌，即使 uri 格式错误?(查询前缺少问号)

推荐答案

经过一番挣扎，我找到了解决方法.

After much struggling, I found a workaround.

TL;DR;使用 PathLocationStrategy (HTML 5 pushState)，而不是hash URL"样式.

在 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) { %>

稍微谷歌搜索后，我在这个页面找到了一个修复.

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屋！