您可以从 Angular 中的 API 调用加载 OKTA_CONFIG 吗？

Question

一段时间以来，我一直在尝试从 API 调用中加载 OKTA_CONFIG，但一直没有成功。我希望它的工作方式类似于 APP_INITILIZER 的工作方式，当承诺从工厂提供商处 return 时，应用程序将在承诺得到解决之前启动。这可能吗？当我尝试时出现以下错误：TypeError：无法读取未定义的属性（读取“_oktaUserAgent”）。如果我不使用承诺而是直接 return 创建的 OktaAuth 对象，它将起作用。请参阅下面的代码示例。

AppModule

export function initializeApp(
  service: AppinitilizerService
): () => Promise<any> {
  return () => service.initializeApp();
}

export function initializeOkta(
  service: OktainitilizerService
): () => Promise<any> {
  return () => service.initializeOkta();
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OktaAuthModule,
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppinitilizerService],
      multi: true,
    },
    {
      provide: OKTA_CONFIG,
      useFactory: initializeOkta,
      deps: [OktainitilizerService],
      multi: false,
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppInitilizer 服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AppinitilizerService {

  constructor() { }

  initializeApp(): Promise<any> {
    //simulate api call to load configuration.
    return new Promise<boolean>((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 5000)
    })
  }

}

OktaInitilizer 服务

import { Injectable } from '@angular/core';
import { OktaAuth } from '@okta/okta-auth-js';

@Injectable({
  providedIn: 'root'
})
export class OktainitilizerService {

  constructor() { }

  initializeOkta(): Promise<any> {
    //simulate api call to load configuration.
    return new Promise<any>((resolve) => {
      setTimeout(() => {
        //Would use values returned from the API call for issuer and client id.
        const oktaAuth = new OktaAuth({
          issuer: 'https://{yourOktaDomain}/oauth2/default',
          clientId: '{yourClienId}',
          redirectUri: '{yourRedirectUri}',
          scopes: ['openid', 'profile', 'email'],
          pkce: true,
        })
        resolve({oktaAuth})
      }, 10000)
    })
  }

}

Answer 1

您需要在应用程序加载之前加载配置，而不是使用 APP_INITIALIZER，因此您需要在 bootstrap 时执行此操作。

您可以通过 fetch 在 main.ts 中调用并在 platformBrowserDynamic 方法调用中将配置响应作为提供者传递到应用程序中。

检查 this post for more details on how to do load configs from external APIs 并将配置传递到 OktaAuthModule。

您可以从 Angular 中的 API 调用加载 OKTA_CONFIG 吗？

Can you load OKTA_CONFIG from an API call in Angular?

typescript

okta

angular