Firebase使用Google賬號登入

在本章中，我們將介紹如何在Firebase中設定Google身份驗證。

第1步 - 啟用Google身份驗證
開啟Firebase資訊中心，然後點選左側選單中的身份驗證。要開啟可用方法的列表，需要在標籤選單中單擊登入方法。

現在可以從列表中選擇Google，啟用它並儲存。參考下圖 -

第2步 - 建立登入按鈕
建立一個檔案:index.html，並將新增兩個按鈕。參考程式碼如下 -

<button onclick = "googleSignin()">使用Google賬號登入</button>
<button onclick = "googleSignout()">Google賬號登出</button>

第3步 - 登入和退出
在這一步中，我們將建立用於登入和登出的兩個函式:googleSignin和googleSignout。這裡將使用signInWithPopup()和signOut()函式。

範例

讓我們來看看下面的例子。參考函式的實現 -

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

function googleSignin() {
   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 googleSignout() {
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')  
   });
}

完整的程式碼如下 -

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>FireBase Example</title>
        <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
        <script>
          // Initialize Firebase
          var config = {
            apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
            authDomain: "yiibai-firebase.firebaseapp.com",
            databaseURL: "https://yiibai-firebase.firebaseio.com/",
            projectId: "yiibai-firebase",
            storageBucket: "yiibai-firebase.appspot.com",
            messagingSenderId: "334522625008"
          };
          firebase.initializeApp(config);

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

        function googleSignin() {
           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 googleSignout() {
           firebase.auth().signOut()

           .then(function() {
              console.log('Signout Succesfull')
           }, function(error) {
              console.log('Signout Failed')  
           });
        }
        </script>
    </head>
<body>
    <button onclick = "googleSignin()">使用Google賬號登入</button>
    <button onclick = "googleSignout()">Google賬號登出</button>
</body>
</html>

重新整理頁面後，可以點選使用Google賬號登入按鈕觸發Google彈出視窗。如果登入成功，開發者控制台將登入指定的使用者賬號。

也可以點選Google賬號登出按鈕從應用程式登出。控制台將顯示確認登出成功。