Okta Angular 错误仅在 --prod 构建中

Question

我们在 Angular 5 应用程序中使用 okta-angular (v 1.0.1) 和 okta-signin-widget (v 2.7.0)。

我们在 environments/environment.ts 和 environments/environment.prod.ts 文件中有一些配置，基本上就是这样，但每个环境的值不同：

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

以上来自文件的 prod 版本，值被 Octopus 替换，non-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 和回调组件添加到我们的 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 来封装一些 okta 内容，例如检查用户是否已通过身份验证和 storing/retrieving 访问令牌：

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 文件以在应用程序的 header:

中显示登录用户的电子邮件和注销按钮

...
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，在这种情况下，应用程序甚至没有 bootstrap，我们在浏览器中什么也看不到，而在控制台中我们看到：

ERROR TypeError: Cannot read property 'issuer' of undefined

在为产品构建启用源映射进行调试后，此错误来自 node_modules 中的 okta.service.js 文件。此服务的构造函数需要一个 auth 参数，这就是代码试图从中获取 issuer 属性的内容，但这是 Angular 本身应该是的东西当它在内部为 DI 做好初始化准备时传递给服务。

真的不知道该尝试什么，因为它在开发中没有任何问题。

Answer 1

问题可能出在您的授权服务器上。在预览（开发）组织中可以免费访问 API 访问管理。但是您必须为生产组织中的功能付费。

检查：

转到您的生产组织。 Okta 仪表板 > 安全 > API > 检查除了 "Tokens" 和 "Trusted Origins" 选项卡

之外是否还看到 "Authorization Server" 选项卡

如果您没有 "Authorization Server" 列出。将发行人 URL 更改为您的 Okta URL。所以 issuer =https://{org name}.okta.com

Okta Angular 错误仅在 --prod 构建中

Okta Angular error only in --prod build

okta

angular