Angular OIDC认证可以通过以下步骤解决:
npm install --save angular-auth-oidc-client
npm install --save-dev @types/auth0-js
app.module.ts
文件中导入AuthModule
和HttpClientModule
:import { AuthModule } from 'angular-auth-oidc-client';
import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
declarations: [AppComponent],
imports: [
// ...
HttpClientModule,
AuthModule.forRoot({
config: {
// 这里填写OAuth2.0认证的配置
},
}),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
AuthService
:import { AuthService } from 'angular-auth-oidc-client';
// ...
constructor(private authService: AuthService) {}
// ...
ngOnInit()
中,调用AuthService
提供的isAuthenticated()
方法来检查用户是否已经登录:ngOnInit() {
this.authService.isAuthenticated().subscribe((authenticated) => {
if (authenticated) {
// 用户已认证
} else {
// 用户未认证
}
});
}
AuthService
提供的signinRedirect()
方法:login() {
this.authService.signinRedirect();
}
export const appRoutes: Routes = [
// ...
{ path: 'oidc-callback', component: OidcCallbackComponent },
// ...
];
在回调组件中,可以使用AuthService
提供的signinRedirectCallback()
方法来完成登录回调:
import { AuthService } from 'angular-auth-oidc-client';
// ...
constructor(private authService: AuthService, private router: Router) {}
ngOnInit() {
this.authService.signinRedirectCallback().subscribe(() => {
this.router.navigate(['/']);
});
}