Firebase - Github 身份驗證

在本章中，我們將向你展示如何使用 GitHub API 驗證使用者。

步驟 1 - 啟用 GitHub 身份驗證

開啟 Firebase 控制面板，從側邊欄中點選“身份驗證”，然後在標籤欄中點選“登入方法”。你需要啟用 GitHub 身份驗證並複製“回撥 URL”。你會在步驟 2 需要它。你在完成步驟 2 後需要新增“客戶端 ID”和“客戶端密匙”，因此你可以將此標籤頁保持開啟狀態。

步驟 2 - 建立 GitHub 應用

按照 此連結 建立 GitHub 應用。你需要將 Firebase 中的“回撥 URL”複製到“授權回撥 URL”欄位中。建立你的應用後，你需要將 GitHub 應用中的“客戶端金鑰”和“客戶端密匙”複製到 Firebase。

步驟 3 - 建立按鈕

我們將在“主體”標籤中新增兩個按鈕。

index.html

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

步驟 4 - 建立 Auth 函式

我們將在“index.js”檔案中建立用於登入和登出的函式。

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

現在我們可以點選按鈕來觸發身份驗證。控制檯將顯示身份驗證成功。