Angular: 为Angular SPA程序添加Authorization支持
秦承允
本篇详细描述怎么为Angular SPA程序添加Authorization的全记录。相对应的，本篇中使用了Identity Server （.Net Core开源项目）作为Identity Provider。
AccessToken和Refresh Token
权限控制无所不在，基于OAuth, OpenID这些解决方案在今时今日的开发中几乎是必不可少的。
这里只强调下Access Token和Refresh Token的关联与区别：
- Access Token的生命周期通常是比较短暂。譬如Identity Server设置一般设置为3600秒，即一个小时就会过期；
- Refresh Token。显然每个小时就要终端客户重输密码来登录不是个很好的设计，所以Refresh Token提出来用以简化登录次数。通常Refresh Token默认比较长。Identity Server中一般设置为30天。
那么Access Token怎么跟Refresh Token协同工作呢？一般来说，整个
- Client进行登录，Server会同时发放Access Token和Refresh token；通常Client会保存住Refresh Token;
- 当Client察觉到Access Token过期时，它会Refresh token要求刷新Access token；
- Server会根据Refresh Token的有效性并下发最新的Access Token；
- 重复上述两步（这两步均无客户干预），直至Refresh Token也失效；
- Refresh Token也失效时，重新登录。
由于Refresh Token这个特效，在开发库中，其也被称为Offline Access。
安装依赖
如果是Angular CLI创建的应用程序，添加：
ng add angular-auth-oidc-client
当然也可以使用NPM/YARN来安装。
当开始执行时，首先要求确认：
ℹ Using package manager: npm
✔ Found compatible package version: angular-auth-oidc-client@14.1.5.
✔ Package information loaded.
The package angular-auth-oidc-client@14.1.5 will be installed and executed.
Would you like to proceed? (Y/n)
当选择Y之后，会进行安装，并要求输入一些必要信息。下列中的(XXXX)是项目特定信息，需要按照项目的实际填写。
✔ Package successfully installed.
? What flow to use? OIDC Code Flow PKCE using refresh tokens
? Please enter your authority URL or Azure tenant id or Http config URL （XXXX）
Running checks...
✅️ Project found, working with 'myproject'
✅️ Added "angular-auth-oidc-client" 14.1.5
Installing packages...
✅️ Installed
✅️ 'src/app/auth/auth-config.module.ts' will be created
✅️ 'AuthConfigModule' is imported in 'src/app/app.module.ts'
✅️ All imports done, please add the 'RouterModule' as well if you don't have it imported yet.
✅️ No silent-renew entry in assets array needed
✅️ No 'silent-renew.html' needed
CREATE src/app/auth/auth-config.module.ts (703 bytes)
UPDATE package.json (2281 bytes)
UPDATE src/app/app.module.ts (3951 bytes)
这时，项目中多了一个src\auth的文件夹，其中只有一个Module。
@NgModule({
imports: [AuthModule.forRoot({
config: {
authority: 'XXXX.com',
redirectUrl: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: 'please-enter-clientId',
scope: 'please-enter-scopes', // 'openid profile offline_access ' + your scopes
responseType: 'code',
silentRenew: true,
useRefreshToken: true,
renewTimeBeforeTokenExpiresInSeconds: 30,
}
})],
exports: [AuthModule],
})
export class AuthConfigModule {}
其中有些信息需要更新：scope，clientId等。
如果需要silent renew（自动更新Access Token），需要在scope中加上offline_access，并且在Identity Provider也设置为Allow Offlien Access。
以Identity Server 6为例：
new Client
{
ClientName = "My App",
ClientId = "myangularapp",
AllowedGrantTypes = GrantTypes.Code,
RequireClientSecret = false,
RequirePkce = true,
AllowAccessTokensViaBrowser = true,
AllowOfflineAccess = true, // For refresh token
}
更新Angular SPA程序
创建Unauthorized的Module和Component
Unauthorized的Module和Component用来向客户显示错误信息。
首先创建Module：
ng g m pages\Unauthorized --routing
然后是Component：
ng g c pages\Unauthorized -m pages\unauthorized
可以在pages\unauthorized\unauthorized.html中填充显示给终端客户的权限检查失败的信息。
譬如：
<h1>You are not unauthorized to access</h1>
更新Unauthorized Module中的路由(即文件unauthorized-routing.module.ts)来添加标准跳转：
const routes: Routes = [{
path: '', component: UnauthorizedComponent
}];
添加Angular程序的路由
在Angular程序中添加路由，用来支持跳转到上述刚刚创建的unauthorized的页面。
通常，在app-routing.module.ts中添加路由项：
{ path: 'unauthorized', loadChildren: () => import('./pages/unauthorized/unauthorized.module').then(m => m.UnauthorizedModule) },
这时，在Angular SPA程序中的路由unauthorized已经添加完成。
添加路由保护
对需要Authorization的路由添加保护：
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {
constructor(private authService: OidcSecurityService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
const url: string = state.url;
return firstValueFrom(this.checkLogin(url));
}
checkLogin(url: string): Observable<boolean> {
return this.authService.isAuthenticated().pipe(map((rst: boolean) => {
if (!rst) {
this.authService.authorize();
}
return true;
}));
}
}
更新路由项：
{
path: 'protected-path',
canActivate: [AuthGuardService],
loadChildren: () => import('./pages/protected-path/protected-path.module').then(m => m.ProtectedPathModule),
},
登录及登出操作
登录（Login）和登出（Logout）操作一般放在主Component中进行，即，通常都是app.component.ts中：
在构造函数中添加：
constructor(public oidcSecurityService: OidcSecurityService,) {
// Other codes...
}
添加登录函数：
public onLogon(): void {
this.oidcSecurityService.authorize();
}
登出函数：
public onLogon(): void {
this.oidcSecurityService.logoffAndRevokeTokens().subscribe();
}
通常在ngOnInit中添加相应Subscription来接受Logon的回调：
ngOnInit(): void {
this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken }) => {
if (isAuthenticated) {
this.oidcSecurityService.getUserData().subscribe(val => {
this.currentUser = `${val.name}(${val.sub})`;
});
}
});
}
使用Access Token
如果申请到的Access Token是用来访问被保护的API，那么Access Token就需要传给对应的API(authService也是注入在Constructor中的OidcSecurityService的实例)：
return this.authService.isAuthenticated().pipe(mergeMap(islogin => {
if (!islogin) {
return of({totalCount: 0, items: []});
}
let headers: HttpHeaders = new HttpHeaders();
headers = headers.append(this.contentType, this.appJson)
.append(this.strAccept, this.appJson);
let params: HttpParams = new HttpParams();
params = params.append('$top', top.toString());
params = params.append('$skip', skip.toString());
return this.authService.getAccessToken().pipe(mergeMap(token => {
headers = headers.append('Authorization', 'Bearer ' + token);
return this.http.get(apiurl, {
headers,
params,
})
.pipe(map(response => {
// Success received the response
return {
items
};
}),
catchError((error: HttpErrorResponse) => throwError(() => new Error(error.statusText + '; ' + error.error + '; ' + error.message))));
}));
}));
类似资料：