要在Angular应用中实现使用Okta进行登录,你可以按照以下步骤进行操作:
npm install @okta/okta-angular
npm install @okta/okta-auth-js
在Okta上创建一个新应用程序并获取必要的配置信息,包括clientId、issuer和redirectUri。
在项目的根目录下创建一个新文件okta.config.ts,并将以下代码添加到该文件中:
export default {
oidc: {
clientId: 'your-client-id',
issuer: 'https://your-okta-domain.com/oauth2/default',
redirectUri: 'http://localhost:4200/callback',
scopes: ['openid', 'profile', 'email'],
},
};
替换clientId、issuer和redirectUri的值为你在步骤2中获取到的配置信息。
app.module.ts文件中导入Okta模块,并在imports数组中添加OktaAuthModule:import { NgModule } from '@angular/core';
import { OktaAuthModule } from '@okta/okta-angular';
import config from './okta.config';
@NgModule({
imports: [
// ...
OktaAuthModule.initAuth(config.oidc),
],
// ...
})
export class AppModule { }
login.component.ts,并添加以下代码:import { Component } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
@Component({
selector: 'app-login',
template: `
`,
})
export class LoginComponent {
constructor(private oktaAuth: OktaAuthService) {}
async login() {
await this.oktaAuth.signInWithRedirect();
}
}
将login.component添加到你的应用的路由中。
在需要进行身份验证的组件中,导入OktaAuthService,并在构造函数中注入该服务:
import { Component } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
@Component({
selector: 'app-my-protected-component',
template: `
My Protected Component
Welcome, {{ userName }}
`,
})
export class MyProtectedComponent {
userName: string;
constructor(private oktaAuth: OktaAuthService) {
this.userName = this.oktaAuth.getUser().name;
}
logout() {
this.oktaAuth.signOut();
}
}
OktaAuthService,并在canActivate方法中使用OktaAuthService进行身份验证:import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { OktaAuthService } from '@okta/okta-angular';
@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(private oktaAuth: OktaAuthService, private router: Router) {}
canActivate() {
if (this.oktaAuth.isAuthenticated()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
AuthGuard来保护需要进行身份验证的路由:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyProtectedComponent } from './my-protected-component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'protected', component: MyProtectedComponent, canActivate: [AuthGuard] },
// ...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
现在你的Angular应用就可以使用Okta进行登录了。当用户访问受保护的路由时,如果未经过身份验证,将会被重定向到登录页面。登录后,用户将被重定向回原始请求的页面。