在本章中,我們將介紹如何在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賬號登出按鈕從應用程式登出。控制台將顯示確認登出成功。