Angular: 新增前端驗證Token的範例，並補上註解

Author: jim60105

Angular/.vscode/settings.json

@@ -17,5 +17,10 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "cSpell.words": [
+    "ASPNET",
+    "oidc",
+    "signin"
+  ]
 }

Angular/src/app/app.component.ts

@@ -22,13 +22,27 @@ export class AppComponent implements OnInit {
     this.route.queryParamMap.subscribe((params: ParamMap) => {
       this.idToken = params.get('idToken') || '';
       if (this.idToken) {
-        this.authenticationService.getUser(this.idToken).subscribe((res) => {
+        // 直接解開JWT Token
+        this.authenticationService.extractToken(this.idToken).subscribe((res) => {
           this.user = res;
         });
+
+        // 如果需要在前端驗證Token，可以使用這個Google API
+        this.authenticationService.verifyToken(this.idToken).subscribe({
+          next: (data) => {
+            console.log('This is verified by Google', data);
+          },
+          error: (error) => {
+            console.log(error);
+          },
+        });
+
+        // TODO: 接下來可以將idToken存到localStorage，並且在每次發送API請求時，將idToken放到Authorization Header。後端只要用一樣的方式驗證idToken即可確認身份。
       }
     });
   }
 
+  // 按鈕
   signInWithGoogle() {
     this.authenticationService.oidcLogin();
   }

Angular/src/app/app.module.ts

@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, NgbModule],
+  imports: [BrowserModule, HttpClientModule, AppRoutingModule, NgbModule],
   providers: [],
   bootstrap: [AppComponent],
 })

Angular/src/app/authentication.service.ts

@@ -1,16 +1,21 @@
 import { Injectable } from '@angular/core';
-import { Router } from '@angular/router';
 import { environment } from 'src/environments/environment';
 
 import jwtDecode from 'jwt-decode';
 import { Observable, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthenticationService {
-  constructor(private router: Router) {}
+  constructor(private http: HttpClient) {}
 
+  /**
+   * 發起 Auth code flow 登入流程
+   *
+   * @memberof AuthenticationService
+   */
   oidcLogin(): void {
     const client: google.accounts.oauth2.CodeClient = google.accounts.oauth2.initCodeClient({
       client_id: environment.clientId,
@@ -22,7 +27,20 @@ export class AuthenticationService {
     client.requestCode();
   }
 
-  getUser(idToken: string): Observable<{
+  /**
+   * 直接解開JWT Token
+   *
+   * @param {string} idToken
+   * @return {*}  {Observable<{
+   *     userID: string;
+   *     userName: string;
+   *     id: string;
+   *     picture: string;
+   *     email: string;
+   *   }>}
+   * @memberof AuthenticationService
+   */
+  extractToken(idToken: string): Observable<{
     userID: string;
     userName: string;
     id: string;
@@ -39,4 +57,17 @@ export class AuthenticationService {
       email,
     });
   }
+
+  /**
+   * 使用Google的API來驗證Token。參考文件: https://developers.google.com/identity/sign-in/web/backend-auth#calling-the-tokeninfo-endpoint
+   *
+   * @param {string} idToken
+   * @return {*}
+   * @memberof AuthenticationService
+   */
+  verifyToken(idToken: string): Observable<unknown> {
+    return this.http.get('https://oauth2.googleapis.com/tokeninfo', {
+      params: { id_token: idToken },
+    });
+  }
 }