Question

我正在尝试在我的角度项目中配置Oauth2进行登录。我已经通过阅读文档对其进行了配置，但是每当我点击登录时它给了我未经授权的错误，我不知道如何解决。我的配置是

身份验证配置

export const authConfig: AuthConfig = {

// Url of the Identity Provider
issuer: 'my api base URL',

// URL of the SPA to redirect the user to after login
redirectUri:  window.location.origin + '/worklists',

clientId: 'oAuth2-login',


 responseType: 'code',

 scope: 'open worklists genstate',

};

应用程序组件

 private configure() {
 this.oauthService.configure(authConfig);
 this.oauthService.tokenValidationHandler = new JwksValidationHandler();
 this.oauthService.loadDiscoveryDocumentAndTryLogin();
 }

应用程序模块

OAuthModule.forRoot({
  resourceServer: {
    allowedUrls: ['my api base url'],
    sendAccessToken: true
  }
})

jwt拦截器

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.idToken = this.authService.getAccessToken() || '';
// cloning original request and set/add new headers
const authReq = req.clone({
  headers: this.idToken
    ? req.headers
      .set('Authorization', `Bearer ${this.idToken}`)
      .set('Access-Control-Allow-Origin', '*')
    : req.headers,
  params: req.params
});
console.log(authReq, 'auth req');
return next.handle(authReq);
}

这是我的登录服务

     public login(payload: LoginPayload, rememberMe: boolean = false) {
return this.httpService.post('/oauth/authorize', payload).pipe(
  first(),
  map((resp: LoginResponse) => {
    console.log(resp, 'response')
    return this.sessionService.storeLoginResponse(resp, rememberMe);
     })
   );
 }

我认为这是访问令牌或配置问题有人能帮我吗？谢谢

Answer 1

我对Angular几乎一无所知，但我对SPA的安全性非常了解-我建议使用oidc-client库

令牌发行者不应是您的API，而应是单独的“登录”网址

我的帖子可能会为您提供一般指导和关注点分离： https://authguidance.com/2017/09/24/basicspa-overview/

Answer 2

请检查以下几点：

您是否在服务器端启用了CORS？
您的客户端oAuth2-login是否已在服务器端注册？
使用的redirectUrl（包括使用的端口）是否已在服务器端注册？

最后一点，您是否可以尝试使用完整语法（没有window.location.origin）编写您的redirectUrl，然后重试您的应用程序。

如何在角度8中配置Oauth2 oidc

2 个答案: