如何在角度8中配置Oauth2 oidc [英] how to configure Oauth2 oidc in angular 8

问题描述

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

i am trying to configure Oauth2 in my angular project for login. i have configured it by reading documentation but when ever i hit the login it gives me Unauthorized error and i dont know how to solve it. my configurations are

身份验证配置

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);
     })
   );
 }

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

i think it's the issue with access token or my configuration can someone help me? thanks

推荐答案

请检查以下几点:

• 您是否在服务器端启用了CORS?
• 您的客户端oAuth2-login是否已在服务器端注册?
• 使用的redirectUrl(包括使用的端口)是否已在服务器端注册?

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

And last point, can you try to write your redirectUrl with the full syntax (without window.location.origin) and try your app again.

这篇关于如何在角度8中配置Oauth2 oidc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！