要使用Angular 6与Identity Server 4,您可以遵循以下步骤:
在Angular项目中安装Identity Server 4库:
npm install angular-auth-oidc-client --save
创建一个服务来处理与Identity Server的通信。在您的Angular项目中创建一个新的文件 auth.service.ts
,然后在其中添加以下代码:
import { Injectable } from '@angular/core';
import { UserManager, User } from 'oidc-client';
@Injectable()
export class AuthService {
private userManager: UserManager;
private user: User;
constructor() {
const config = {
authority: 'https://identityserver.example.com',
client_id: 'client_id',
redirect_uri: 'http://localhost:4200/auth-callback',
response_type: 'id_token token',
scope: 'openid profile api',
post_logout_redirect_uri: 'http://localhost:4200'
};
this.userManager = new UserManager(config);
}
login() {
return this.userManager.signinRedirect();
}
completeLogin() {
return this.userManager.signinRedirectCallback().then(user => {
this.user = user;
});
}
logout() {
return this.userManager.signoutRedirect();
}
completeLogout() {
return this.userManager.signoutRedirectCallback();
}
getUser() {
return this.userManager.getUser().then(user => {
this.user = user;
return user;
});
}
}
在 app.module.ts
中提供 AuthService
:
import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';
@NgModule({
...
providers: [AuthService],
...
})
export class AppModule { }
在您的登录页面中使用AuthService。在您的登录组件中添加以下代码:
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
...
})
export class LoginComponent {
constructor(private authService: AuthService) { }
login() {
this.authService.login();
}
}
在您的回调页面中完成登录。在您的回调组件中添加以下代码:
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
...
})
export class AuthCallbackComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.completeLogin().then(() => {
// 登录完成后的逻辑
});
}
}
在您的应用中保护需要身份验证的路由。在您的路由配置文件中添加以下代码:
import { Routes } from '@angular/router';
const routes: Routes = [
{ path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
...
];
创建一个路由守卫以检查用户是否已经登录。在您的路由守卫文件中添加以下代码:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate() {
return this.authService.getUser().then(user => {
if (user) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
});
}
}
通过按照以上步骤,您就可以在Angular 6应用中使用Identity Server 4进行身份验证了。请根据您的实际需求进行相应的配置和修改。