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

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

在開始之前 

  1. 社群帳號登入功能為 Ako Marketing 免費方案即可使用。
  2. 若尚未安裝 App 👉 請點此安裝 Ako Marketing，提供 14 天免費試用。
  3. 若不確定如何訂閱 App，請參考本篇說明完成訂閱。

為什麼要更換登入 LOGO？

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

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

 

Step1：在 Google Cloud Platform 建立專案

  1. 登入 Google Cloud Platform（https://console.cloud.google.com）從 Cloud 總覽點擊「建立專案」：


  2. 命名專案名稱（只有您會看見）並按下「建立」（無機構也可以）


  3. 在左方列表的「API 和服務」> 「OAuth 同意畫面」，將「User Type」勾選為「外部」並點擊「建立」：

 

 

Step2： 開始自訂 Google 登入畫面

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

[應用程式資訊]

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

 

[應用程式標誌]

  1. 在此上傳您的品牌 LOGO，這會將登入畫面預設的 Ako 標誌替換掉：

[應用程式網域]

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

 

[授權網域]

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

 

[開發人員聯絡資訊]

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

  1. 在步驟二的「範圍」點擊「新增或移除範圍」

  2. 選擇「.../auth/userinfo.email」、「.../auth/userinfo.profile」兩種範圍，更新後點擊「儲存並繼續」


  3. （非必須）如需新增測試使用者，請按下「＋Add users」新增，完成後點擊「儲存並繼續」：


  4. 在第四步「摘要」確認資訊是否皆正確，確認無誤後點擊左側的「憑證」：

 

Step3：建立登入憑證

  1. 在憑證頁面點擊「＋建立憑證」並選擇「OAuth 用戶端 ID」：


  2. 在應用程式類型選擇「網頁應用程式」：


  3. 接下來按照以下說明依序填寫欄位：

    ➊ 替使用 Google 自訂登入的會員們命名，這個名稱只是方便您們內部辨識，顧客不會看到
    ​
    ➋ 在「已授權的 JavaScript 來源」中輸入：https://app.akohub.com
    ​
    ➌ 在「已授權的重新導向 URI」中輸入：https://app.akohub.com/social/google/oauth
    ​
    ➍ 點擊「建立」

  4. 建立成功後您會獲得一組「Client ID 」與「Client secret」，請複製這兩串代碼：


  5. 返回 Shopify 管理後台 > 應用程式 > 前往 Ako Marketing App 後台 > Settings > Social Login > 點擊 Custom app 按鈕並選擇 Google，將剛才複製的 Client ID 和 Client Secret 貼入對應的欄位內：

 

Step4：送出自訂登入畫面申請給 Google 並等待驗證通過

  1. 回到 Google Cloud Platform > API 和服務 > 進入「OAuth 同意畫面」，在「發布狀態」點擊「發布應用程式」並在「要推送到正式環境嗎？」按下「確認」：



  2. 接下來在「驗證狀態」按下「為驗證作業做好準備」：
    ※ 如果您的驗證狀態是「不需要驗證」，請點擊右上角的「🖋️編輯應用程式」，查看您的 OAuth 同意畫面還有哪些地方需要修正。
     

  3. 在為驗證進行準備中，依序檢查自訂登入畫面的資料是否正確：

    確認完畢後，打勾「我使用 OAuth 範圍的方式符合《Google API 服務：使用者資料政策》的規定。」，並點擊「送交驗證」：



  4. 送交驗證後，驗證狀態會變成「驗證中」

  5. 接下來 Google 會寄送驗證郵件，請親自回覆這封 Email，Google 才會開始驗證流程。

     

  6. 等 Google 完成驗證後，驗證狀態會變成「🅥已通過驗證」 ✨ 接下來您的顧客在使用 Google 帳號登入會員時，就能看到 Google 的登入畫面顯示您的品牌 LOGO 與品牌名稱囉！

     

    Back to blog