[筆記] Google, Facebook, Github OAuth 認證設定申請

章節連結

方前在網頁開發時,說要做個使用者登入介面串接,那最方便的選擇非 OAuth 2 的技術了。不過 Google, Facebook 和 Github 的設定頁面有些難尋,於是在這邊筆記一下。

verification oauth


OAuth2 申請頁面

Facebook

開發者首頁:https://developers.facebook.com/

首先,點選右上角的「我的應用程式」裡的「建立應用程式」。然後輸入應用程式名稱和Email,然後點選「建立」。
facebook oauth setting start
接著會進入到應用程式的儀表板,點選左邊的設定,並點開裡面的基本資料。在這邊你可以得到應用程式的編號和密碼(請勿將這兩組資料放在網路上供他人下載或得知。)
facebook oauth setting若要實作登入功能,點選左下角的「Facebook」登入,裡面的設定選項,並在裡頭輸入 Callback 的網址。不過這 Callback 的網址,有一定的要求如下:
1. Facebook 目前採取嚴格的 callback 網址格式 <your domain>/auth/facebook/callback
如:https://www.yourdomain.com/auth/facebook/callback。當 callback 的格式不對,那麼 Facebook 就不會回傳授權成功的指令。
2. Localhost 本機端的認證 callback 網址,只要符合格式即可。 Facebook 並不會儲存 localhost 的設定值,而是預設它只要符合格式就可以過關。github developer settings,Guide,HTML,JavaScript,selfStudyProgrammingRecord


Github

身為開發員常用的 Github,OAuth 的應用程式設定是在個人的設定頁面左下角,有一個 Developer Setting。
github oauth setting developer點選 OAuth Apps,並建立一個 New OAuth App。
github oauth setting apply輸入應用程式名稱、Homepage 的 URL、Callback 的網址,這樣就可以取得授權了。
github oauth setting 2點選左下角的 Register Application 後,你可以看到 Client ID 和 Secret 。一樣的,請勿在網路上公布這些資料。
github oauth setting


Google

開發者首頁:https://cloud.google.com/
若無專案,請先開啟一個新專案。google oauth setting

點選左方的導覽選單內,你可以找到「憑證」選項。
google oauth setting 2接著,你會看到 OAuth 同意畫面,並在裡面填入相關的設定:主要是在「已授權網域」這邊,填入 Domain 的位置即可,/後方的資訊都不用輸入。github developer settings,Guide,HTML,JavaScript,selfStudyProgrammingRecordgoogle oauth setting callback

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:25