HIKO Social Login Plus

它能為您的網路商店加入社群與免密碼登入功能。消費者可以使用 Google、LINE、Facebook、Apple 等提供者登入，可透過寄送到電子郵件或 WhatsApp 的一次性驗證碼登入，也可以使用 passkey 登入——完全不需要記住密碼。每一次登入都會對應到一個 Shopify 顧客帳號。

此應用程式僅供使用新版顧客帳號的 Shopify Plus 商店使用。若您的商店採用其他方案，或仍在使用傳統（舊版）顧客帳號，設定將被封鎖，並顯示一則通知說明需要變更的項目。若您剛完成升級或切換，請重新開啟應用程式以重新檢查。

需要付費訂閱。方案與價格由 Shopify 自己的訂閱頁面呈現，也由 Shopify 收費並顯示在您的 Shopify 帳單上——我們不另外向您收款。尚未訂閱時，開啟應用程式會直接被帶到那個訂閱頁面；訂閱生效後所有設定頁面才會解鎖。

開發用商店（含 Plus sandbox）不需要訂閱，可以直接使用完整功能，方便您先建置與測試。

安裝畫面會請您授權三項權限，每一項都對應一個實際功能：

• read_customers — 用電子郵件找出既有顧客，讓社群登入接上原本的帳號，而不是重複建立。
• write_customers — 把登入時的行銷訂閱勾選同步到該顧客的 Shopify 行銷同意設定，並寫入社群身分的標籤與 metafield。
• read_locales — 讀取商店的主要語言，好用正確的語言寄送信件。

顧客資料屬於 Shopify 的受保護顧客資料，因此這些權限需要額外核准；沒有它們，行銷同意同步與既有顧客比對都無法運作。

• 儀表板 — 設定指南、登入活動摘要，以及最近 7 天的登入趨勢。點選側邊欄的應用程式名稱即可回到這裡。
• 顧客分析 — 顧客名單與個別登入紀錄、趨勢圖與活動分布。
• 身分提供者 — 幾乎所有登入設定都在這裡：自訂提供者（與顧客帳號的串接）、社群媒體、自訂樣式、電子郵件登入、Marketing opt-in、行銷平台、社群登入身分。
• 店面小工具 — 登入介面如何出現在您的網路商店上，以及登入後要去哪裡。
• Integrations — Shopify Admin API、傳出 webhook、Headless 與行動端登入。
• 翻譯 — 各語言的小工具與驗證（OTP）頁面文案。

這是唯一必要的設定步驟。此應用程式本身就是一個 Shopify 會與之通訊的身分提供者：

1. 開啟身分提供者頁面（或儀表板的設定指南），找到自訂提供者區段。
2. 點選建立自訂提供者，開啟 Shopify Admin → 設定 → 顧客帳號，並新增第三方身分提供者。選擇 "Custom or other" 並為其命名。
3. 將應用程式中顯示的 Discovery URL、Client ID 與 Client secret 複製到對應的欄位，並將登出後重新導向 URI 參數名稱設為顯示的值（post-sign-out）。這個欄位別跳過——漏了它，登出會不完整。
4. 儲存，然後啟用該提供者。
5. 回到應用程式，點選檢測設定。它會實際檢查您的店面，並告訴您串接是否已生效、Client ID 是否過期，或商店是否仍指向別處。

1. 開啟身分提供者頁面的社群媒體區段。
2. 開啟您想要的提供者（例如 Google），並點選 如何取得您的 Client ID 與 secret 以查看逐步操作說明。
3. 在該提供者的主控台中建立 OAuth 應用程式，複製 Client ID 與 Client secret，貼上後啟用該提供者。
4. 點選儲存。

每個提供者的設定指南都會直接連結到正確的主控台，並列出確切的操作步驟。您也可以在這個清單裡直接拖動每個提供者的順序，右側的預覽會即時反映結果。

16 個社群提供者：Google、Facebook、Apple、LINE、Kakao、X (Twitter)、TikTok、Amazon、Twitch、Microsoft、Yahoo、LinkedIn、Discord、Spotify、GitHub 與 Yandex。此外還有電子郵件一次性驗證碼、passkey 與 WhatsApp 登入。您可以自行選擇要在小工具上顯示哪些方式，以及顯示順序。

可以。您可以為每個提供者自備 OAuth Client ID 與 secret——沒有綁定，而且同意畫面上會顯示您自己的品牌。部分提供者還有額外選項：Apple 金鑰資料、Amazon 地區、LINE 加好友提示、Kakao 頻道與範圍，以及 Google 圖示樣式選擇器。

可以，而且開發用商店不需要訂閱。請注意兩件事：

• 密碼保護的店面會讓「檢測設定」測不出結果。它需要實際連上您的店面才能判斷登入是否已導向本應用程式，被密碼擋住時會回報「無法自動檢測」——這不代表您的設定有誤。
• 社群提供者的 OAuth 應用程式通常要把測試商店的網域也註冊進去，正式站與測試站請分別確認 Callback URL 都已登記。

可以。消費者會透過 WhatsApp 收到一次性驗證碼。您可以先使用我們的共用號碼開始（每位顧客每日 10 則、每家商店每日 2000 則，費用由我們負擔），或在身分提供者頁面連接您自己的 WhatsApp Business 號碼，以掌控傳送、訊息範本、範本按鈕類型、每家商店的使用上限與帳單。

電子郵件登入讓顧客可以使用寄送到電子郵件的驗證碼登入（不需密碼）。驗證完成後，應用程式會邀請顧客建立 passkey（Face ID、指紋或裝置 PIN 碼）——passkey 是一次性驗證碼之後的升級，不是獨立的登入入口。兩者都可以在身分提供者頁面的電子郵件登入區段（或儀表板的設定指南）個別開關。

可以，在身分提供者頁面的電子郵件登入區段：

• 自訂 SMTP — 透過自己的郵件伺服器（包括 Outlook / Office 365）寄送一次性驗證碼，讓信件顯示為來自您，而非來自我們。填好之後可以用傳送測試郵件先確認設定是否正確。
• 自訂 OTP 電子郵件 — 逐一語言編輯驗證碼電子郵件的主旨與 HTML 內文，並提供視覺化與 HTML 兩種編輯模式、即時預覽，以及 {code}、{shop} 和 {minutes} 等預留位置。已被自訂的語言會標示「已自訂」，隨時可重設為預設值。

可以。同樣在電子郵件登入區段，自訂 OTP 頁面讓您逐一語言改寫整個驗證碼頁面的 HTML——標題、驗證碼輸入框、重新傳送連結等全部內容。編輯器同樣提供視覺化／HTML 兩種模式。若您的 HTML 缺少登入實際需要的元素，儲存會被拒絕並告訴您少了什麼，原本的頁面不受影響。

此外還有一個在您的商店前台代管 OTP 頁面開關：開啟後，顧客會在您商店自己的網域、您自己的佈景主題裡輸入驗證碼，而不是在我們的網域。此開關預設為關閉，需要已安裝此應用程式的線上商店佈景主題。

One Tap 會向尚未登入的消費者顯示 Google 的一鍵登入提示。它預設為關閉——待 Google 設定完成後，即可從儀表板或身分提供者頁面的 Google 那一列開啟。

他們會使用您網路商店上的登入小工具。點選某個社群提供者，或輸入電子郵件（或 WhatsApp 號碼）以接收一次性驗證碼。完成驗證後，便會登入您的商店——並可選擇啟用 passkey，日後只要一鍵即可快速返回登入。小工具也會在消費者上次成功使用的方式上標示「上次使用」，讓回訪的人一眼就找到。

還是會看到您設定的登入方式。 因為這個應用程式是註冊在顧客帳號裡的身分提供者，任何走到登入的路徑——結帳、帳戶連結、直接輸入網址——Shopify 都會交給本應用程式處理。

此時應用程式會依序嘗試：先用還有效的「保持登入」session 直接無聲完成登入；不行的話，就顯示一個由我們代管的登入頁，上面掛的是與店面上完全同一個小工具——同一批提供者、同一套樣式與文案。所以您不需要為這條路徑另外設定什麼。

Shopify 硬性規定登入必須帶著已驗證的電子郵件，否則會擋下該次登入。而 X (Twitter)、TikTok 等提供者不一定會回傳電子郵件。

遇到這種情況時，應用程式會在該提供者授權完成後，多插入一個步驟：請顧客輸入電子郵件並以一次性驗證碼驗證，通過後才建立 Shopify 的登入。同一個人下次再用同一個提供者登入就不用再輸入一次——我們會記住這組對應。這是為什麼這幾個提供者的登入步驟看起來比 Google 多一步。

電子郵件相同就不會。 顧客是以已驗證的電子郵件為準來識別的，所以同一個人先用 Google、之後改用 Facebook，只要兩邊的電子郵件一樣，就是同一位顧客，登入次數會累加，顧客分析裡也只有一筆。

電子郵件不同就會是兩位顧客——這是刻意的，因為我們無法證明那是同一個人。若要合併，請讓顧客登入後從帳戶頁面的已連結的登入方式自行連結，並在店面小工具頁面開啟允許使用不同電子郵件連結帳戶。

會接上原本那位顧客，不會重複建立。比對的依據是電子郵件：社群帳號的已驗證電子郵件如果對得上您商店裡既有的顧客，那次登入就直接登入該顧客，訂單紀錄與地址全部保留。

可以。在店面小工具頁面加入帳戶頁面區塊後，已登入的顧客就能在顧客帳號的個人資料頁上看到自己已連結的登入方式，並可以中斷連結或連結新的方式。

同一個區段還有允許使用不同電子郵件連結帳戶開關（預設關閉）：開啟後，顧客可以連結已驗證電子郵件與帳戶電子郵件不同的社群帳號，之後用它登入會解析到同一個帳戶。它會覆寫提供者自身的電子郵件，請只在您信任顧客僅連結本人擁有的帳戶時才啟用。

共有四種方式，全部都可在店面小工具頁面設定：

• 帳號圖示彈出視窗 — 點選在佈景主題中啟用以開啟佈景主題編輯器的「應用程式嵌入」，開啟 Sign-in widget，然後儲存。之後點選頁首的帳號圖示便會開啟登入彈出視窗。若您的佈景主題結構特殊，可以在帳戶控制項區段填入自訂 CSS 選擇器，或選擇只用您的選擇器、略過自動偵測。
• 登入頁面 — 從您的佈景主題連結到 /apps/signin（例如頁首選單項目），即可開啟完整的代管登入頁面。
• 登入卡片區塊 — 從佈景主題編輯器的「應用程式」分頁，將內嵌的 Sign-in 應用程式區塊加入任何區段。
• 已連結的登入方式 — 加入帳戶頁面區塊，讓已登入的顧客可以在個人資料頁面上查看並中斷連結他們已連結的社群登入方式。

預設沿用佈景主題原本的連結。若您有自己的會員中心，可以在店面小工具頁面填入已登入時的帳號頁面連結（商店上的路徑，例如 /a/accounts），已登入的顧客點擊頁首帳號圖示時就會前往那裡。

可以，在店面小工具頁面。設定登入後轉址——回到他們登入時所在的頁面、上一次造訪的頁面，或指定的路徑（注意：無論此設定為何，Google One Tap 一律會讓顧客停留在原本所在的頁面）。保持登入（SSO session）會讓回訪顧客在您設定的期間內（1–90 天，預設 30）保持登入狀態，免去每次造訪都要重新驗證；也可以選擇完全不更動 Shopify 原生的 session 時效。

可以，在身分提供者頁面的自訂樣式區段：佈景主題、按鈕形狀、大小、版面配置（圖示／文字／圖示＋文字／文字加右側圖示）、圖示大小與分隔線——此外進階覆寫還有背景與邊框顏色、邊框寬度、按鈕高度、圖示與標籤大小，以及標籤粗細與顏色。

需要更細的控制時，可以開啟自訂 CSS：應用程式會依您目前的設定產生一份完整、有註解的 CSS 範本作為起點（.hs-btn、.hs-lbl 等類別），您再自行修改；隨時可以「根據設定重新整理」重新產生。背景、邊框與按鈕高度請用上方的欄位設定，不要用 CSS。所有變更都會即時反映在旁邊的預覽上。

可以。在身分提供者頁面展開任一提供者，就有按鈕文字欄位，而且是逐一語言設定的——例如 Google 那顆按鈕在中文與日文可以是不同的寫法。留空則使用內建翻譯。

可以。小工具內建 15 種語言，並會自動依循每位消費者的網路商店語言。在翻譯頁面，您可以針對各語言覆寫登入元件與驗證（OTP）頁面的任何字串，甚至新增未列出的語言；「重設為預設值」可把某個語言整批還原成內建文案。行銷與同意核取方塊的文字改在身分提供者頁面的 Marketing opt-in 區段直接編輯（同樣逐一語言，且支援 HTML）。

應用程式後台本身另外提供 11 種語言，可從頁首的語言選單切換。

不會有明顯影響。小工具是單一一支打包好的檔案，由 Shopify 自己的 CDN 提供，並以 defer 載入——也就是排在頁面渲染完之後，不會擋住首屏。彈出視窗與卡片區塊共用同一份檔案，同一個頁面只會載入一次。此外，顧客已經登入時，登入卡片區塊根本不會輸出。

可以，在身分提供者頁面的 Marketing opt-in 區段。登入時的「以電子郵件接收最新消息與優惠」核取方塊會同步到消費者的 Shopify 行銷同意設定；您可以選擇是否預先勾選（注意：在歐盟／英國的 GDPR/ePrivacy 規範下不允許預先勾選），以及未勾選時是否取消訂閱。同一個區段裡還可以要求在登入前勾選條款同意核取方塊。兩個核取方塊的文字與連結都可以在這裡逐一語言編輯。

若勾選的是一位還不存在的新顧客，該同意會先被暫存，等 Shopify 實際建立這位顧客時才套用上去——所以剛註冊的顧客身上不會立刻看到同意狀態，這是正常的，不是漏掉。

可以。在身分提供者頁面的行銷平台區段，使用您的 API 金鑰連接 Klaviyo、Mailchimp 或 Omnisend，可先「驗證金鑰」確認連線，再「取得清單」選擇要將顧客加入的名單，並選擇要在每次登入時同步所有人，或只同步選擇加入的消費者。另外還可以為同步過去的顧客加上 social-login 或您自訂的標籤，以及在 Klaviyo 建立社群登入與 Google One Tap 的登入指標。

可以，在身分提供者頁面的社群登入身分區段：

• 標籤 — 顧客以社群帳號登入時，自動為該顧客加上標籤，範本預設是 uid_%(social)s_%(user_id)s，可用的變數是 %(social)s 與 %(user_id)s。（刻意不提供 IP，它每次登入都會變動，會耗盡 Shopify 每位顧客 250 個標籤的上限。）
• 顧客 metafield — 此項恆為開啟：每次社群登入都會以 JSON 寫入顧客 metafield，記錄提供者、使用者 ID、姓名與綁定時間，可用 {{ customer.metafields.hiko.social_identities }} 從佈景主題讀取。

可以。在 Integrations 頁面：

• Headless 與行動端登入 — 設定 Customer Account API 的 OAuth 用戶端與允許的來源，即可在 headless 網頁店面與原生行動 App（React Native、iOS、Android）加入社群登入、電子郵件 OTP 與生物辨識登入。頁面上有「如何取得 Client ID」的逐步說明、行動 App 自訂 URI scheme 的說明，以及對應 SDK 與 GitHub 儲存庫的連結。
• Shopify Admin API — 提供現成的查詢範例，可使用您自行建立的存取權杖讀取您的顧客及其中繼欄位（metafields）。

可以。在 Integrations 頁面，設定一個 HTTPS 端點，並為 customer.login、customer.connected 與 customer.created 啟用傳出 webhook。每個請求都會以您產生的密鑰簽署（X-HIKO-Signature），並提供傳送測試事件按鈕、近期傳送紀錄，以及一段可直接使用的 Node.js 簽章驗證範例。

顧客分析頁面會列出您的顧客與個別登入記錄，並提供搜尋、篩選與 CSV 匯出功能。它也會顯示一段時間內的登入次數，以及依提供者、瀏覽器、作業系統、國家與城市的分類統計。點選任一位顧客可以看到詳細資料——電話、標籤與已連結的社群身分——並在需要時刪除該顧客（連同其登入紀錄）。儀表板也會顯示最近的登入活動與 7 天趨勢。

這裡的顧客數通常會少於 Shopify 後台的顧客總數，這是正常的：這一頁只計算曾經透過本應用程式登入過的人，透過結帳、匯入或其他方式建立的顧客不會出現在這裡。

我們只保存讓登入運作與提供分析所需的資料：

• 顧客 — 電子郵件、姓名、用過哪些提供者與其使用者 ID、首次／最後登入時間與登入次數。
• 登入紀錄 — 每次登入的時間、提供者、瀏覽器、作業系統與大略位置（國家／城市）。
• 短暫狀態 — 登入過程中的一次性資料（登入選擇提示、一次性驗證碼、「保持登入」session）只存在幾分鐘到您設定的天數，會自動過期；「保持登入」session 在儲存時是加密的。

我們不會保存顧客在社群提供者那邊的密碼，也不會保存提供者的長期存取權杖。上述顧客與登入資料會一直保留，直到該顧客被刪除、或您移除應用程式為止（見下面兩題）。

有兩條路，兩條都可以：

• 您自己刪 — 在顧客分析頁面點開那位顧客，選擇刪除。他的顧客資料與所有登入紀錄都會一併移除。
• 走 Shopify 的流程 — 顧客透過 Shopify 提出資料刪除或查詢請求時，Shopify 會通知本應用程式，我們會自動清除該顧客在此應用程式中的資料。您不需要額外操作。

已儲存的機密值在後台只會遮蔽顯示，不會再以明文送回瀏覽器；重新儲存時留空即代表沿用原值，不會被清掉。webhook 的簽章密鑰只在產生的當下完整顯示一次，之後就看不到全文——請在那時複製保存。

自訂提供者的 Client secret 可以隨時重新產生（會要求您確認），舊的立即失效；產生後別忘了把新值貼回 Shopify 的顧客帳號設定，否則登入會中斷。

移除當下，您的所有設定（提供者、憑證、樣式、SMTP、行銷設定）會被清除，登入 session 也會失效。顧客與登入分析資料則依 Shopify 的規定，在移除後約 48 小時由 Shopify 通知我們一併清除。

因此重新安裝等於從空白開始：所有提供者憑證要重新填寫，Shopify 顧客帳號裡的自訂提供者也要用新的 Client ID／secret 重新設定一次。顧客本身留在 Shopify（他們是 Shopify 的顧客，不是我們的），但誰用哪個社群帳號登入過的紀錄不會回來。

依序檢查：

• 應用程式嵌入沒有開啟。 彈出視窗需要佈景主題的「應用程式嵌入」中開啟 Sign-in widget 並儲存——在店面小工具頁面點在佈景主題中啟用可以直接跳到那裡。
• 帳號圖示沒被認出來。 自動偵測涵蓋大多數佈景主題，客製化程度高的可能認不出；請在帳戶控制項填入該元素的 CSS 選擇器。
• 您自己已經登入了。 登入卡片區塊對已登入的顧客不會顯示——請用無痕視窗測試。

• 自訂提供者只 Save 沒有 Activate。 這是最常見的原因。回到 Shopify 顧客帳號設定確認它是啟用狀態，然後用檢測設定驗證。
• Client ID 已經過期。 若您重新產生過 secret 或重裝過應用程式，Shopify 那邊留的可能是舊值；檢測設定會直接告訴您它看到的是哪一組。
• 該提供者的憑證沒填。 沒有憑證的提供者會在清單裡被標示出來——這種按鈕不會有作用。

請確認該提供者顯示的 Callback URL 已完全一致地註冊在該提供者的主控台中。只有在您使用自己的 Google client 時才會用到您的商店網域 callback；其餘所有情況（包含使用我們共用 Google client 時）都使用該提供者欄位旁顯示的 broker callback。請完全照原值複製。

電子郵件： 先請對方檢查垃圾信匣。若您設定了自訂 SMTP，用傳送測試郵件確認伺服器設定與寄件地址可用——寄件網域若沒有正確的驗證設定，很容易被歸為垃圾信。另外，同一個電子郵件地址每天最多 20 組驗證碼，達到上限時顧客會直接看到提示訊息。

WhatsApp： 使用自己的號碼時，訊息範本必須是 Meta 已核准的驗證範本，而且範本語言代碼要與您填的一致。使用共用號碼則有每位顧客每日 10 則、每家商店每日 2000 則的上限。

這幾乎都是登出後重新導向 URI 參數名稱沒設定造成的。開啟「保持登入」後，我們會另外記著這位顧客；Shopify 必須在登出時通知我們，我們才會一併把這份記憶清掉。

請回到 Shopify Admin → 設定 → 顧客帳號，打開您的自訂提供者，確認該欄位的值是 post-sign-out（與應用程式中顯示的一致），儲存後再測一次登出。

請使用頁首中的技術支援按鈕傳訊息給我們（可附加檔案），我們會以電子郵件回覆。