错误：无效的状态 auth0答案

【问题标题】：Error: Invalid state auth0错误：无效的状态 auth0
【发布时间】：2018-06-24 13:33:57
【问题描述】：

我正在尝试按照本教程在我的 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');
    }
}

有什么想法吗？

【问题讨论】：

标签： angular auth0

【解决方案1】：

state 参数是一个任意状态值，将在重定向之间保持。它有助于缓解 XSRF 攻击以及任何上下文信息，例如在身份验证过程完成后可能需要的返回 url。

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

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

/authorize 请求从与目标回调 URL 不同的方案 (HTTP/HTTPS) 执行，因为 localStorage 不会在不同方案之间共享。
在同一状态下连续两次调用parseHash方法（组件可能正在重新渲染），因为Auth0.js在取到值时会删除存储的信息。
用户在为登录页面添加书签后尝试登录。这是因为应该为每个请求生成一个新的状态值。您可以设置默认租户/应用程序登录 URL 以在检测到此类情况后将用户重定向到，更多关于 here。
使用不带enabledIdPInitiated 标志的 SAML 身份提供程序 (IdP) 启动登录流程，更多关于此 here。
SAML 服务提供商 (SP) 使用自定义域发起的流程，其中 SAML 提供商将 Auth0 域用于 AssertionConsumerService (ACS) URL。

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

【讨论】：