FB 登入 API 只允許商家使用，如何讓 Google API 實現自動登入？

Image may be NSFW.
Clik here to view.2023 年底前幾個月收到 FB 給開發人員的通知，提醒「登入 API」要完成「商家驗證」，否則使用權限會受到影響。果然進入 2024 後本站的「會員系統」因為使用了 FB 登入，立刻收到讀者回應，說會顯示 "應用程式錯誤"無法進行註冊。 雖去年事先想處理此事，但看過「FB 官方文件」發現，商家驗證需要提供 "公司登記執照"、"營利事業登記證"、"政府核發的營業稅務文件"...等相關資料，沒有開公司的話根本無能為力。 查了一些資料，例如「想要串接整合 Facebook 登入/註冊功能？你得先進行 Facebook 商家驗證。」，可以確定對於 "個人"開發者而言，想使用 FB 登入 API 已是死路一條，只能研究如何用 Google API 來取代。 由於 2024 Google 登入 API 也有一些變革，要做到跟 FB 一樣能自動登入也不是那麼容易的事，請見本篇的心得整理與實作範例。 (圖片出處: pixabay.com)

一、Google 登入 API 說明

1. 2023 Google 登入去年 Google 登入功能有一次重大變革，通知開發人員 API 必須由原本的「Google Sign-In 移轉為 Google Identity Services(GIS)」。因為操作方式及語法變化很大，已將實作範例程式碼整理到這篇「2023 新版 Google 登入 API」。 2. 2024 Google 登入今年 2024 有使用 Google 登入功能(GIS)的開發人員，都會收到這個「不使用第三方 cookie」的通知，對於操作 API 有稍微的變更，簡單摘要如下：

• 為了改善使用者隱私，Chrome 瀏覽器會逐步不使用第三方 cookie
• 登入時瀏覽器會顯示使用者提示
• 參照「遷移網頁應用程式」這部份的內容，程式碼中有些方法會受到影響，例如 isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason()、getSkippedReason()...

由於不使用第三方 Cookie，代表不一定能紀錄上次登入的是哪個帳號，較難實現以往使用「FB 登入 API」的自動登入效果。 3. 無痕模式的處理實測 Google 登入功能(GIS)在無痕模式下的效果：

• 使用官方預設按鈕，點擊後可彈出登入視窗
• 使用自訂按鈕，也許是不能使用 cookie 的關係，無法正常執行、彈出登入視窗

如果想兼容瀏覽器無痕模式，或是開發的程式比較簡單，或許使用官方預設登入按鈕即可。 但官方登入按鈕彈性較小，開發起來較不方便，我個人還是習慣用官方 Javascript API 操作自訂按鈕，所以用程式碼偵測到無痕模式時，跳出警告訊息提醒訪客不要用無痕模式。

二、Google API 如何自動登入

Google 登入功能(GIS)預設不使用「自動登入」效果，然而各大網站的會員都能自動登入，若本站讓會員每次都要手動點個幾下才能登入，著實是非常不友善的設計。為了實現以往使用「FB 登入 API」的自動登入效果，得詳細研究 Google 官方操作文件。 1. 為何 Google 無法自動登入經過我的實測，使用官方預設按鈕登入，而且啟動「自動登入」的設定，但發現重整頁面後，仍然不會記憶我上次登入的帳號，這讓我十分納悶。 後來找到官方「自動登入及登出」的說明：

自動登入必須符合下列條件...使用者必須先登入自己的 Google 帳戶...同意與您的應用程式分享帳戶設定檔...如果使用者有多個 Google 帳戶，而且造訪您的網站，就必須先登入單一 Google 帳戶，並提供該帳戶的同意聲明。

終於找到原因了，原來我的瀏覽器有多個 Google 帳號，可能現在 Google 決定不使用第三方 cookie，導致無法記憶上一次登入的帳號，那麼當我有多個 Google 帳號時，就無法自動登入了。除非我把 Google 帳號登出到只剩一個帳號，這樣才能實現「自動登入」... 對於這樣的結果我當然無法接受，哪有辦法告訴所有會員，必須先登出其他 Google 帳號才能自動登入，因此繼續研究解決方案。 2. 研究官方文件根據官網文件「使用 Google JavaScript API 登入」，可用來實作自動登入的參數有這些：

• auto_select: 設定為 true 可以啟用自動選取功能 → 前面有提到，當使用者有多個 Google 帳號時，登入功能依然無法判定如何自動選取
• login_hint: 如果設定了特定數值，例如 Google 帳號 email，就能自動選取該帳號執行登入

有了以上這兩個參數，就能組合起來實現自動登入。既然 API 不使用第三方 cookie 來儲存上次登入的帳號，我們可以自行儲存在 localStorage，然後利用 login_hint 讀取，轉個彎完成自動登入的效果。

三、實作範例

1. 準備動作操作 API 之前需要先建立 Google API 專案，如果還沒建立過的話，請完成以下流程：

• 「取得 Google API 金鑰流程」→「一、建立專案」
• 「處理 OAuth 憑證」→「二、建立 OAuth 憑證」→「三、設定 OAuth 同意畫面」

2. 範例程式碼以下用「Bootstrap 按鈕 + jQuery」製作範例程式碼： <!--jQuery--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!--Bootstrap--> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <!--登入、登出按鈕--> <div id="GOOGLE_login"><button class="btn btn-large btn-primary">GOOGLE 登入</button></div> <div id="GOOGLE_logout"><button class="btn btn-large btn-warning">GOOGLE 登出</button></div> 目前狀態： <div id="GOOGLE_status"></div> <script> let autoLoginGoogleAccount = localStorage.autoLoginGoogleAccount || ""; // 自動登入儲存的帳號 let $status = $("#GOOGLE_status"); function init() { $.getScript("https://accounts.google.com/gsi/client", function () { // 進行登入程序 startLogin(); }); } // 進行登入程序 function startLogin() { google.accounts.id.initialize({ client_id: "5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", callback: onLogin, prompt_parent_id: "GOOGLE_login", // 設定登入視窗的位置, 若不設定此參數則預設出現在網頁右上角 auto_select: true, // 自動登入 login_hint: autoLoginGoogleAccount // 自動登入儲存的帳號 }); google.accounts.id.prompt((notification) => { // 處理登入失敗 loginFail(notification); }); } // 處理登入取得的資訊 function onLogin(response) { var credential = response.credential, profile = JSON.parse(decodeURIComponent(encodeURIComponent(window.atob(credential.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))))), html = ""; // 儲存登入帳號 localStorage.autoLoginGoogleAccount = profile.email; html += "ID: " + profile.sub + "<br/>"; html += "會員暱稱： " + profile.name + "<br/>"; html += "會員頭像：" + profile.picture + "<br/>"; html += "會員 email：" + profile.email + "<br/>"; $status.html(html); } // 處理登入失敗 function loginFail(notification) { /*notification.g 數值 → display: 登入中, skipped: 取消登入, dismissed: 登入成功*/ if (notification.g == "skipped") { // 取消登入時 $status.html("取消登入 Google 帳號，請稍後再試"); } if (notification.g == "display"&& notification.h == false) { // 無痕模式無法登入 $status.html("無法登入 Google 帳號，請離開無痕模式或使用 Chrome 瀏覽器登入。"); } } // 進行登出 function logout() { // 刪除自動登入儲存的帳號 localStorage.autoLoginGoogleAccount = ""; // 登出 google.accounts.id.disableAutoSelect(); $status.html("已登出"); } init(); // 點擊登入 $("#GOOGLE_login").click(function() { // 進行登入程序 startLogin(); }); // 點擊登出 $("#GOOGLE_logout").click(function() { // 進行登出 logout(); }); </script>

• 紅色字串請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 ID」
• 程式碼請放在前面「處理 OAuth 憑證」流程設定的網站

3. 範例效果下面按鈕為範例效果，可進行操作並注意對應狀態的文字。 首次登入完畢後，重整頁面即可看到自動登入的效果。 目前狀態：