Мы используем okta-angular (v 1.0.1) и okta-signin-widget (v 2.7.0) в приложении Angular 5.
У нас есть некоторые настройки в файлах 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 ]
},
...
Мы добавили компонент входа в систему, в котором мы создаем знак входа в систему:
...
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, таких как проверка подлинности пользователя и сохранение / получение токена доступа:
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 в настоящее время, и это все еще в стадии разработки.
Проблема в том, что это работает идеально при локальном запуске с нормальной сборкой dev, сгенерированной с помощью обычной команды ng serve, но с треском проваливается при запуске ng build --prod, в этом случае приложение даже не загружается, мы вообще ничего не видим в браузере, а в консоли видим:
ОШИБКА TypeError: Невозможно прочитать свойство «эмитент» с неопределенным значением
После отладки с включенными исходными картами для сборки prod эта ошибка возникает из файла okta.service.j s внутри node_modules. Конструктор для этого сервиса требует аргумент auth, и это то, из чего код пытается получить свойство issuer, но это то, что Angular должен сам передавать службе, когда он инициализирует его для DI. .
На самом деле понятия не имею, что даже попробовать, учитывая, что он работает без каких-либо проблем в разработке.