Akohub | Ako Marketing｜如何在 Shopify 更換 Google 快速登入的 LOGO 和名稱？ article

*最後更新時間：2024-04-15
*本文適用 App 方案：免費方案即可使用
*預計閱讀時間：5 分鐘

在開始之前

當會員透過 Ako Marketing 的社群登入功能使用 Google 帳號登入時，Google 會顯示一個畫面，詢問會員是否同意將電子郵件和基本資料分享給 Ako Marketing 以繼續完成登入。

在這個登入畫面，Google 會預設顯示 Ako 的標誌和名稱。為了避免您的會員因為在登入時看到不熟悉的 LOGO 感到混淆或降低信任度，我們準備了這篇教學文章，請參考本篇教學的步驟，將登入時的同意畫面變更為您的品牌 LOGO 與品牌名稱，從而提升會員的信任度，並提供他們更一致的登入體驗。

登入 Google Cloud Platform（https://console.cloud.google.com）從 Cloud 總覽點擊「建立專案」：
命名專案名稱（只有您會看見）並按下「建立」（無機構也可以）
在左方列表的「API 和服務」> 「OAuth 同意畫面」，將「User Type」勾選為「外部」並點擊「建立」：

💬 這個步驟將帶您前往自訂使用 Google 帳號登入的同意畫面，確保會員在登入時看到您品牌 LOGO 和名稱，請按照以下說明依序完成自訂欄位。

從左邊導覽列的「API 和服務 > OAuth 同意畫面」，將您的品牌名稱輸入「應用程式名稱」，這會替換掉登入畫面上預設的 Ako Login 名稱。
在「使用者支援電子郵件」輸入會員能夠和您聯絡的信箱，當他們對於同意聲明有疑慮時，就會透過此信箱與您聯繫。

在此分別輸入您的「網站首頁連結」、「隱私政策連結」和「服務條款連結」，同時請檢查您的商店是否已合乎 Google 的規範，包含：
．您的首頁需要顯示隱私政策和服務條款的連結
．您的首頁需要驗證網域

在此輸入您的網站連結（不包括http://或https://）

提供一個Google可以通知您的電子郵件地址。接著點擊「儲存並繼續」：

在步驟二的「範圍」點擊「新增或移除範圍」
選擇「.../auth/userinfo.email」、「.../auth/userinfo.profile」兩種範圍，更新後點擊「儲存並繼續」
（非必須）如需新增測試使用者，請按下「＋Add users」新增，完成後點擊「儲存並繼續」：
在第四步「摘要」確認資訊是否皆正確，確認無誤後點擊左側的「憑證」：

在憑證頁面點擊「＋建立憑證」並選擇「OAuth 用戶端 ID」：
在應用程式類型選擇「網頁應用程式」：
接下來按照以下說明依序填寫欄位：

➊ 替使用 Google 自訂登入的會員們命名，這個名稱只是方便您們內部辨識，顧客不會看到

➋ 在「已授權的 JavaScript 來源」中輸入：https://app.akohub.com

➌ 在「已授權的重新導向 URI」中輸入：https://app.akohub.com/social/google/oauth

➍ 點擊「建立」
建立成功後您會獲得一組「Client ID 」與「Client secret」，請複製這兩串代碼：
返回 Shopify 管理後台 > 應用程式 > 前往 Ako Marketing App 後台 > Settings > Social Login > 點擊 Custom app 按鈕並選擇 Google，將剛才複製的 Client ID 和 Client Secret 貼入對應的欄位內：

回到 Google Cloud Platform > API 和服務 > 進入「OAuth 同意畫面」，在「發布狀態」點擊「發布應用程式」並在「要推送到正式環境嗎？」按下「確認」：
接下來在「驗證狀態」按下「為驗證作業做好準備」：
※ 如果您的驗證狀態是「不需要驗證」，請點擊右上角的「🖋️編輯應用程式」，查看您的 OAuth 同意畫面還有哪些地方需要修正。
在為驗證進行準備中，依序檢查自訂登入畫面的資料是否正確：

確認完畢後，打勾「我使用 OAuth 範圍的方式符合《Google API 服務：使用者資料政策》的規定。」，並點擊「送交驗證」：
送交驗證後，驗證狀態會變成「驗證中」
接下來 Google 會寄送驗證郵件，請親自回覆這封 Email，Google 才會開始驗證流程。
等 Google 完成驗證後，驗證狀態會變成「🅥已通過驗證」 ✨ 接下來您的顧客在使用 Google 帳號登入會員時，就能看到 Google 的登入畫面顯示您的品牌 LOGO 與品牌名稱囉！