產品開發 | 如何在Localhost實作與測試FB Login SDK功能
使用ngrok將localhost變成可連結外網的Server，然後以JavaScript實作FB Login登入按鈕
最近正在著手開發一個新的產品項目，其中一個功能會需要支援FB Login，因此再尚未正式部署至Heroku或AWS等Web Server之前，完成產品正式上線前，會需要先在本地端做產品功能的測試。
因此我們大概花了一些時間一直在閱讀FB的開發者文件，和搜尋網路上的文章，來研究如何將Localhost，也就是電腦本機的伺服器與FB Login進行串接。
因此今天就與大家來分享，如何在Localhost實作與測試FB Login SDK功能。(我們是使用Mac OS環境來做開發)
一、申請一組FB Developer應用程式
前往FB Develop網頁，並申請一組帳號註冊成為FB Developer會員，接者點選我的應用程式，新增一組FB應用程式。
進入我的應用程式頁面後，點擊建立應用程式，FB會詢問你的應用程式是屬於哪一種類別，如消費者、商家等，這邊要特別注意，不同類別的FB應用程式會影響到你可以取用FB API的類型，如若你新增一組「商家類別」的FB應用程式，那你在使用FB API做開發時，你將不能取得用戶FB friend list好友名單，因為這隻API程式是提供給消費者類型的FB應用程式，不是給商家類型所使用。
確認好FB應用程式類型後，就會進入FB應用程式的開發者後台，在「主控台」的地方你可以自行選擇要添加哪些FB的產品加入你的應用程式當中。
Facebook登入是我們這次會需要用到的FB Login功能，這邊先以Facebook登入做示範。
設定好我的FB應用程式的產品功能後，點擊左側導覽頁「設定」>「基本資料」，可以設定該應用程式的基本基料。
這邊需注意「應用程式網域」的地方，因為我們將會使用localhost作為測試用的Web Server，因此在應用程式網域中我需填入localhost，若你是在Heroku或AWS上進行測試，則填入該應用程式所在的網域即可。
基本資料設定完成後，我們可以前往「設定」>「進階」，在升級API版本這邊可以查看目前FB API的版本是否為最新。
確認目前FB應用程式的 API版本是非常重要的一環，因為FB不定期就會更新他們的API版本，若未來在運行FB應用程式時，發現有些API無法正常運作，可能就是因為FB API版本異動的緣故所導致。目前FB API版本為v11.0。
二、設定ngrok，將我們的localhost變成可以與對外溝通的Web Server
我們的電腦其實本身也就是一台Web Server，只要在瀏覽器中輸入http://localhost 或 http://127.0.0.1 就可以在瀏覽器中顯示本機伺服器端的頁面，但是有些開發場景，你就一定需要由外網可以連線到你的本地 server，常見的例如：Chatbot：聊天機器人通常會設定一個Webhooks URL，讓服務端（如 Line、Facebook）可以將訊息發佈到你的伺服器上面，金流系統：在串接金流的時候，通常都會需要有個Return URL回傳網址，在金流付款成功後將結果送到你的伺服器上面，抑或是各類API等。
因此尚未將電腦中開發的程式碼部署至正式環境前，我們會需要一種方式，將我們的電腦變成可以與外界溝通的Web Server，而ngrok就可以完美地幫我們解決這個問題。
首先我們前往ngrok官網註冊一組會員帳號，註冊完成後就可以開始下載ngrok應用程式。
下載完成並並解壓縮後，會看到一個ngrok的應用程式，將該應用程式放到/usr/local/bin/這個目錄底下。
設定好後，我們回到ngrok官網，你會看到他會給你一組ngrok Access Token，開啟電腦的終端機，把下面的那組Command Line 「./ngrok authtoken Your Access Token」輸入到你的電腦終端機中，他會顯示verify的字樣，代表已完成ngrok應用程式授權。
接著，再開啟電腦的終端機，輸入「ngrok http 5500」，5500是指localhost的端口，接著ngrok就會吐出兩個URL網址給你，一個是http，另一個是https，他們兩個都會指向到你的localhost。
但由於我們的電腦不會像Heroku或AWS一樣24小時不間斷運行的Web Server，因此每次當我們重新啟動ngrok時，他都會自動新生成一組新的
上面有一串http://127.0.0.1:4040，這個是指ngrok的監聽位址，不要與localhost的位置混淆。
這邊要特別注意，ngrok雖然給了我們兩組URL都可以讓我們的localhost變成可與外部連接的Web Server，但由於FB Develop應用程式規範，目前FB Login只會支援https的URL網址，因此我們這邊要選用ngrok所供給我們的https url。
三、設定FB login應用程式登入功能
我們回到FB Develop官網，在左側導覽這邊，選擇「商品」>「Facebook登入」>「設定」會進入到用戶端OAuth設定。
因目前FB Develop開發政策緣故，強制所有的用戶端OAuth都要「對重新導向URL使用Strcit模式」，這導致我們一定要使用帶有https的URL連結，才能被FB認定為是「有效的OAuth重新導向URL」，因此我們把剛剛ngrok產生的那串https網址，貼到FB「有效的OAuth重新導向URL」裏面。
設定完成後，我們前往「商品」>「Facebook登入」>「快速入門」，這邊以網站作為舉例，點擊網站後，FB會跳出一段網址，這邊也是輸入剛剛ngrok給我們的https url。
接著FB會給你一串FB Login 的JavaScript SDK，這時我們可以點擊複製，將這段程式碼貼到我們的程式碼編譯器之中，這段程式碼要放在html檔案中的<body>標籤之後，讓此html在瀏覽器渲染時，可以讀取到這段FB Login SDK。
設定好後，我們要在將FB Login Check的這段JavaScript Function放到JS的檔案之中，來確認當用戶點擊我們網頁上的FB Login時，FB Server回傳給我們的Response是否有成功帶出該用戶的登入資訊。
最後FB會提供你一組制式的FB Login按鈕，讓你可以放在html文件上，在瀏覽器渲染時，用戶可以在網頁上看到「使用FB登入」的按鈕，但你也可以參考下方另一份文件來製作FB Login登入按鈕。
都確認上述步驟沒有問題後，就可以在Localhost開始進行測試，以FB帳號順利登入了。
感謝各位朋友的支持與鼓勵!
當你／妳閱讀完這篇文章後，請依喜歡與實用程度給我1–10個拍手。
讓我能了解各位朋友寶貴的回饋意見，撰寫更優質的內容分享給你/妳!
