顧客帳號的社群登入
除了顧客帳號預設的無密碼登入體驗外,您還可以連結 Google 和 Facebook 帳號,讓顧客能使用其社群憑證登入。
啟用顧客帳號的社群登入功能,能讓顧客透過熟悉的驗證方式,獲得更快速的登入體驗。您可以在商店中啟用多種社群登入方式。
若您已將自己的身分識別提供者連結至顧客帳號,且想要連結社群登入功能,則需要聯絡您的外部身分識別提供者。
將社群登入連結至顧客帳號的注意事項
在將社群登入連結至顧客帳號前,請檢閱以下注意事項:
- 您必須擁有要與顧客帳號連結之提供者的開發人員帳號。
- 使用社群登入時,唯一會同步至 Shopify 的顧客資料為顧客的電子郵件地址。
將 Google 連結至顧客帳號
若要將 Google 連結至顧客帳號,您必須依序完成以下任務:
- 步驟 1:在您的 Shopify 管理介面中開啟「使用 Google 登入」頁面
- 步驟 2:在您的 Google Cloud Console 中建立應用程式
- 步驟 3:在您的 Google Cloud Console 中設定應用程式的 OAuth 用戶端
- 步驟 4:在您的 Shopify 管理介面中設定憑證
- 步驟 5:在您的 Google Cloud Console 中發布應用程式
設定期間,您需要在 Google Cloud Console 與 Shopify 管理介面的瀏覽器分頁之間切換。您必須先設定 Google Cloud 帳號,才能將 Google 連結至顧客帳號。若要深入瞭解 Google Cloud,請參閱 Google 的說明文件。
步驟 1:在 Shopify 管理介面中開啟「使用 Google 登入」頁面
在 Shopify 管理介面中,前往「設定」>「顧客帳號」。
在「驗證」區段中,點擊「管理」。
點擊「Google」旁邊的「連結」,以開啟「使用 Google 登入」頁面。
此頁面包含設定 Google 應用程式 OAuth 用戶端時需要複製並貼上的資訊,因此請在獨立的瀏覽器分頁中保持開啟此頁面。
步驟 2:在 Google Cloud Console 中建立應用程式
- 在另一個瀏覽器分頁中,登入您的 Google Cloud Console。
- 選取現有專案或建立新專案。系統會將您重新導向至該專案的控制面板。
- 點擊
,然後點擊「API 和服務」>「憑證」。
- 點擊「設定同意畫面」>「開始使用」。
- 填寫您專案的 OAuth 設定詳細資訊:
- 為您的應用程式取一個顧客能認得的名稱 (例如您的網路商店名稱)。提供您的電子郵件以供技術支援使用,然後點擊「下一步」。
- 在「目標對象」區段中,選取「外部」,然後點擊「下一步」。
- 提供聯絡電子郵件,以便接收 Google 發送有關該專案的任何通知,然後點擊「下一步」。
- 同意 Google 的「API 服務使用者資料政策」,然後點擊「繼續」。
- 點擊「建立」。
- 設定會在同意畫面上對顧客顯示的應用程式政策資訊:
- 點擊「品牌宣傳」。
- 在「應用程式網域」區段中,加入您的首頁連結、公開的隱私權政策連結和服務條款連結。深入瞭解建立商店政策。
步驟 3:在 Google Cloud Console 中設定應用程式的 OAuth 用戶端
此步驟需從 Shopify 管理介面「使用 Google 登入」頁面上的「設定說明」區段複製詳細資訊,並貼到 Google Cloud Console 分頁中的對應欄位。
- 在 Google Cloud Console 的專案應用程式中,點擊「總覽」。
- 在「指標」區段中,點擊「建立 OAuth 用戶端」。
- 設定 OAuth 用戶端詳細資訊:
- 從「應用程式類型」下拉式選單中,選取「網頁應用程式」。
- 在「名稱」欄位中輸入名稱。
- 設定應用程式的「已授權的 JavaScript 來源」:
- 在「已授權的 JavaScript 來源」區段中,點擊「+ 新增 URI」。
- 在 Shopify 管理介面的「使用 Google 登入」頁面上,複製「已授權的 JavaScript 來源」值。
- 在 Google Cloud Console 中,將該值貼入「URI 1」欄位。
- 如果 Shopify 管理介面的「已授權的 JavaScript 來源」區段中有多個 URI,請針對其他 URI 欄位重複這些步驟。
- 設定應用程式的「已授權的重新導向 URI」:
- 在 Google Cloud Console 的「已授權的重新導向 URI」區段中,點擊「+ 新增 URI」。
- 在開啟 Shopify 管理介面的瀏覽器分頁中,複製「已授權的重新導向 URI」值。
- 返回 Google Cloud Console,並將該值貼入「URI 1」欄位。
- 如果 Shopify 管理介面的「已授權的重新導向 URI」區段中有多個 URI,請針對其他 URI 欄位重複這些步驟。
- 在您的 Google Cloud Console 中,點選「建立」。
請將顯示的「建立的 OAuth 用戶端」對話方塊保持開啟,以便進行 步驟 4:在 Shopify 管理介面中設定憑證,因為您需要將 Google Cloud Console 中的資訊複製並貼上至 Shopify 管理介面中。
步驟 4:在 Shopify 管理介面中設定憑證
- 從 Google Cloud Console 的「建立的 OAuth 用戶端」對話方塊中,複製「用戶端 ID」。
- 在 Shopify 管理介面的「使用 Google 登入」頁面上,將用戶端 ID 貼上至「憑證」區段中。
- 從 Google Cloud Console 的「建立的 OAuth 用戶端」對話方塊中,複製「用戶端密鑰」。
- 在 Shopify 管理介面的「使用 Google 登入」頁面上,將用戶端密鑰貼上至「憑證」區段中。
- 在 Shopify 管理介面的「使用 Google 登入」頁面上,點選「儲存」。
步驟 5:在 Google Cloud Console 中發布您的應用程式
- 在 Google Cloud Console 專案的應用程式中,點選「目標對象」。
- 點選「發布應用程式」。
將 Facebook 連結至顧客帳號
若要將 Facebook 連結至顧客帳號,您必須依序完成下列任務:
- 步驟 1:在 Shopify 管理介面中開啟「使用 Facebook 登入」頁面
- 步驟 2:在 Meta for Developers 控制面板中建立應用程式
- 步驟 3:設定您的 Meta 應用程式設定
- 步驟 4:在您的 Shopify 管理介面中設定憑證
- 步驟 5:測試並啟用「使用 Facebook 登入」
在設定期間,您需要在 Meta for Developers 控制面板和 Shopify 管理介面的瀏覽器分頁之間來回切換。若要將 Facebook 連結至顧客帳號,您必須擁有 Meta Developer 帳號。深入瞭解如何註冊為 Meta Developer。
步驟 1:在 Shopify 管理介面中開啟「使用 Facebook 登入」頁面
在 Shopify 管理介面中,前往「設定」>「顧客帳號」。
在「驗證」區段中,點擊「管理」。
點選 Facebook 旁邊的「連結」,以開啟「使用 Facebook 登入」頁面。
步驟 2:在 Meta for Developers 控制面板中建立應用程式
- 在另一個瀏覽器分頁中,前往 Meta for Developers 控制面板,然後點選「登入」。如果您尚未設定 Meta Developer 帳號,則需先在登入頁面建立新帳號,再繼續執行下一個步驟。
- 點選「應用程式」。
- 點選「建立應用程式」。
- 填寫「應用程式名稱」和「應用程式聯絡電子郵件」欄位,然後點選「下一步」。
- 在「新增使用案例」頁面上,選取「使用 Facebook 登入驗證使用者並請求資料」,然後點選「下一步」。
- 在「您要將哪個企業管理平台連結至此應用程式」頁面上,選取一個企業管理平台,或選取「我還不想連結企業管理平台。」,然後點選「下一步」。
- 檢閱「發布要求」頁面,然後點選「下一步」。
- 檢閱「概覽」頁面,然後點選「前往控制面板」。
步驟 3:設定您的 Meta 應用程式設定
- 建立應用程式後,在 Meta for Developers 控制面板中,點選「使用案例」。
- 在「使用 Facebook 登入驗證使用者並請求資料」使用案例上,點選「自訂」。
- 為確保在顧客登入時擷取顧客資訊,請在「權限與功能」區段中,點選 email 旁邊的「新增」。
- 點選「設定」,然後前往「用戶端 OAuth 設定」。
- 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,從「重新導向網址」區段中複製重新導向網址。
- 在 Meta for Developers 控制面板的「設定」頁面上,將重新導向網址貼上至「有效的 OAuth 重新導向 URI」欄位中。
- 如果在 Shopify 管理介面的「重新導向網址」區段中有多個重新導向網址,請針對其他重新導向網址重複執行這些步驟。
- 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,從「解除授權網址」區段中複製網址。
- 在 Meta for Developers 控制面板的「設定」頁面上,將網址貼上至「解除授權回呼網址」欄位中。
- 在 Meta for Developers 控制面板的「設定」頁面上,點選「儲存變更」。
步驟 4:在 Shopify 管理介面中設定憑證
- 點選「首頁」圖示返回 Meta for Developers 控制面板,然後點選「應用程式設定」>「基本」。
- 從 Meta for Developers 控制面板中複製「應用程式 ID」。
- 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,將應用程式 ID 貼上至「憑證」區段的「應用程式 ID」欄位中。
- 在 Meta for Developers 控制面板中,點選「應用程式密鑰」旁邊的「顯示」,然後複製「應用程式密鑰」。
- 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,將應用程式密鑰貼上至「應用程式密鑰」欄位中,然後點選「儲存」。
- 在 Shopify 管理介面中,點選「儲存變更」。
步驟 5:測試並啟用「使用 Facebook 登入」
- 在 Shopify 管理介面的「使用 Facebook 登入」頁面上,點選「更多動作」>「預覽」,然後以顧客身分來測試登入商店的 Facebook 驗證流程。
- 點選「開啟」。
開啟「使用 Facebook 登入」後,您可以前往您的網路商店,並使用 Facebook 登入顧客帳號,藉此測試顧客體驗。
使用 Shop 登入
如果您已啟用 Shop Pay,顧客便能使用其 Shop 憑證和儲存的密碼金鑰登入。顧客在您的商店使用 Shop Pay 結帳後,系統也會自動讓其使用 Shop 登入。
顧客帳號會自動啟用「使用 Shop 登入」功能,只有在您停用 Shop Pay 時,才能從商店將其移除。
瞭解如何在商店中新增「使用 Shop 登入」按鈕。
管理社群登入選項
您可以編輯、關閉或移除已連結的社群登入方法。
關閉或移除社群登入方法後,顧客仍會保持登入狀態以免受到中斷。社群登入工作階段會自然過期,或在顧客登出時過期。
步驟:
在 Shopify 管理介面中,前往「設定」>「顧客帳號」。
在「驗證」區段中,點擊「管理」。
在想要變更的登入方法旁,點擊「…」選單。
請執行以下任一操作:
- 若要編輯登入選項,請點擊「管理」,然後更新您想編輯的憑證。
- 若要關閉登入選項但不移除,請點擊「關閉」。
- 若要移除登入選項,請點擊「移除」,接著在對話方塊中點擊「移除」。
變更顧客帳號網域時更新社群登入設定
如果您打算將顧客帳號網域變更為不同的網址,則需先更新社群登入設定,然後再於 Shopify 中進行變更。這樣可以確保顧客能繼續順利登入而不會中斷。
當您在 Shopify 中將顧客帳號網址從舊版格式 (例如 shopify.com/1234567890/account) 更新為新的子網域格式 (account.your-store.com),或從現有子網域變更為其他子網域 (例如將 account.your-store.com 更新為 customers.your-store.com) 時,必須執行這些步驟。
將新的顧客帳號子網域新增至社群服務供應商
您需要將新網域與目前網域一起新增至社群服務供應商的設定中。在 Shopify 中變更顧客帳號網域並確認顧客帳號的登入及登出程序運作正常後,便可移除舊網域項目。
您需要針對每個已啟用的社群登入選項重複這些步驟。
步驟:
- 前往 Google Cloud 控制台,然後開啟「API 和服務」>「憑證」。
- 選取您為 Shopify 建立的 OAuth 2.0 用戶端。
- 在「已授權的 JavaScript 來源」中新增項目。例如:
https://account.your-store.com - 在「已授權的重新導向 URI」中新增項目。例如:
https://account.your-store.com/authentication/social/google/callback - 在「取消授權回呼網址」中新增項目。例如:
https://account.your-store.com/authentication/social/google/revoke - 儲存變更。暫時保留新舊網址。
- 返回 Shopify 管理介面,並按照步驟在 Shopify 中將帳號網域變更為新的自訂子網域網址。
- 在線上店面中使用每個社群選項測試登入和登出功能,以確認所有功能運作正常。
- 選用:確認登入程序運作正常後,即可返回 Google 並移除舊網域項目。
- 前往 Meta for Developers 並開啟您的 app。
- 導覽至 Facebook「登入」>「設定」。
- 在「有效的 OAuth 重新導向 URI」中新增項目。例如:
https://account.your-store.com/authentication/social/facebook/callback - 在「取消授權回呼網址」中新增項目。例如:
https://account.your-store.com/authentication/social/facebook/revoke - 導覽至「設定」>「基本」。
- 在「應用程式網域」中新增項目。例如:
account.your-store.com - 儲存變更。暫時保留新舊網址。
- 返回 Shopify 管理介面,並按照步驟在 Shopify 中將帳號網域變更為新的自訂子網域網址。
- 在線上店面中使用每個社群選項測試登入和登出功能,以確認所有功能運作正常。
- 選用:確認登入程序運作正常後,即可返回 Facebook 並移除舊網域項目。