错误：状态 auth0 无效

Question

我正在尝试按照本教程在我的 Angular 5 应用程序中实现 auth0： https: //toddmotto.com/angular-2-authentication

寄存器工作正常，但当我尝试登录时，我在控制台中看到以下内容：

这是我的身份验证服务：

import { Injectable } from '@angular/core';

// We want to avoid any 'name not found'
// warnings from TypeScript
declare var Auth0Lock: any;


@Injectable()
export class AuthService {
    private lock

    constructor() {
        // These stuff should be exported into other files
        this.lock = new Auth0Lock('id...',
            'url...')
    }

    login() {
        this.lock.show((error: string, profile: Object, id_token: string) => {
            if (error) {
                console.log(error);
            } else {
                console.log(profile)
                localStorage.setItem('profile', JSON.stringify(profile));
                localStorage.setItem('id_token', id_token);
            }
        });
    }

    logout() {
        localStorage.removeItem('profile');
        localStorage.removeItem('id_token');
    }
}

有任何想法吗？

Answer 1

state参数是一个任意状态值，将在重定向期间维护。它对于缓解 XSRF 攻击以及身份验证过程完成后可能需要的任何上下文信息（例如返回 URL）很有用。

当您使用 Auth0.js 和/或 Lock 库触发身份验证请求时，Auth0.js 会将随机数和状态（您提供的或它自动生成的）存储在浏览器的 localStorage 中。这样做是为了在服务器返回响应时验证它们（在 parseHash 或 on('authenticated') 事件中）。

丢失/无效状态错误可能是由以下几种情况引起的：

1. /authorize 从与目标回调 URL 不同的方案 (HTTP/HTTPS) 执行请求，因为 localStorage 不在不同方案之间共享。

2. 连续两次以相同的状态调用 parseHash 方法（组件可能会重新渲染），因为在检索值时，Auth0.js 将删除存储的信息。

3. 用户在为登录页面添加书签后尝试登录。这是因为应该为每个请求生成一个新的状态值。您可以设置默认的租户/应用程序登录 URL，以在检测到此类情况后将用户重定向到，更多信息请参见此处。

4. 使用 SAML 身份提供商 (IdP) 启动不带enabledIdPInitiated标志的登录流程，更多信息请参见此处。

5. SAML 服务提供商 (SP) 使用自定义域启动流程，其中 SAML 提供商使用 AssertionConsumerService (ACS) URL 的 Auth0 域。

请确保您已按照上述要点正确配置您的应用程序。如果这些不能解决问题，也许可以共享存储库，以便我们可以尝试重现该问题。