获取“回调 URL 与 Auth0 不匹配”

Question

我有一个 Auth0 客户端，配置了以下回调 URL：

http://本地主机:4200

我可以正常登录。

问题是当我导航到应用程序中的某个 URL 时：http://localhost:4200/places。发生的情况如下：

1. 我导航到http://localhost:4200/places
2. Angular 将我（正确地）重定向到http://localhost:4200
3. 我尝试登录
4. 我从 Auth0 收到一条错误消息，指出“URL “ http://localhost:4200/places ”不在允许的回调 URL 列表中”。

Auth0 是对的，http://localhost:4200/places它不在我允许的回调 URL 列表中，而且我也不希望它出现在其中。我不想列出我的用户可能被踢回登录屏幕的任何 URL。

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

我意识到我可以指定http://localhost:4200为redirectUrl并“修复”问题，但随后我必须redirectUrl在开发、登台和生产方面做出不同的改变。这似乎不是人们通常解决这个问题的方式。

我怎样才能让 Auth0 不尝试将我重定向到/places？

Answer 1

我遇到了同样的问题，并用上面的史莱克的建议解决了它（与我不同的史莱克）。但是，我必须使用 window.top.location.origin 而不是 window.top.location.hostname。对我来说，window.top.location.origin 相当于 Auth0 中客户端设置中允许的回调 URL 值。

这是我的代码：

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

    let options =
        {
            closable: false,
            languageDictionary:
            {
                emailInputPlaceholder: "something@youremail.com",
                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);