2021.11.14 更新:原本文章是用 Version8 ,今日新增 Version 9 的程式碼。「範例及原始碼」的檔案也新增了 Version 9 的部份。
本篇要解決的問題
之前寫過一篇〈Firebase Authentication 第三方登入 – Google、FB〉,那時想說比較少人用 GitHub 登入,原本沒打算看 Firebase 用 GitHub 登入的部份。但最近在研究怎麼用 GitHub 的 Issues 當作頁面的留言版,發現必須要登入才能取得 Token,而 Firebase 用 GitHub 登入又很簡單,因此先寫這篇為後續作準備。
如果有用過 Firebase 的 Google、Facebook 等的第三方登入功能,那這篇看個一下子就會了,因為方式大同小異,就是取得 Client ID 跟 Client Secret 的方式不同而已。
建立 Firebase 專案、應用程式
這段在 建立 Firebase 專案、應用程式 中已經寫過,就不再重寫,最後得到引用 Firebase SDK 的程式碼如下:
開通 Authentication 功能
進到 Firebase 專案後台,選擇「Authentication > Sign-in method」,看見的一排登入商裡面就有 GitHub,點擊後會看到以下:
這一步最重要的就是上圖標示紅框的那個網址,我們下一步會需要這個網址。
用戶端 ID、用戶端密鑰,要到下一步才能取到,我們先進下一步。
建立 GiHub OAuth Apps 或 GitHub Apps
這一步是要在 GitHub 建立一個 App 出來,OAuth Apps 或 GitHub Apps 都可以,如果只是需要登入功能,那 OAuth Apps 就可以,如果還需要使用到 GitHub API,那就要用到 GitHub Apps。
本篇主要寫的是登入,因此以下會用的是 OAuth Apps。
GitHub Apps 會寫在之後使用 GitHub API 的相關文章中。
登入 GitHub 帳號後,進入以下網址:https://github.com/settings/developers
會看到以下畫面:
點擊「Register a new application」後會看到一個要填的表單:
其中最後一個「Authorization callback URL」要填的就是我們在上一步 Firebase Auth 上看到的那個 URL:
填寫完後按下「Register application」,就會建立好一個 OAuth App 了。
ID、密鑰填寫到 Firebase
在建立好的頁面上就可以看到 Client ID、Client secrets,這二個就是要填到 Firebase 上的用戶端 ID、用戶端密鑰:
點擊上圖的「Generate a new client secret」後會產生一組密鑰:
我們回到 Firebase 上,把 ID、密鑰都填上後按下儲存,Firebase 用 GitHub 登入的功能便開通了。
GitHub 登入
參考文件:使用GitHub和JavaScript進行身份驗證
GitHub 登入有二種,一種是新開一個 Popup 的小視窗,在小視窗中讓使用者登入自己的 GitHub 帳號;另一種是原頁整個轉到 GitHub 的登入頁面,登入回來後用 function 去取得使用者資料。
Popup Version 8
Popup Version 9
使用 Version 9 的 Firebase 版本,要先安裝 Firebase Package,專案開啟終端機並輸入:
npm install firebase 或 yarn add firebase
Token 是如果需要用到其它 GitHub API 時會要提供的,之後在寫使用 Issues API 時會寫到。
user 就是使用者的資料,有一些是我們可以抓下來,存到資料庫中的:
user.displayName: 顯示名稱
user.email: 電子信箱
user.emailVerified: 這個電子信箱是否有驗證
user.photoURL: 大頭照的路徑
user.uid: Firebase Auth 派給這個使用者的 User ID
除了 Firebase Authentication 後台可以看到有哪些使用者登入外,GitHub OAuth Apps 上也可以看到有多少使用者有用這個 App 進行過登入:
Redirect Version 8
Redirect 分成二個部份,一個是當登入按鈕被點擊時,另一個是頁面載入後要主動執行的。
按鈕被點擊時執行:
const providerGithub = new firebase.auth.GithubAuthProvider(); firebase.auth().signInWithPopup(providerGithub);
這一段會讓使用者轉到 GitHub 的登入頁面,使用者登入完後,會再回到原本的頁面,因此我們的頁面要寫一段 JS 讓 Firebase 抓使用者的資料:
這段當使用者登入回來後便會執行,也才抓得到使用者資料。
這邊抓的使用者資料就跟 Popup 的方式一樣,不再重寫。
Redirect Version 9
按鈕被點擊時執行:
import { getAuth, signInWithRedirect, GithubAuthProvider } from "firebase/auth"; const auth = getAuth(); const providerGithub = new GithubAuthProvider(); signInWithRedirect(auth, providerGithub);
回到頁面後抓使用者資料:
範例及原始檔
本篇實作的範例:
https://letswritetw.github.io/letswrite-firebase-auth-github/
登入以後,頁面下方會出現「登出」、「刪除我的帳號」二個按鈕,大家記得要把自己的帳號給刪除。
原始碼也整理在 Github 上:
https://github.com/letswritetw/letswrite-firebase-auth-github