获取“回调URL不匹配"；使用Auth0 [英] Getting "Callback URL mismatch" with Auth0

问题描述

我有一个配置有以下回调URL的Auth0客户端:

I have an Auth0 client that's configured with the following callback URL:

http://localhost:4200

我可以正常登录.

问题是当我导航至我的应用程序中的某个URL:http://localhost:4200/places时.这是发生了什么:

The problem is when I navigate to a certain URL in my app: http://localhost:4200/places. Here's what happens:

1. 我导航到http://localhost:4200/places
2. Angular将我(正确)重定向到http://localhost:4200
3. 我尝试登录
4. 我从Auth0中收到一条错误消息，提示"URL" http://localhost:4200/places "不在允许的回调URL列表中."

1. I navigate to http://localhost:4200/places
2. Angular redirects me (correctly) to http://localhost:4200
3. I try to log in
4. I get an error from Auth0 saying "The url "http://localhost:4200/places" is not in the list of allowed callback URLs".

Auth0是正确的，http://localhost:4200/places不在我允许的回调URL列表中-我不希望这样.我不想列出我的用户可能被踢回到登录屏幕的所有URL.

Auth0 is right, http://localhost:4200/places is not in my list of allowed callback URLs—and I don't want it to be. I don't want to list any and every URL that my user might get kicked back to the login screen from.

因此，由于某种原因，正在发生一些事情，告诉Auth0引用URL是http://localhost:4200/places而不是http://localhost:4200，即使http://localhost:4200实际上是我尝试登录时地址栏中的URL.

So for some reason something is happening that's telling Auth0 that the referring URL is http://localhost:4200/places rather than http://localhost:4200, even though http://localhost:4200 is in fact the URL in the address bar when I attempt to log in.

我意识到我可以将http://localhost:4200指定为redirectUrl并修复"问题，但是随后我必须使redirectUrl在开发，登台和生产上有所不同.似乎这不是人们通常解决此问题的方式.

I realize I could specify http://localhost:4200 as the redirectUrl and "fix" the problem, but then I'd have to make redirectUrl be different on dev, staging, and production. It doesn't seem like that's probably the way people usually get around this issue.

如何获取Auth0而不尝试将我重定向到/places?

How can I get Auth0 not to try to redirect me to /places?

推荐答案

我遇到了同样的问题，并通过上述史瑞克的建议解决了这个问题(与我的施雷克不一样).但是，我必须使用window.top.location.origin而不是window.top.location.hostname.对我来说，window.top.location.origin等同于我在Auth0中的客户端设置中的允许的回调URL值.

I was experiencing this same issue and solved it with Shrek's suggestion above (not the same Schreck as me). However, I had to use window.top.location.origin instead of window.top.location.hostname. For me, window.top.location.origin equates to the Allowed Callback URLs values in my client settings in Auth0.

这是我的代码:

    let stateOptions =
    {
        "auth0_authorize": this.authNonce,
        "return_url": router.url
    };

    let options =
        {
            closable: false,
            languageDictionary:
            {
                emailInputPlaceholder: "[e-mail]",
                title: "Log me in"
            },
            auth:
            {
                redirectUrl: window.top.location.origin,
                redirect: true,
                responseType: 'token',
                params:
                {
                    state: btoa(JSON.stringify(stateOptions)),
                    scope: 'openid user_id name nickname email picture'
                }
            }
        };

    this.lock = new Auth0Lock('[your-auth0-clientid]', '[your-auth0-domain]', options);

这篇关于获取“回调URL不匹配"；使用Auth0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！