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

Question

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

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

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {LoginModule} from "./login/login.module";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LoginModule
  ],
  exports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  OKTA_CONFIG,
  OktaAuthModule,
} from '@okta/okta-angular';

import { OktaAuth } from '@okta/okta-auth-js';
import {LoginComponent} from "./login.component";

const OKTA_DOMAIN = '<my Okta Domain>';
const CLIENT_ID = '<MY ID>'
const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: CLIENT_ID,
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s+/)
};

const oktaAuth = new OktaAuth(config);

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    OktaAuthModule
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: { oktaAuth } },
  ],
})
export class LoginModule { }

login.component.ts

import { Component } from '@angular/core';
import {OktaAuthStateService} from "@okta/okta-angular";
import {OktaAuth} from "@okta/okta-auth-js";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent  {

  constructor(public authStateService: OktaAuthStateService, public oktaAuth: OktaAuth) { }

  async login() {
    await this.oktaAuth.signInWithRedirect({
      originalUri: '/configured-redirect-path'
    });
  }

}

login.component.html

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

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

更新 1

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  OKTA_CONFIG,
  OktaAuthModule,
} from '@okta/okta-angular';

import { OktaAuth } from '@okta/okta-auth-js';
import {LoginComponent} from "./login.component";

const OKTA_DOMAIN = '...';
const CLIENT_ID = '...';
const CALLBACK_PATH = '/login/callback';

const ISSUER = `https://${OKTA_DOMAIN}/oauth2/default`;
const HOST = window.location.host;
const REDIRECT_URI = `http://${HOST}${CALLBACK_PATH}`;
const SCOPES = 'openid profile email';

const config = {
  issuer: ISSUER,
  clientId: CLIENT_ID,
  redirectUri: REDIRECT_URI,
  scopes: SCOPES.split(/\s+/)
};

const oktaAuth = new OktaAuth(config);

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    OktaAuthModule
  ],
  exports: [
    CommonModule,
    OktaAuthModule
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: { oktaAuth } },
  ],
})
export class LoginModule { }

但没有变化

Answer 1

如果您使用 @okta/okta-auth-js 版本 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) {}

}

请参考migration guide

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

No provider for OktaAuth but OktaAuth define?

angular

typescript

jhipster

okta