僅在--prod構建中Okta Angular錯誤

Question

我們在Angular 5應用程序中使用okta-angular（v 1.0.1）和okta-signin-widget（v 2.7.0）。

我們在environments/environment.ts和environments/environment.prod.ts文件中有一些配置，基本上是這樣，但每個env的值不同：

oidc: {
    clientId: '{Okta_ClientId}',
    issuer: '{Okta_Issuer}',
    redirectUri: '{Okta_RedirectUri',
    scope: 'openid profile email'
},

以上是來自文件的prod版本，並且值被Octopus取代，非prod版本具有相同的鍵但是一些硬編碼值。

在app.module.ts文件中，我們引入deps，並創建配置：

import { OktaAuthModule, OktaAuthService } from '@okta/okta-angular';
import { environment } from '../environments/environment';

const oktaConfig = Object.assign({
  onAuthRequired: ({oktaAuth, router}) => {
  // Redirect the user to your custom login page
    router.navigate(['/login']);
  }
}, environment.oidc);

...

imports: [
  ...
  OktaAuthModule.initAuth(oktaConfig),
],
providers: [
  ...
  OktaAuthService,
],

我們已將authguard和callback組件添加到app.routes.ts文件中：

import { OktaAuthGuard, OktaCallbackComponent } from '@okta/okta-angular';
...

export const appRoutes: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent,
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [ OktaAuthGuard ]
  },
  ...

我們添加了一個登錄組件，我們在其中創建了一個okta登錄：

...
import { OktaAuthService } from '@okta/okta-angular';
import * as OktaSignIn from '@okta/okta-signin-widget';

import { environment } from '../../environments/environment';

export class LoginComponent implements OnInit {
  public signIn: OktaSignIn;

  constructor(
    public oktaAuth: OktaAuthService,
    private router: Router
  ) {}

  async ngOnInit(): Promise<void> {
    this.signIn = new OktaSignIn({
      baseUrl: environment.oidc.issuer.split('/oauth2')[0],
      clientId: environment.oidc.clientId,
      redirectUri: environment.oidc.redirectUri,
      i18n: {
        en: {
          'primaryauth.title': 'Please log in',
        },
     },
     authParams: {
       responseType: ['id_token', 'token'],
       issuer: environment.oidc.issuer,
       display: 'page',
       scopes: environment.oidc.scope.split(' '),
    },
  });

  const isAuthenticated = await this.oktaAuth.isAuthenticated();

  if (isAuthenticated) {
    this.router.navigate(['dashboard']);
  } else {
    this.signIn.renderEl(
      { el: '#sign-in-widget' },
      () => {
        // the success handler will not be called because we redirect to the Okta org for authentication
      },
      (err) => {
        throw err;
      },
    );
  }
}

}

我們添加了一個user.service.ts來封裝一些user.service.ts的東西，比如檢查用戶是否經過身份驗證以及存儲/檢索訪問令牌：

import { Injectable } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';

@Injectable()
export class UserService {
  public isAuthenticated: boolean;
  private _accessToken: string;

  constructor(private oktaAuth: OktaAuthService) {}

  async initAuth(): Promise<void> {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    this._accessToken = await this.oktaAuth.getAccessToken();
  }

  get accessToken(): string {
    if (this.isAuthenticated) {
      return this._accessToken;
    }

    return '';
  }
}

最后，我們更新了header.component.ts文件，以顯示登錄用戶的電子郵件和應用程序標題中的注銷按鈕：

...
import { OktaAuthService } from '@okta/okta-angular';

import { UserService } from '../_services/user.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  public userName: string;

  constructor(
    public oktaAuth: OktaAuthService,
    public userService: UserService,
    public router: Router
  ) {}

  async ngOnInit(): Promise<void> {

    this.userService.initAuth().then(() => {
    this.setUserName();
  });
}

private async setUserName(): Promise<void> {
  if (this.userService.isAuthenticated) {
    const userClaims = await this.oktaAuth.getUser();
    this.userName = userClaims.name;
  }
}

logout(): void {
  this.oktaAuth.logout('/');
}

}

這些都是我們目前使用Okta的所有地方，而且它仍然是一項正在進行中的工作。

問題是，當使用常規ng serve命令生成的正常開發構建本地運行時，這似乎完美地工作，但是當運行ng build --prod時它很難失敗，在這種情況下應用程序甚至沒有引導程序，我們什么都看不到在瀏覽器中，我們在控制台中看到：

錯誤TypeError：無法讀取未定義的屬性'issuer'

與用於督促構建支持sourcemaps調試完畢后，這個錯誤是從未來okta.service.j內S檔node_modules 。 這個服務的構造函數需要一個auth參數，這就是代碼試圖從中獲取issuer屬性的東西，但這是Angular本身在內部初始化它為DI准備時應該傳遞給服務的東西。

真的不知道甚至嘗試什么，因為它在開發過程中沒有任何問題。

Answer 1

問題可能在於您的授權服務器。 可以在預覽（dev）org中免費訪問API Access管理。 但你必須為生產組織中的功能付費。

要檢查：

去你的生產組織。 Okta儀表板>安全性> API>檢查“Tokens”和“Trusted Origins”選項卡之外是否還有“Authorization Server”選項卡

如果您沒有列出“授權服務器”。 將頒發者URL更改為您的Okta URL。 所以issuer = https：// {org name} .okta.com