在 Angular 应用程序中出现 Okta 登录错误

Question

我正在制作网站并想添加 okta 登录。当我打开登录组件时出现错误：

浏览器显示带有 renderEl 的内容：

okta 帐户上的authorization_code 已启用：

代码：

配置/应用程序配置：

export default {

    oidc: {
        clientId: '0oaajz1c4cj2XH3z95d7',
        issuer: 'https://dev-58560322.okta.com/oauth2/default',
        redirectUri: 'http://localhost:4200/login/callback',
        scopes: ['openid', 'profile', 'email']
    }

}

模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductsComponent } from './products/products.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
import { PurchaseHistoryComponent } from './purchase-history/purchase-history.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { LoginComponent } from './login/login.component';
import { FooterComponent } from './footer/footer.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { HttpClientModule } from '@angular/common/http';
import { ProductService } from './services/product.service';
import { Routes, RouterModule} from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CartPriceComponent } from './cart-price/cart-price.component';
import { ReactiveFormsModule } from '@angular/forms'

import {
  OktaAuthModule,
  OktaCallbackComponent,
  OKTA_CONFIG 
} from '@okta/okta-angular';

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

import myAppConfig from './config/application-config';

const oktaConfig = myAppConfig.oidc;

const oktaAuth = new OktaAuth(oktaConfig);

const routes: Routes = [

  {path: 'login/callback', component: OktaCallbackComponent},
  {path: 'login', component: LoginComponent},
  {path: 'checkout', component: CheckoutComponent}, //Ясное дела для начала созаем этот путь к новому компоненту.
  {path: 'cart-details', component: ShoppingCartComponent},
  {path: 'products/:id', component: ProductDetailsComponent},
  {path: 'search/:name', component: ProductsComponent},
  {path: 'category/:id', component: ProductsComponent},
  {path: 'subcategory/:id', component: ProductsComponent},
  {path: 'category', component: ProductsComponent},
  {path: 'products', component: ProductsComponent},
  {path: '', redirectTo: '/products', pathMatch: 'full'},
  {path: '**', redirectTo: '/products', pathMatch: 'full'}
]

@NgModule({
  declarations: [
    AppComponent,
    ProductsComponent,
    NavbarComponent,
    ProductDetailsComponent,
    PurchaseHistoryComponent,
    ShoppingCartComponent,
    LoginComponent,
    FooterComponent,
    CheckoutComponent,
    CartPriceComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    NgbModule,
    ReactiveFormsModule,
    OktaAuthModule
  ],
  providers: [ProductService, { provide: OKTA_CONFIG, useValue: { oktaAuth }}],
  bootstrap: [AppComponent]
})
export class AppModule { }

登录组件： html:

<!-- Container to inject the Okta Sign-In Widget -->
<div class="pt-5">
    <div id="okta-sign-in-widget" class="pt-5"></div>
</div>

班级：

import { Component, Inject, OnInit } from '@angular/core';
import { OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';
import OktaSignIn from '@okta/okta-signin-widget';

import myAppConfig from '../config/application-config';

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

  oktaSignin: any;

  constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth) {

    this.oktaSignin = new OktaSignIn({
      logo: 'assets/images/logo.png',
      baseUrl: myAppConfig.oidc.issuer.split('/oauth2')[0],
      clientId: myAppConfig.oidc.clientId,
      redirectUri: myAppConfig.oidc.redirectUri,
      authParams: {
        pkce: true,
        issuer: myAppConfig.oidc.issuer,
        scopes: myAppConfig.oidc.scopes
      }
    });
   }

  ngOnInit(): void {
    this.oktaSignin.remove();

    this.oktaSignin.renderEl({
      el: '#okta-sign-in-widget'},
      (response: any) => {
        if (response.status === 'SUCCESS') {
          this.oktaAuth.signInWithRedirect();
        }
      },
      (error: any) => {
        throw error;
      }
    );
  }

}

导航栏上的登录/注销按钮：

                     <li><a *ngIf="!isAuthenticated" routerLink="/login" class="security-btn">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        Login</a>
                     </li>
                     <li><a *ngIf="isAuthenticated" (click)="logout()" class="security-btn">
                        <i class="fa fa-user" aria-hidden="true"></i>
                        Logout</a>
                     </li>
                  </ul>
               </div>

导航栏类：

import { ProductCategory } from '../classes/product-category';
import { ProductSubcategory } from '../classes/product-subcategory';
import { ProductService } from '../services/product.service';
import { Router } from '@angular/router';
import { Component, Inject, OnInit } from '@angular/core';
import { OktaAuthStateService, OKTA_AUTH } from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  productCategories: ProductCategory[] = [];

  isAuthenticated: boolean = false;
  userFullName: string = '';

  constructor(private router: Router, private productService: ProductService,
    private oktaAuthService: OktaAuthStateService,
    @Inject(OKTA_AUTH) private oktaAuth: OktaAuth) { }

  ngOnInit() {
    this.listProductCategoriesAndSubc();
    // Subscribe to authentication state changes
    this.oktaAuthService.authState$.subscribe(
      (result) => {
        this.isAuthenticated = result.isAuthenticated!;
        this.getUserDetails();
      }
    );
  }

  listProductCategoriesAndSubc() {
    this.productService.getProductCategories().subscribe(
      data => {
        this.productCategories = data;
        for(let singleProductCategory of this.productCategories){
          //по id каждой категории выбираем подкатегории
          this.productService.getProductSubcategoriesByCatId(singleProductCategory.id).subscribe(
            data => {
              singleProductCategory.productsubcategories = data;
            }
          );
        }
      }
    );
  }
  doSearch(value: string) {
    this.router.navigateByUrl(`/search/${value}`);
  }
    
  getUserDetails() {
    if (this.isAuthenticated) {
      this.oktaAuth.getUser().then(
        (res) => {
          this.userFullName = res.name as string;
        }
      );
    }
  }

  logout() {
    this.oktaAuth.signOut();
  }
}

出现此错误我该怎么办？