如何在角度 8 中配置 Oauth2 oidc答案

【问题标题】：how to configure Oauth2 oidc in angular 8如何在角度 8 中配置 Oauth2 oidc
【发布时间】：2019-12-03 18:20:09
【问题描述】：

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

身份验证配置

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

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

【问题讨论】：

标签： javascript angular typescript authentication oauth-2.0

【解决方案1】：

请检查以下几点：

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

最后一点，您能否尝试使用完整的语法（不带 window.location.origin）编写您的 redirectUrl，然后再次尝试您的应用。

【讨论】：

是的 cors 已启用，并且 oauth2 在服务器端注册，我猜 redirectURi 将是本地主机。好的，我会再试一次
它不起作用，因为我遇到了同样的错误发行者是什么，是我的 api 基本 url 还是缺少其他东西，allowedUrls 是什么？
顺便说一句，什么是重定向 URI？它是我们在用户成功登录时将用户重定向到的那个吗

【解决方案2】：

我对 Angular 几乎一无所知，但我非常了解 SPA 安全性 - 我会推荐 oidc-client 库

令牌发行者不应该是您的 API - 它应该是一个单独的“登录”网址

我的帖子可能会帮助您了解总体方向和关注点分离： https://authguidance.com/2017/09/24/basicspa-overview/

【讨论】：