在 Angular 2 应用程序中获取回调 URL 不匹配

Question

我使用 Auth0 通过 Google、Facebook 和其他方式授权用户。如果您在 URL 位于 Auth0 中的白名单回调 URL 列表中时单击登录，这将非常有效。

但是我的 Web 应用程序可以有任意数量的不同 URL，因此拥有一个包含一些允许的 URL 的简单白名单是行不通的。

登录总是尝试重定向回与我登录时相同的 URL，而这个 URL 大多数时候不在允许的 URL 列表中.

我已经尝试了上述设置的各种变体，但我只遇到如下错误：

The url "https://x.com/posts/gif/hot/1" is not in the list of allowed callback URLs
The url "https://x.com/posts/world/new/1" is not in the list of allowed callback URLs
The url "https://x.com/posts/nature/hot/6" is not in the list of allowed callback URLs
The url "https://x.com/posts/gaming/hot/3" is not in the list of allowed callback URLs

锁配置相关代码：

options = {
    auth: {
        callbackURL: 'https://x.com',
        // redirectUrl: 'https://x.com',
        responseType: 'token',
        // sso: true,
        // redirect: true,
        params: {
            scope: 'openid user_id name nickname email picture'
        }
    }
};

// Configure Auth0
lock = new Auth0Lock('x', 'x.auth0.com', this.options);

constructor(private _router: Router) {
    this.userProfile = JSON.parse(localStorage.getItem('profile'));

    // Add callback for the Lock `authenticated` event
    this.lock.on('authenticated', (authResult) => {
        localStorage.setItem('id_token', authResult.idToken);

        // Fetch profile information
        this.lock.getProfile(authResult.idToken, (error, profile) => {
            if (error) {
                throw new Error(error);
            }
        });
    });
};

登录方式：

public login() {
    // Call the show method to display the widget.
    this.lock.show({
        callbackUrl: 'https://x.com',
        state: this._router.url
    });
};

Answer 1

我假设您使用的是最新版本的 Lock (Lock 10)，如果是这种情况，则您包含的代码存在一些问题：

用户完成身份验证步骤后的 URL to which Auth0 will redirect to 是通过 auth: { redirectUrl: '...' } 指定的，您对该行进行了注释，而代码却错误地使用了 callbackURL.
According to the docs，show 方法不再接受任何参数。
独立于 Lock 版本，state parameter 应该用于缓解 CSRF 攻击，因此仅使用它来传递上下文信息可能是不安全的。

鉴于您有 redirectUrl 的评论，您可能也试过了；您在使用该参数时是否有相同的行为？

根据文档，您要实现的目标所需的配置应通过以下方式完成：

options = {
    auth: {
        redirectUrl: 'https://example.com/login/callback',
        responseType: 'token',
        params: {
            state: '[your_state_value]',
            scope: 'openid user_id name nickname email picture'
        }
    }
};

public login() {
    // Call the show method to display the widget.
    this.lock.show();
};

在 Angular 2 应用程序中获取回调 URL 不匹配

Getting callback URL mismatch in an Angular 2 application

redirect

login

auth0

angular