在使用Angular和Auth0开发web应用时,可能会遭遇“无效状态”(Invalid State)的问题。该问题通常出现在用户登录后回到应用程序时,Auth0返回了一个不正确的状态参数,从而导致应用程序无法验证回调。要解决这个问题,我们可以按照以下步骤进行:
确定是否启用了重定向URL验证: 在Auth0平台上,可以选择启用或禁用重定向URL验证。如果验证被启用,则Auth0在将用户重定向回应用程序之前验证重定向URL是否与其配置的一致。如果它们不一致,将返回无效状态错误。要禁用此验证,请在Auth0平台上导航到“应用程序”>“设置”>“高级设置”,然后'验证重定向URL”设置为关闭。
确定是否正确地配置了callbackUrl: 在您的Angular应用中,您应该在Auth0Service中配置callbackUrl。 如果未正确配置此URL,则可能会返回无效状态错误。请务必将配置文件中的callbackUrl更改为您想要它返回的重定向URL。
示例代码: 在Auth0Service中添加如下代码来配置callbackUrl:
export class Auth0Service {
constructor(public router: Router) {}
// Configure Auth0 auth0 = new auth0.WebAuth({ clientID: 'CLIENT_ID', domain: 'DOMAIN.auth0.com', responseType: 'token id_token', audience: 'https://API_AUDIENCE', redirectUri: 'http://localhost:3000/callback', scope: 'openid' });
public login(): void { this.auth0.authorize(); }
public handleAuthentication(): void { this.auth0.parseHash((err, authResult) => { if (authResult && authResult.accessToken && authResult.idToken) { window.location.hash = ''; this.localLogin(authResult); this.router.navigate(['/']); }