Question

TL; DR：登录后JWT保存在客户端（来自auth0lock），当使用angular2-jwt发送到服务器端时，使用express-jwt验证时接收：＆＃34; UnauthorizedError：jwt格式错误＆＃34 ;

您好，我正在使用SPA，前端是angular2，后端是express，我正在研究的当前功能是身份验证，经过一些研究，我发现最好的解决方案是使用Auth0。

我使用Auth0Lock因为我不喜欢托管页面，而且退出SPA，我遇到的问题是在登录后，我创建了一个按钮来测试身份验证通过我的服务器端，并在点击它时，我收到＆＃34; UnauthorizedError：jwt格式错误＆＃34;在服务器端。

我的登录流程一开始只是客户端，你点击登录按钮，你得到Auth0Lock，你登录，一旦你登录，当你点击，JWT保存在客户端在测试按钮中，使用Angular2-jwt模块将JWT传递到服务器端，并在服务器端验证JWT。

客户端身份验证服务：

@Injectable()
export class AuthService {

  private lock: any;
  private userProfile: any;

  constructor(public router: Router) {
    this.lock = new Auth0Lock(AUTH_CONFIG.clientID, AUTH_CONFIG.domain, {
    oidcConformant: true,
    autoclose: true,
    auth: {
      redirectUrl: AUTH_CONFIG.callbackURL,
      responseType: 'token id_token',
      audience: AUTH_CONFIG.audience,
      params: {
        scope: 'openid profile user_metadata email'
      }
    },
    rememberLastLogin: true,
    allowForgotPassword: true,
    languageDictionary: { title: 'Cowoffee'},
    socialButtonStyle: 'small'
  });
  }

  public login(): void {
    this.lock.show();
  }

  // Call this method in app.component
  // if using path-based routing
  public handleAuthentication(): void {
    this.lock.on('authenticated', (authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        this.router.navigate(['/']);
      }
    });
    this.lock.on('authorization_error', (err) => {
      this.router.navigate(['/']);
      console.log(err);
      alert(`Error: ${err.error}. Check the console for further details.`);
    });
  }

  // Call this method in app.component
  // if using hash-based routing
  public handleAuthenticationWithHash(): void {
    this
      .router
      .events
      .filter(event => event instanceof NavigationStart)
      .filter((event: NavigationStart) => (/access_token|id_token|error/).test(event.url))
      .subscribe(() => {
        this.lock.resumeAuth(window.location.hash, (err, authResult) => {
          if (err) {
            this.router.navigate(['/']);
            console.log(err);
            alert(`Error: ${err.error}. Check the console for further details.`);
            return;
          }
          this.setSession(authResult);
          this.router.navigate(['/']);
        });
    });
  }

  private setSession(authResult): void {
    // Set the time that the access token will expire at
    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
  }

  public logout(): void {
    // Remove tokens and expiry time from localStorage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    // Go back to the home route
    this.router.navigate(['/']);
  }

  public isAuthenticated(): boolean {
    // Check whether the current time is past the
    // access token's expiry time
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

  public async getProfile(): Promise<any> {
    if (this.userProfile) {
      return this.userProfile;
    }

    const accessToken = localStorage.getItem('access_token');
    if (!accessToken) {
      throw new Error('Access token must exist to fetch profile');
    }
    const test: any = promisifyAll(this.lock);
    this.userProfile = test.getUserInfoAsync(accessToken);
    return this.userProfile;
  }

}

客户端提供商：

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
    tokenGetter: (() => sessionStorage.getItem('access_token')),
    globalHeaders: [{'Content-Type': 'application/json'}],
  }), http, options);
}

服务器端验证设置：

export const JwtConfiguration = {
  // Dynamically provide a signing key
  // based on the kid in the header and
  // the singing keys provided by the JWKS endpoint.
  secret: jwksRsa.expressJwtSecret({
    cache: true,
    rateLimit: true,
    jwksRequestsPerMinute: 5,
    jwksUri: `https://*******.eu.auth0.com/.well-known/jwks.json`
  }),

  // Validate the audience and the issuer.
  audience: 'https://*******',
  issuer: `https://*******.eu.auth0.com/`,
  algorithms: ['RS256']
};

控制器内的Servier端验证：

@JsonController('/test')
export class TestController {
    @Get('/')
    @UndefinedResultCode(500)
    @UseBefore(jwt(JwtConfiguration))
    public TestJWT(): string {
        return 'success';
        }
}

我想说大部分代码都是从Auth0文档中复制和使用的，感谢很多帮助，对不起，感谢很长的帖子！

更新问题是令牌被保存在localStorage中，我试图从sessionStorage中检索它，而不是尴尬，当你只是复制粘贴示例时......就会发生一切正常。

Answer 1

问题是令牌被保存在localStorage中，我试图从sessionStorage中搜索它，而不是尴尬，当你只是复制粘贴示例时......就会发生一切正常。

如果有人使用Auth0，请注意new community，旧的没用，祝大家好运。：）

使用Auth0Lock对express + angular2 app进行身份验证，＆＃34; UnauthorizedError：jwt格式错误＆＃34;

1 个答案: