将OAuth2访问令牌配置为typescript-angular2客户端 [英] Configuring OAuth2 access token to typescript-angular2 client

问题描述

我不完全了解如何从诺言(oidc-client-js)向使用Swagger-CodeGen生成的API代码提供OAuth2访问令牌.

I do not fully understand how to provide OAuth2 access token from a promise (oidc-client-js) to API code generated with Swagger-CodeGen.

提供常数值很容易，但是如何在下面进行更改以从oidc-client-js获取用户的访问令牌?我想知道正确"的方法.将这个标记粘贴到全局变量中的某个地方很容易.

It is easy to provide constant values, but how do I change below to get the user's access token from oidc-client-js? I would like to know the "correct" way. It would be easy enough to stick this token somewhere in a global variable.

@NgModule({
  imports: [
    CommonModule,
    ApiModule.forConfig(() => new Configuration({
      accessToken: 'my-access-token' //this can also be a () => string function
    }))
  ],

在带有OnInit的常规组件中，我可以从oidc-client的UserManager实例的promise中获取令牌.使这两部分组合在一起使我感到困惑.一个似乎是静态配置，另一个似乎需要订阅单身人士的诺言.

In normal components with OnInit, I can get the token in a promise from an instance of oidc-client's UserManager. Making these two pieces fit together is what confuses me. One seems like static configuration and the other needs to subscribe to a singleton's promise.

this.userSubscription = this.authService.getUser().subscribe((user) => {
    if (user) {
        this.access_token = user.access_token;
    }
});

任何对我做错事情的更正也将不胜感激.这是我的第一个使用Angular的原型.

Any corrections to things I am doing wrong would also be appreciated. This is my first prototype using Angular.

更新

应用Ben的建议并花一些时间来了解APP_INITIALIZER(已标记为实验性且记录非常稀疏的imo)之后，感觉像是过分杀伤了.我以Configuration类的以下自定义提供程序结束，该提供程序被注入到Swagger-CodeGen生成的TypeScript-Angular2服务代码中:

After applying Ben's suggestion and taking time to understand APP_INITIALIZER (which is marked experimental and very sparsely documented imo), it felt like overkill. I ended with the following custom provider for the Configuration class which gets injected into TypeScript-Angular2 service code generated with Swagger-CodeGen:

providers: [
  AuthService,
  AuthGuardService,
  {
    provide: Configuration,
    useFactory: (authSvc: AuthService) => new Configuration({accessToken: authSvc.getAccessToken.bind(authSvc)}),
    deps: [AuthService],
    multi: false
  }
]

我更改了AuthService，以将用户最新的access_token存储在该服务上.从Swagger-CodeGen生成的代码中调用getAccessToken()方法，并返回最新的jwt以用于HTTP标头.感觉很干净，可以正常工作.请让我知道是否(以及为什么)这是解决我的问题的错误方法.

I changed my AuthService to store the user's latest access_token on the service. The getAccessToken() method is called from the Swagger-CodeGen generated code and returns the latest jwt for use in HTTP headers. It feels clean and it works. Please let me know if (and why) this is the wrong way to solve my problem.

推荐答案

您需要使用APP_INITIALIZER引导您的API令牌，看看我的回答

You need to use the APP_INITIALIZER to bootstrap your API token, take a look at my answer Pass web application context to Angular2 Service to see an example of how to do that.

这篇关于将OAuth2访问令牌配置为typescript-angular2客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！