我们在Angular5应用程序中使用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版本的文件和值被替换为八达通,非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的东西,比如检查用户是否经过身份验证以及存储/检索访问令牌: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('/');
}
}
这些都是我们目前使用过的奥克塔的地方,而且还在进行中。
问题是,当使用常规
ng serve
命令生成的普通dev构建在本地运行时,这似乎非常有效,但是当运行ng build --prod
时,它失败得很惨,在这种情况下,应用程序甚至没有启动,我们在浏览器中什么也看不到,在控制台中我们看到:错误类型错误:无法读取未定义的属性“issuer”
在为prod构建启用sourcemaps进行调试之后,此错误来自
okta.service.j
中的node_modules
s文件。此服务的构造函数需要一个auth
参数,而这正是代码试图从中获取issuer
属性的原因,但是当Angular在内部初始化服务以准备DI时,它本身应该传递给该服务。考虑到它在开发过程中没有任何问题,真的不知道该尝试什么。
最佳答案
问题可能出在授权服务器上。它可以自由地访问preview(dev)org中的api访问管理。但是你必须在生产组织中为这个功能付费。
要检查:
去你的生产组织。okta dashboard>security>api>检查除了“tokens”和“trusted origins”选项卡之外,您是否还看到“authorization server”选项卡
如果您没有列出“授权服务器”。将颁发者url更改为您的okta url。所以发卡机构=https://{org name}.okta.com
关于angular - Okta Angular错误仅在--prod构建中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50176266/