获取“回调 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 的错误消息，提示网址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?

推荐答案

我遇到了同样的问题，并通过上面的 Shrek 的建议解决了它(与我不同的 Schreck).但是，我不得不使用 window.top.location.origin 而不是 window.top.location.hostname.对我来说，window.top.location.origin 等同于 Auth0 中我的客户端设置中的 Allowed Callback URLs 值.

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