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

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

March 26, 2024

*最後更新時間: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 與品牌名稱囉!