没有 OktaAuth 的提供者，但 OktaAuth 定义了？

Question

致 Okta 文档：https://developer.okta.com/docs/guides/sign-into-spa/angular/main/#configure-the-sdk，我已将我的应用程序配置为通过 Google 进行身份验证。

\n

所以，我已经实现了 OktaAuthModule 但我总是遇到这个错误：

\n

core.js:6498 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[OktaAuth -> OktaAuth -> OktaAuth]: \n  NullInjectorError: No provider for OktaAuth!\nNullInjectorError: R3InjectorError(AppModule)[OktaAuth -> OktaAuth -> OktaAuth]: \n  NullInjectorError: No provider for OktaAuth!\n    at NullInjector.get (core.js:11120)\n    at R3Injector.get (core.js:11287)\n    at R3Injector.get (core.js:11287)\n    at R3Injector.get (core.js:11287)\n    at NgModuleRef$1.get (core.js:25352)\n    at Object.get (core.js:25066)\n    at lookupTokenUsingModuleInjector (core.js:3354)\n    at getOrCreateInjectable (core.js:3466)\n    at Module.\xc9\xb5\xc9\xb5directiveInject (core.js:14756)\n    at NodeInjectorFactory.LoginComponent_Factory [as factory] (login.component.ts:10)\n    at resolvePromise (zone.js:1213)\n    at resolvePromise (zone.js:1167)\n    at zone.js:1279\n    at ZoneDelegate.invokeTask (zone.js:406)\n    at Object.onInvokeTask (core.js:28679)\n    at ZoneDelegate.invokeTask (zone.js:405)\n    at Zone.runTask (zone.js:178)\n    at drainMicroTaskQueue (zone.js:582)\n

\n

以下是已实施的不同代码：

\n

应用程序模块.ts

\n

import { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { AppComponent } from \'./app.component\';\nimport { AppRoutingModule } from \'./app-routing.module\';\nimport { BrowserAnimationsModule } from \'@angular/platform-browser/animations\';\nimport {LoginModule} from "./login/login.module";\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    LoginModule\n  ],\n  exports: [BrowserAnimationsModule],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

\n

登录模块.ts

\n

import { NgModule } from \'@angular/core\';\nimport { CommonModule } from \'@angular/common\';\nimport {\n  OKTA_CONFIG,\n  OktaAuthModule,\n} from \'@okta/okta-angular\';\n\nimport { OktaAuth } from \'@okta/okta-auth-js\';\nimport {LoginComponent} from "./login.component";\n\nconst OKTA_DOMAIN = \'<my Okta Domain>\';\nconst CLIENT_ID = \'<MY ID>\'\nconst CALLBACK_PATH = \'/login/callback\';\n\nconst ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;\nconst HOST = window.location.host;\nconst REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;\nconst SCOPES = \'openid profile email\';\n\nconst config = {\n  issuer: ISSUER,\n  clientId: CLIENT_ID,\n  redirectUri: REDIRECT_URI,\n  scopes: SCOPES.split(/\\s+/)\n};\n\nconst oktaAuth = new OktaAuth(config);\n\n@NgModule({\n  declarations: [LoginComponent],\n  imports: [\n    CommonModule,\n    OktaAuthModule\n  ],\n  providers: [\n    { provide: OKTA_CONFIG, useValue: { oktaAuth } },\n  ],\n})\nexport class LoginModule { }\n

\n

登录.组件.ts

\n

import { Component } from \'@angular/core\';\nimport {OktaAuthStateService} from "@okta/okta-angular";\nimport {OktaAuth} from "@okta/okta-auth-js";\n\n@Component({\n  selector: \'app-login\',\n  templateUrl: \'./login.component.html\',\n  styleUrls: [\'./login.component.css\']\n})\nexport class LoginComponent  {\n\n  constructor(public authStateService: OktaAuthStateService, public oktaAuth: OktaAuth) { }\n\n  async login() {\n    await this.oktaAuth.signInWithRedirect({\n      originalUri: \'/configured-redirect-path\'\n    });\n  }\n\n}\n

\n

登录.component.html

\n

<button *ngIf="!(authStateService.authState$ | async)?.isAuthenticated" (click)="login()">\n  Login\n</button>\n

\n

您知道使用 OktaAuth 的这段代码有什么问题吗？

\n

更新1

\n

我在登录模块中有更新导出

\n

import { NgModule } from \'@angular/core\';\nimport { CommonModule } from \'@angular/common\';\nimport {\n  OKTA_CONFIG,\n  OktaAuthModule,\n} from \'@okta/okta-angular\';\n\nimport { OktaAuth } from \'@okta/okta-auth-js\';\nimport {LoginComponent} from "./login.component";\n\nconst OKTA_DOMAIN = \'...\';\nconst CLIENT_ID = \'...\';\nconst CALLBACK_PATH = \'/login/callback\';\n\nconst ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;\nconst HOST = window.location.host;\nconst REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;\nconst SCOPES = \'openid profile email\';\n\nconst config = {\n  issuer: ISSUER,\n  clientId: CLIENT_ID,\n  redirectUri: REDIRECT_URI,\n  scopes: SCOPES.split(/\\s+/)\n};\n\nconst oktaAuth = new OktaAuth(config);\n\n@NgModule({\n  declarations: [LoginComponent],\n  imports: [\n    CommonModule,\n    OktaAuthModule\n  ],\n  exports: [\n    CommonModule,\n    OktaAuthModule\n  ],\n  providers: [\n    { provide: OKTA_CONFIG, useValue: { oktaAuth } },\n  ],\n})\nexport class LoginModule { }\n

\n

但没有变化

\n

Answer 1

如果您使用的是@okta/okta-auth-jsversion 5.x，那么您需要使用OKTA_AUTH注入令牌来注入 OktaAuth ，如下所示：

import { OKTA_AUTH } from '@okta/okta-angular';


export class LoginComponent  {
  constructor(public authStateService: OktaAuthStateService, @Inject(OKTA_AUTH) 
      public oktaAuth: OktaAuth) {}

}

请参阅迁移指南