顧客帳號的社群登入

除了顧客帳號預設的無密碼登入體驗外,您還可以連結 Google 和 Facebook 帳號,讓顧客能使用其社群憑證登入。

啟用顧客帳號的社群登入功能,能讓顧客透過熟悉的驗證方式,獲得更快速的登入體驗。您可以在商店中啟用多種社群登入方式。

若您已將自己的身分識別提供者連結至顧客帳號,且想要連結社群登入功能,則需要聯絡您的外部身分識別提供者。

將社群登入連結至顧客帳號的注意事項

在將社群登入連結至顧客帳號前,請檢閱以下注意事項:

  • 您必須擁有要與顧客帳號連結之提供者的開發人員帳號。
  • 使用社群登入時,唯一會同步至 Shopify 的顧客資料為顧客的電子郵件地址。

將 Google 連結至顧客帳號

若要將 Google 連結至顧客帳號,您必須依序完成以下任務:

設定期間,您需要在 Google Cloud Console 與 Shopify 管理介面的瀏覽器分頁之間切換。您必須先設定 Google Cloud 帳號,才能將 Google 連結至顧客帳號。若要深入瞭解 Google Cloud,請參閱 Google 的說明文件

步驟 1:在 Shopify 管理介面中開啟「使用 Google 登入」頁面

  1. 在 Shopify 管理介面中,前往「設定」>顧客帳號

  2. 在「驗證」區段中,點擊「管理」。

  3. 點擊「Google」旁邊的「連結」,以開啟「使用 Google 登入」頁面。

此頁面包含設定 Google 應用程式 OAuth 用戶端時需要複製並貼上的資訊,因此請在獨立的瀏覽器分頁中保持開啟此頁面。

步驟 2:在 Google Cloud Console 中建立應用程式

  1. 在另一個瀏覽器分頁中,登入您的 Google Cloud Console
  2. 選取現有專案或建立新專案。系統會將您重新導向至該專案的控制面板。
  3. 點擊 Menu,然後點擊「API 和服務」>「憑證」。
  4. 點擊「設定同意畫面」>「開始使用」。
  5. 填寫您專案的 OAuth 設定詳細資訊:
    1. 為您的應用程式取一個顧客能認得的名稱 (例如您的網路商店名稱)。提供您的電子郵件以供技術支援使用,然後點擊「下一步」。
    2. 在「目標對象」區段中,選取「外部」,然後點擊「下一步」。
    3. 提供聯絡電子郵件,以便接收 Google 發送有關該專案的任何通知,然後點擊「下一步」。
    4. 同意 Google 的「API 服務使用者資料政策」,然後點擊「繼續」。
    5. 點擊「建立」。
  6. 設定會在同意畫面上對顧客顯示的應用程式政策資訊:
    1. 點擊「品牌宣傳」。
    2. 在「應用程式網域」區段中,加入您的首頁連結、公開的隱私權政策連結和服務條款連結。深入瞭解建立商店政策

步驟 3:在 Google Cloud Console 中設定應用程式的 OAuth 用戶端

此步驟需從 Shopify 管理介面「使用 Google 登入」頁面上的「設定說明」區段複製詳細資訊,並貼到 Google Cloud Console 分頁中的對應欄位。

  1. 在 Google Cloud Console 的專案應用程式中,點擊「總覽」。
  2. 在「指標」區段中,點擊「建立 OAuth 用戶端」。
  3. 設定 OAuth 用戶端詳細資訊:
    1. 從「應用程式類型」下拉式選單中,選取「網頁應用程式」。
    2. 在「名稱」欄位中輸入名稱。
  4. 設定應用程式的「已授權的 JavaScript 來源」:
  5. 在「已授權的 JavaScript 來源」區段中,點擊「+ 新增 URI」。
  6. 在 Shopify 管理介面的「使用 Google 登入」頁面上,複製「已授權的 JavaScript 來源」值。
  7. 在 Google Cloud Console 中,將該值貼入「URI 1」欄位。
  8. 如果 Shopify 管理介面的「已授權的 JavaScript 來源」區段中有多個 URI,請針對其他 URI 欄位重複這些步驟。
  9. 設定應用程式的「已授權的重新導向 URI」:
  10. 在 Google Cloud Console 的「已授權的重新導向 URI」區段中,點擊「+ 新增 URI」。
  11. 在開啟 Shopify 管理介面的瀏覽器分頁中,複製「已授權的重新導向 URI」值。
  12. 返回 Google Cloud Console,並將該值貼入「URI 1」欄位。
  13. 如果 Shopify 管理介面的「已授權的重新導向 URI」區段中有多個 URI,請針對其他 URI 欄位重複這些步驟。
  14. 在您的 Google Cloud Console 中,點選「建立」。

請將顯示的「建立的 OAuth 用戶端」對話方塊保持開啟,以便進行 步驟 4:在 Shopify 管理介面中設定憑證,因為您需要將 Google Cloud Console 中的資訊複製並貼上至 Shopify 管理介面中。

步驟 4:在 Shopify 管理介面中設定憑證

  1. 從 Google Cloud Console 的「建立的 OAuth 用戶端」對話方塊中,複製「用戶端 ID」。
  2. 在 Shopify 管理介面的「使用 Google 登入」頁面上,將用戶端 ID 貼上至「憑證」區段中。
  3. 從 Google Cloud Console 的「建立的 OAuth 用戶端」對話方塊中,複製「用戶端密鑰」。
  4. 在 Shopify 管理介面的「使用 Google 登入」頁面上,將用戶端密鑰貼上至「憑證」區段中。
  5. 在 Shopify 管理介面的「使用 Google 登入」頁面上,點選「儲存」。

步驟 5:在 Google Cloud Console 中發布您的應用程式

  1. 在 Google Cloud Console 專案的應用程式中,點選「目標對象」。
  2. 點選「發布應用程式」。

將 Facebook 連結至顧客帳號

若要將 Facebook 連結至顧客帳號,您必須依序完成下列任務:

在設定期間,您需要在 Meta for Developers 控制面板和 Shopify 管理介面的瀏覽器分頁之間來回切換。若要將 Facebook 連結至顧客帳號,您必須擁有 Meta Developer 帳號。深入瞭解如何註冊為 Meta Developer

步驟 1:在 Shopify 管理介面中開啟「使用 Facebook 登入」頁面

  1. 在 Shopify 管理介面中,前往「設定」>顧客帳號

  2. 在「驗證」區段中,點擊「管理」。

  3. 點選 Facebook 旁邊的「連結」,以開啟「使用 Facebook 登入」頁面。

步驟 2:在 Meta for Developers 控制面板中建立應用程式

  1. 在另一個瀏覽器分頁中,前往 Meta for Developers 控制面板,然後點選「登入」。如果您尚未設定 Meta Developer 帳號,則需先在登入頁面建立新帳號,再繼續執行下一個步驟。
  2. 點選「應用程式」。
  3. 點選「建立應用程式」。
  4. 填寫「應用程式名稱」和「應用程式聯絡電子郵件」欄位,然後點選「下一步」。
  5. 在「新增使用案例」頁面上,選取「使用 Facebook 登入驗證使用者並請求資料」,然後點選「下一步」。
  6. 在「您要將哪個企業管理平台連結至此應用程式」頁面上,選取一個企業管理平台,或選取「我還不想連結企業管理平台。」,然後點選「下一步」。
  7. 檢閱「發布要求」頁面,然後點選「下一步」。
  8. 檢閱「概覽」頁面,然後點選「前往控制面板」。

步驟 3:設定您的 Meta 應用程式設定

  1. 建立應用程式後,在 Meta for Developers 控制面板中,點選「使用案例」。
  2. 在「使用 Facebook 登入驗證使用者並請求資料」使用案例上,點選「自訂」。
  3. 為確保在顧客登入時擷取顧客資訊,請在「權限與功能」區段中,點選 email 旁邊的「新增」。
  4. 點選「設定」,然後前往「用戶端 OAuth 設定」。
  5. 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,從「重新導向網址」區段中複製重新導向網址。
  6. 在 Meta for Developers 控制面板的「設定」頁面上,將重新導向網址貼上至「有效的 OAuth 重新導向 URI」欄位中。
  7. 如果在 Shopify 管理介面的「重新導向網址」區段中有多個重新導向網址,請針對其他重新導向網址重複執行這些步驟。
  8. 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,從「解除授權網址」區段中複製網址。
  9. 在 Meta for Developers 控制面板的「設定」頁面上,將網址貼上至「解除授權回呼網址」欄位中。
  10. 在 Meta for Developers 控制面板的「設定」頁面上,點選「儲存變更」。

步驟 4:在 Shopify 管理介面中設定憑證

  1. 點選「首頁」圖示返回 Meta for Developers 控制面板,然後點選「應用程式設定」>「基本」。
  2. 從 Meta for Developers 控制面板中複製「應用程式 ID」。
  3. 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,將應用程式 ID 貼上至「憑證」區段的「應用程式 ID」欄位中。
  4. 在 Meta for Developers 控制面板中,點選「應用程式密鑰」旁邊的「顯示」,然後複製「應用程式密鑰」。
  5. 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,將應用程式密鑰貼上至「應用程式密鑰」欄位中,然後點選「儲存」。
  6. 在 Shopify 管理介面中,點選「儲存變更」。

步驟 5:測試並啟用「使用 Facebook 登入」

  1. 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,點選「更多動作」>「預覽」,然後以顧客身分來測試登入商店的 Facebook 驗證流程。
  2. 點選「開啟」。

開啟「使用 Facebook 登入」後,您可以前往您的網路商店,並使用 Facebook 登入顧客帳號,藉此測試顧客體驗。

使用 Shop 登入

如果您已啟用 Shop Pay,顧客便能使用其 Shop 憑證和儲存的密碼金鑰登入。顧客在您的商店使用 Shop Pay 結帳後,系統也會自動讓其使用 Shop 登入。

顧客帳號會自動啟用「使用 Shop 登入」功能,只有在您停用 Shop Pay 時,才能從商店將其移除。

瞭解如何在商店中新增「使用 Shop 登入」按鈕

管理社群登入選項

您可以編輯、關閉或移除已連結的社群登入方法。

關閉或移除社群登入方法後,顧客仍會保持登入狀態以免受到中斷。社群登入工作階段會自然過期,或在顧客登出時過期。

步驟:

  1. 在 Shopify 管理介面中,前往「設定」>顧客帳號

  2. 在「驗證」區段中,點擊「管理」。

  3. 在想要變更的登入方法旁,點擊「」選單。

  4. 請執行以下任一操作:

    • 若要編輯登入選項,請點擊「管理」,然後更新您想編輯的憑證。
    • 若要關閉登入選項但不移除,請點擊「關閉」。
    • 若要移除登入選項,請點擊「移除」,接著在對話方塊中點擊「移除」。

變更顧客帳號網域時更新社群登入設定

如果您打算將顧客帳號網域變更為不同的網址,則需先更新社群登入設定,然後再於 Shopify 中進行變更。這樣可以確保顧客能繼續順利登入而不會中斷。

當您在 Shopify 中將顧客帳號網址從舊版格式 (例如 shopify.com/1234567890/account) 更新為新的子網域格式 (account.your-store.com),或從現有子網域變更為其他子網域 (例如將 account.your-store.com 更新為 customers.your-store.com) 時,必須執行這些步驟。

將新的顧客帳號子網域新增至社群服務供應商

您需要將新網域與目前網域一起新增至社群服務供應商的設定中。在 Shopify 中變更顧客帳號網域並確認顧客帳號的登入及登出程序運作正常後,便可移除舊網域項目。

您需要針對每個已啟用的社群登入選項重複這些步驟。

步驟:

Google
  1. 前往 Google Cloud 控制台,然後開啟「API 和服務」>「憑證」。
  2. 選取您為 Shopify 建立的 OAuth 2.0 用戶端。
  3. 在「已授權的 JavaScript 來源」中新增項目。例如:https://account.your-store.com
  4. 在「已授權的重新導向 URI」中新增項目。例如:https://account.your-store.com/authentication/social/google/callback
  5. 在「取消授權回呼網址」中新增項目。例如:https://account.your-store.com/authentication/social/google/revoke
  6. 儲存變更。暫時保留新舊網址。
  7. 返回 Shopify 管理介面,並按照步驟在 Shopify 中將帳號網域變更為新的自訂子網域網址
  8. 在線上店面中使用每個社群選項測試登入和登出功能,以確認所有功能運作正常。
  9. 選用:確認登入程序運作正常後,即可返回 Google 並移除舊網域項目。
Facebook
  1. 前往 Meta for Developers 並開啟您的 app。
  2. 導覽至 Facebook「登入」>「設定」。
  3. 在「有效的 OAuth 重新導向 URI」中新增項目。例如:https://account.your-store.com/authentication/social/facebook/callback
  4. 在「取消授權回呼網址」中新增項目。例如:https://account.your-store.com/authentication/social/facebook/revoke
  5. 導覽至「設定」>「基本」。
  6. 在「應用程式網域」中新增項目。例如:account.your-store.com
  7. 儲存變更。暫時保留新舊網址。
  8. 返回 Shopify 管理介面,並按照步驟在 Shopify 中將帳號網域變更為新的自訂子網域網址
  9. 在線上店面中使用每個社群選項測試登入和登出功能,以確認所有功能運作正常。
  10. 選用:確認登入程序運作正常後,即可返回 Facebook 並移除舊網域項目。