Design News
網頁設計新知
Facebook APP ID 登入申請一次看，如何建立應用程式取得APP密鑰
Apr 25, 2023
目前網站的普及，以及行動裝置、社群媒體上的使用，
包含Facebook、Google、LINE、Twitter、微信、QQ、......等等。
早期會員登入必須記憶多組帳號、密碼，或者記憶多組信箱，
會員時常忘記自己當初設定的密碼，造成會員使用上的不方便，
這樣的情況，漸漸地都可以被改善。
近幾年來由於社群媒體的普及，註冊流程多新增社群帳號快速註冊會員，
簡化會員的註冊流程，讓使用者可以更快速的成為網站會員，
進行購物、或是其他流程之操作，絕大多數已經成為網站製作時的標準配置。
本篇則以Facebook快速登入的API申請做為帶入，(2023/04/25更新)
身為企業主，該如何建立Facebook APP ID登入之申請，
如何取得應用程式取得APP密鑰，都將於本篇為您做說明。
(由於各大社群媒體不定期會優化API的一些相關規定，所以有可能部分畫面會不太相同)
一、開啟Facebook開發者工具畫面
連結：https://developers.facebook.com/
並登入您的Facebook會員帳號，
如您是企業用戶，建議使用公司用之Facebook帳號作申請，
避免設定的人員離職後，後續若要變更設定無法登入，需要重新申請Facebook APP ID之金鑰。
如您是首次申請應用程式，登入過程中，Facebook系統將會進行驗證，請依據提示輸入對應資料即可。
二、前往「我的應用程式」。
進入畫面後，點選"紅框"標示之選單項目。
三、建立應用程式
點選"紅框"標示之「建立應用程式」按鈕，開始設定。
四、選擇應用程式類型
應用程式類型請選擇「消費者」(紅框)選項，接著按「繼續」。
五、新增應用程式名稱 (請勿直接填寫下方示意圖的文字，請依照您的實際情況做資料填寫，避免後續設定錯誤需重新申請審核)
六、為應用程式新增產品
設定完成後，請於主畫面點選「Facebook 登入」。(紅框)
七、請選擇此應用程式的平台。
請於主畫面點選「www網站」。(紅框)
八、設定API所需資訊。 此畫面僅需填寫以下欄位
告訴我們您的網址：請輸入欲使用此服務的完整網址，填寫完成後請按「Save」，接著按「繼續」。
此畫面共有 5 步驟，除第 1 步驟外，其餘可直接略過，接續步驟九。
進入設定後， 
預計需要檢附公司的營業登記、......等相關文件佐證，依照設定畫面做資料上傳。
十一、給資料保護長的聯絡資料
由於近年來針對使用者的個資保護更加嚴格，需填寫本企業針對GDPR個資部分的聯絡窗口資訊，請依據實際狀況做資料填寫即可。
十二、網站網域名稱填寫
預設帶入您的網站網址，例：https://www.grnet.com.tw。
指定欄位設定完成後請點選畫面下方「儲存變更」按鈕。
十三、進階資料
請點擊「左側選單>基本資料 > 進階」，請將「升級所有呼叫版本」版本提供給我們，此為網站串接Facebook登入之必要參數。
十四、應用程式審查>權限和功能
請點擊「左側選單 > 應用程式審查 > 權限和功能」，並將 email 和 public_profile 兩項權限變更為「進階存取權限」。
若未變更設定，網站程式將無法取得使用者於Facebook登入後相關資料。
權限變更成功後，原Standard Access 將會顯示成Advanced Access。
十五、變更為「上線」。
請點擊變更為「上線」。
十六、完成。
請您務必記得將「步驟九」中的「應用程式編號」與「應用程式密鑰」，以及「步驟十三」的「升級所有呼叫版本號」三項參數，
提供給您的鉅潞服務窗口，此為網站整合Facebook登入必要之參數，即可完成此次Facebook登入服務申請。
#facebook #API #FB快速登入 #FB註冊 #購物網站 #會員登入 #社群登入 #社群
包含Facebook、Google、LINE、Twitter、微信、QQ、......等等。
早期會員登入必須記憶多組帳號、密碼，或者記憶多組信箱，
會員時常忘記自己當初設定的密碼，造成會員使用上的不方便，
這樣的情況，漸漸地都可以被改善。
近幾年來由於社群媒體的普及，註冊流程多新增社群帳號快速註冊會員，
簡化會員的註冊流程，讓使用者可以更快速的成為網站會員，
進行購物、或是其他流程之操作，絕大多數已經成為網站製作時的標準配置。
本篇則以Facebook快速登入的API申請做為帶入，(2023/04/25更新)
身為企業主，該如何建立Facebook APP ID登入之申請，
如何取得應用程式取得APP密鑰，都將於本篇為您做說明。
(由於各大社群媒體不定期會優化API的一些相關規定，所以有可能部分畫面會不太相同)
一、開啟Facebook開發者工具畫面
連結：https://developers.facebook.com/並登入您的Facebook會員帳號，
如您是企業用戶，建議使用公司用之Facebook帳號作申請，
避免設定的人員離職後，後續若要變更設定無法登入，需要重新申請Facebook APP ID之金鑰。
如您是首次申請應用程式，登入過程中，Facebook系統將會進行驗證，請依據提示輸入對應資料即可。
二、前往「我的應用程式」。
進入畫面後，點選"紅框"標示之選單項目。
三、建立應用程式
點選"紅框"標示之「建立應用程式」按鈕，開始設定。
四、選擇應用程式類型
應用程式類型請選擇「消費者」(紅框)選項，接著按「繼續」。
五、新增應用程式名稱
- 「顯示名稱」請輸入您所希望顯示的名稱，使用者使用Facebook登入時即會顯示此名稱，請勿直接填寫下圖資訊。(紅框)
- 「應用程式聯絡電子郵件地址」請輸入您的電子信箱，未來臉書有應用程式相關通知即會發送信件通知您。(綠框)
- 以上填寫完成後，請點選「建立應用程式」進行下一步。(藍框)
六、為應用程式新增產品
設定完成後，請於主畫面點選「Facebook 登入」。(紅框)
七、請選擇此應用程式的平台。
請於主畫面點選「www網站」。(紅框)
八、設定API所需資訊。
告訴我們您的網址：請輸入欲使用此服務的完整網址，填寫完成後請按「Save」，接著按「繼續」。
此畫面共有 5 步驟，除第 1 步驟外，其餘可直接略過，接續步驟九。
九、設定>基本資料。
延續上一步驟，請直接點選左側選單，選擇「設定」>「基本資料」。進入設定後，
- 請將「應用程式編號」與「應用程式密鑰」提供給鉅潞，此為網站串接Facebook登入之必要參數。
- 「應用程式網域」必填，請輸入您的網域，不需有 http 或 https 開頭，例：www.grnet.com.tw。
- 「聯絡電子郵件」必填，預設將自動帶入「步驟五」所設定的信箱。
- 「隱私權政策網址」和「服務條款網址」必填，請輸入網站實際頁面網址即可，網址均需為https 開頭。
※ 隱私權政策須符合Facebook之規範，實用工具：隱私權政策產生器
- 「用戶資料刪除」必填，可輸入和上方隱私權網址相同網址。
- 「應用程式圖示」非必填，可自行選擇是否上傳對應 icon，一般會使用企業主本身的網站LOGO，並依照畫面規範之圖片規則做上傳。
- 「類別」請選擇「購物」或依據您的實際需求做選擇。
十、驗證
近期為了確認企業主真實身分，新增「商家驗證」機制，需要提交企業相關資料，由Facebook做商家身分審核。預計需要檢附公司的營業登記、......等相關文件佐證，依照設定畫面做資料上傳。
十一、給資料保護長的聯絡資料
由於近年來針對使用者的個資保護更加嚴格，需填寫本企業針對GDPR個資部分的聯絡窗口資訊，請依據實際狀況做資料填寫即可。
十二、網站網域名稱填寫
預設帶入您的網站網址，例：https://www.grnet.com.tw。
指定欄位設定完成後請點選畫面下方「儲存變更」按鈕。
十三、進階資料
請點擊「左側選單>基本資料 > 進階」，請將「升級所有呼叫版本」版本提供給我們，此為網站串接Facebook登入之必要參數。
十四、應用程式審查>權限和功能
請點擊「左側選單 > 應用程式審查 > 權限和功能」，並將 email 和 public_profile 兩項權限變更為「進階存取權限」。
若未變更設定，網站程式將無法取得使用者於Facebook登入後相關資料。
權限變更成功後，原Standard Access 將會顯示成Advanced Access。
十五、變更為「上線」。
請點擊變更為「上線」。
十六、完成。
請您務必記得將「步驟九」中的「應用程式編號」與「應用程式密鑰」，以及「步驟十三」的「升級所有呼叫版本號」三項參數，
提供給您的鉅潞服務窗口，此為網站整合Facebook登入必要之參數，即可完成此次Facebook登入服務申請。
#facebook #API #FB快速登入 #FB註冊 #購物網站 #會員登入 #社群登入 #社群