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))));
      }));  
    }));