新人資訊

技術-前端類-angular 網頁整合 google identity

認證服務在網路的世界超重要，多次想要一探究竟都在非常初期階段就被打垮了！大概就像這樣：在網路搜尋 OAuth，https://www.google.com/search?q=OAuth 然後看了一兩篇就舉白旗，實在太複雜了！然後一拖再拖，想說自己寫的系統自己用就好了，但即使想要確認是自己的身分，也是必要搞懂的。

可以想像用戶登入的過程，輸入帳號密碼若被前端的 javascript 攔截！這就不及格了；所以登入畫面只能由純粹後台產生。而後台程式網路傳輸過程不能用明碼傳輸密碼，而資料庫也不可儲存明碼，但兩者卻要可以比對！比對完成後應用系統得到的 token 必須有時效性，要合理的延續有效性必須有 refresh 機制 (user 很懶得一直重複輸入密碼)。認證完成才能進行授權，系統資源如何劃分等級和功能，人員如何區分群組和角色，這又是另一套複雜的設計議題，這次只有大概把 google sign in 試成功而已；在網路服務多元化的今天，不可能為了一個小不啦嘰的服務而另外多記住一個帳號密碼，整合這些已經深入生活的「巨頭」認證服務幾乎是必要的方式了。

在 google cloud platform 中新增專案 (https://console.cloud.google.com/)，建立憑證，取得 client id 儲存備用。

程式怎麼寫呢？爬了 google identity (https://developers.google.com/identity) 官方文件後還是非常混亂沒有頭緒，好在已經有高手為了 angular 框架寫好了套件 @abacritt/angularx-social-login (https://www.npmjs.com/package/@abacritt/angularx-social-login)，經過測試比我原先使用的 Auth0 還方便 (Auth0 是很方便的平台服務，但為了減少依賴性還是使用套件優先)，就將測試過程記錄下來。

安裝套件之前，搞清楚我目前的環境，版本很重要。才沒幾個月工夫 angular 版本已經進化到 14 版了，我還在第 9 版哩！因套件要求的為 13，我就順便使用了官方提供的 update guidance (https://update.angular.io/) 把環境升級到 13 版了。然後依照套件說明安裝完成。

依照套件說明更新 app.module，然後因為我預計將 login 功能寫在頁面上緣，對應的 component 代碼如下：

畫面部分以 user 物件是否為空判斷登入狀態，若未登入顯示 Google Sign In 按鈕，若已登入顯示 user.name 和頭像，代碼如下：

未登入狀態：

已登入狀態：

這樣就完成了！這套件的作者太棒了罷。把 user 物件打開來看看，發現兩個加密字串非常奧秘，分別為 authToken and idToken，其中 idToken 是標準格式的 JWT，在 https://jwt.io/ 把密文貼上後立刻就可看到內容，前端程式將 idToken 傳給後端後，後端程式也可以用相同的演算法解開後比對 aud 欄位是否與 google cloud platform 註冊時取得的 client id 一致，確保接下來的授權程序是安全的 (
https://developers.google.com/identity/one-tap/android/idtoken-auth)。至於 authToken 敝人則還是不懂其用途，暫時是沒用到。

完成以上驗證程序，接下來還有許多事要做，就是後台驗證 token 的程序，user and role 的管理，每個頁面或要保護的內容之前必須插入一段標準化的檢查程序，然後就可以為我的網站加上更多個人化的內容了。

By Newman Chen 2022/4/20