Facebook 帳號快速註冊／登入會員（新版）

點選此連結進入 Meta for Developers 並使用您的 Facebook 個人帳號登入。接著點選「我的應用程式 > 建立應用程式」開始建立 Facebook 應用程式。

＊注意：由於 Meta for Developers 應用程式是綁定並建立在個人帳號下，為避免貴司內部人員權限異動，建議使用貴司可共同管理的 Facebook 個人帳號建立程式，並請留意步驟十三，將貴司相關人員 Facebook 帳號設為應用程式管理員，以利後續維護管理。

 

若您尚未建立任何應用程式，在點按「我的應用程式」後，頁面會顯示「還沒有應用程式」並邀請您建立第一款應用程式。

 

步驟二：建立 Facebook 應用程式

點按「建立應用程式」後，頁面會詢問「你希望應用程式執行哪些工作？」，請點選「使用 Facebook 登入」。

 

選擇是否在打造遊戲。

 

完成相關設定後，點選「建立應用程式」。

• 應用程式名稱：為必填項目，建議填寫「商店 / 品牌名稱」。
• 應用程式聯絡電子郵件地址：在您進入此頁面時系統自動帶入您綁定的電子郵件地址。
• 商業帳號：若您有 Facebook 企業管理平台，可於下拉選單中選取管理此應用程式的平台。

 

將出現「請重新輸入密碼」的彈出式視窗，請輸入密碼後點選「提交」。

 

步驟三：新增「Facebook 登入」應用程式

開啟「使用案例」頁面，先點按「驗證和帳號建立流程」右側「自訂」按鈕。

 

接著點按「前往快速入門」按鈕。

 

選擇將應用程式使用在「網站」中。

 

請輸入您商店的首頁網址，例如：https://www.test123.com 或 https://www.test123.com.tw 等。完成後，點選右下角的「Save」按鈕，並待應用程式存取網址。

＊注意：務必要填寫「https://」開頭的安全性加密網址。

 

步驟四：設定基本資料

回到主控版，點選左側「應用程式設定 > 基本資料」完成欄位設定。以下將分別說明下方圖示中的項目 1 至 7。

1. 應用程式網域
2. 隱私政策網址
3. 應用程式圖示
4. 用戶資料刪除
5. 服務條款網址
6. 類別
7. 網站網址

 

1. 應用程式網域（必填）

請依照下方指示於此欄位內填入 2 個網址（裸網域和包含子網域之網址），並按下「Enter (Window) / Return (Mac)」鍵，當網址顯示於灰框內時即表示輸入成功。

• 若您的商店使用「獨有網址」，如：https://www.test123.com 
  請分別填入 2 個網址：www.test123.com 和 test123.com 
  
  
• 若您的商店使用「免費網域」，如：https://test456.shoplineapp.com
  請分別填入 2 個網址：test456.shoplineapp.com 和 shoplineapp.com
  

以上「橘字粗體」請更換為您的商店網址（非 SHOPLINE 官方網址），若不確定您商店獨有網址和免費網址，可進入商店前台複製網址。 

 

2. 隱私政策網址（必填）

隱私政策為網站如何存取網路使用者個人資料之聲明，商店中是否揭露「隱私條款」為金流審核、Google 廣告投放審核、Facebook 應用程式的審核項目之一。請您先返回「SHOPLINE 後台 > 網店設計 > 網店分頁」取得商店隱私政策網頁連結。

若您尚未建立隱私政策分頁，可選擇使用預設的「隱私政策」分頁或建立新分頁：

A. 使用預設「隱私政策」分頁

可參考示範商店案例補充相關資訊（請依實際規範及需求撰寫）。設定完成後，在「2. 隱私政策網址」欄位填入網址。

• 若您的商店使用「獨有網址」，網址會類似於：
  https://www.test123.com/about/privacy-policy
  
  
• 如果您的商店使用「免費網址」，網址會類似於：
  https://test456.shoplineapp.com/about/privacy-policy

以上「橘字粗體」請更換為您的商店網址（非 SHOPLINE 官方網址），若不確定您商店獨有網址和免費網址，可進入商店前台複製網址。 

 

B. 建立新分頁

可透過「網店設計 > 網店分頁 > 文字分頁 / 進階分頁」建立「隱私政策」分頁，撰寫格式一樣可參考示範商店案例（請依實際規範及需求撰寫，也請務必依照商店營運內容放上「資料之查閱與刪除」相關資訊）。

＊提醒您：若您的商店正在使用 Facebook 帳號快速註冊/登入會員功能，且過去曾提供的 Facebook「描述性 URL」中包含「privacy-policy」分頁，請勿刪除此舊分頁，以免登入功能失效。
若欲刪除過去自行建立的隱私權政策舊分頁而改用新分頁/預設分頁，請記得至 Meta for Developers 及過去顯示舊頁面的分頁中，手動更新相關網址。

請確保該分頁的 SEO「標題」包含「隱私權政策 Privacy Policy」；「描述性 URL」 包含「privacy-policy」讓 Facebook 容易識別頁面具有隱私權的相關內容。設定完成後，在「2. 隱私政策網址」欄位填入網址。

• 若您的商店使用「獨有網址」，網址會類似於：
  https://www.test123.com/pages/privacy-policy
  
  
• 如果您的商店使用「免費網址」，網址會類似於：
  https://test456.shoplineapp.com/pages/privacy-policy

以上「橘字粗體」請更換為您的商店網址（非 SHOPLINE 官方網址），若不確定您商店獨有網址和免費網址，可進入商店前台複製網址。

 

3. 應用程式圖示（必填）

應用程式圖示會和「顯示名稱」一起出現在顧客登入流程，建議您上傳商店 Logo 或品牌圖示，降低顧客認為是詐騙或非正式管道搜集用戶資料的疑慮。Facebook 要求圖像大小須介於 512 x 512 和 1024 x 1024 像素。檔案大小上限 5 MB。

 

4. 用戶資料刪除（必填）

從下拉式選單中選擇「資料刪除指示網址」。

下拉式選單的下方「你也可以提供連結」欄位可輸入商店首頁網址，如 https://www.test123.com 或 https://www.test123.com.tw。請務必填寫以 https:// 開頭的安全性加密網址。

 

5. 服務條款網址（建議填寫）

此網址連結會顯示於 Facebook 登入應用程式的視窗「應用程式條款」中，建議您編輯商店的「條款與細則」預設分頁，並依實際情況描述您商店的服務項目與交易細則，完成後將分頁網址連結放置在此欄位中。

 

6. 類別（必填）

請依照您商店販售的商品或服務類型，從「選擇類別」下拉選單中選取合適之選項。若網店以銷售商品為主，建議選擇「購物」。

 

7. 網站網址（必填）

在頁面下方點按「新增平台」選擇「Website」。

正常情況下系統會自動帶入網址，但若欄位為空白，請再次輸入商店首頁網址，如 https://www.test123.com 或 https://www.test123.com.tw。注意請務必填寫以 https:// 開頭的安全性加密網址，完成確認後請點按右下角「儲存變更」按鈕。

 

步驟五：完成 Facebook 登入相關設定

開啟「使用案例」頁面，先點按「驗證和帳號建立流程」右側「自訂」按鈕。

 

接著點按「前往設定」按鈕。

 

請參照以下兩點說明：

1. 將指定功能開關開啟

開啟以下 4 個功能開關（確保開關顯示為「是」即可），設定完畢後可與下圖比對確認。

• 開啓「用戶端 OAuth 登入」
• 開啓「網路 OAuth 登入」
• 開啓「強制採用 HTTPS」 
• 開啓「對重新導向 URI 使用 Strict 模式」

 

2. 在「有效的 OAuth 重新導向 URI 」輸入連結

請按下述方法獲取連結並貼到「有效的 OAuth 重新導向 URI」欄位，貼上後按下鍵盤的「Enter(Window) / Return(Mac)」鍵，當網址變為藍底時才代表成功輸入，如下圖所示。完成設定後，請點選右下角「儲存變更」按鈕。提醒您，送出之後請再次檢查「對重新導向 URI 使用 Strict 模式」開關是否為關閉（「否」的狀態），如果是，須再次開啟（將狀態改為「是」）並點擊「儲存變更」。 

• 如果您的商店使用「獨有網址」，如：https://www.test123.com 
  請在欄位中貼上：https://www.test123.com/users/auth/facebook/callback  
  
  
• 如果您的商店使用「免費網址」，如：https://test456.shoplineapp.com
  請在欄位中貼上：https://test456.shoplineapp.com/users/auth/facebook/callback

以上「橘字粗體」請更換成您的商店網址（非 SHOPLINE 官方網址），若不確定您商店獨有網址和免費網址，可進入商店前台首頁複製網址。

 

步驟六：確認使用案例權限狀態

同樣在「使用案例 > 自訂」頁面，點按「email」權限右側「新增」按鈕。

 

確認「email」與「public_profile」兩個選項皆為「可供測試」狀態。

＊注意：除了這兩個選項外，請勿再新增其他選項，以免後續進行商家驗證時，Facebook 會要求更多文件審核以符合規範，進而影響商家驗證流程。

 

步驟七：升級 API 版本

開啟「應用程式設定 > 進階」頁面，確認 API 版本為最新版（版本編號最大），若非，請手動調整。

 

步驟八：完成商家驗證

自 2023/2/1 起，若您的應用程式需要進階層級存取權限，則須完成商家驗證。完成後，Facebook 會自動更新使用案例的權限狀態。

開啟「檢查 > 驗證」頁面，點選「開始驗證」依照指示完成驗證流程。

＊備註：由於版本差異，「檢查」下拉選單會顯示 3 個或 4 個項目。

完成驗證後，「商家驗證」區塊內會以綠圈顯示「已驗證」，表示您的商家已完成 Facebook 驗證。

 

＊注意：若您未完成商家驗證，顧客於前台使用 Facebook 帳號快速註冊 / 登入會員時，會顯示「以下某些權限已不再獲得 Facebook 批准使用」。

 

步驟九：完成應用程式審查

開啟「檢查 > 應用程式審查」頁面，審查狀態將顯示為「草稿」，點選右側「編輯」按鈕。

請先完成所有審查要求，再點按「提交送審」。

 

步驟十：確認應用程式狀態

點按左側「發佈」，先確認相關資訊：

• 前往應用程式設定確認「隱私政策網址」、「資料刪除網址」是否無誤。
• 確認「商家驗證」顯示為「已驗證」，若尚未驗證，請點按右側「完成驗證」。
• 前往資料處理問題，回答幾個有關資料處理作法的問題。

接著點選頁面右下方「發佈」，應用程式才能使用。

 

向下滑動頁面，點按「使用 Facebook 登入」右側「審查」按鈕。

再次點入「驗證和帳號建立流程 > 自訂」頁面，此時「email」與「public_profile」兩者狀態應為「可用於上線模式」。

 

步驟十一：準備好要輸入在商店後台的資訊

至「應用程式設定 > 基本資料」頁面，點按「應用程式密鑰」右側「顯示」按鈕後，複製「應用程式編號」與「應用程式密鑰」，再返回 SHOPLINE 商店後台進行設定。

 

步驟十二：返回 SHOPLINE 商店後台設定

路徑一

前往「商店後台 > 設定 > 顧客設定」點按「網店 Facebook 登入」右側開關。

 

開啟後將「應用程式編號（App ID）」及「應用程式密鑰（App Secret）」貼至對應欄位裡，並點「連接」，接著再點擊頁面右下角「更新」按鈕儲存設定，您的商店即可使用 Facebook 登入功能。

 

路徑二

前往「商店後台 > 第三方服務 > Facebook > 網店應用」分頁。點按「連接 Facebook Developer 帳號」右側的「連接」鈕。

 

將「應用程式編號（App ID）」及「應用程式密鑰（App Secret）」貼到對應的欄位中，並點擊「連接」。

 

開啟「網店 Facebook 登入」右側開關，您的商店即可使用 Facebook 登入。

 

步驟十三：將貴司相關同仁 Facebook 帳號新增為管理員

可新增貴司相關人員為此應用程式的管理員，以便後續維護管理。

開啟「應用程式角色 > 角色」頁面，點按「管理員」右側「新增用戶」，輸入您欲新增的人員姓名、fbid 或用戶名稱。

 

步驟十四：測試 Facebook 帳號一鍵註冊 / 登入功能

恭喜您設定完畢，最後請進入您的商店前台進行測試。

進入您商店的會員註冊/登入頁面，並點選「Facebook 註冊/登入」按鈕，會跳出 Facebook 視窗請求顧客登入並授權給您的應用程式（應用程式顯示名稱及圖示將顯示於此頁面）。

這時顧客須先授權 Facebook 登入應用程式存取資料，才能使用 Facebook 登入功能，若顧客選擇不授權，則無法使用 Facebook 登入功能。

 

＊提醒您：此功能設定步驟較多，如有操作設定上的問題，歡迎您向線上顧問提供問題畫面截圖，將盡快協助您處理。 

 

二、於相關頁面顯示「Facebook 登入」按鈕

請確認您的商店已開啟「網店 Facebook 登入」功能，詳情可參考設定步驟十一。

無論是透過上述何種方法，在串接完後皆會在以下頁面出現 Facebook 登入按鈕，顧客可直接點選登入：

＊注意：

• 上述 Facebook 登入按鈕的設定步驟不適用於 Shopper App。
  若您希望在 Shopper App 上顯示 Facebook 登入按鈕，請參考：Facebook 帳號快速註冊 / 登入會員｜Shopper App。 
• 唯有透過 Facebook 註冊的顧客才能使用 Facebook 登入功能。

1. 會員註冊/登入頁面

 

2. 一般結帳頁面：購物車、填寫資料畫面

 

 

3. 快速結帳頁面

 

 

延伸閱讀

Facebook 帳號快速註冊 / 登入會員常見問題與排除方法