Firebase นั้นมี API สำหรับการทำ Authentication โดย Google Account โดยมีขั้นตอนดังต่อไปนี้
รับเขียนโปรแกรม Firebase Javascript
ไปที่ https://console.firebase.google.com/
ดูการตั้งค่าโครงการสำหรับ javascript โดยไปที่รูปเฟืองด้านบนซ้าย
เลือกดูการตั้งค่า Firebase สำหรับ Web เมื่อกดแล้วหน้าเว็บจะขึ้น popup code
การตั้งค่า ให้ copy code มาไว้ในไฟล์ html ของเว็บ
เมื่อตั้งค่า Firebase สำหรับเว็บแล้วให้เลือกแถบ Authentication ด้านซ้าย
เลือกวิธีการลงชื่อเข้าใช้
เลือก google
เลือกเปิดการใช้งาน
ตัวอย่าง Code การทำ Authentication ด้วย google
<!DOCTYPE html>
<html lang="th">
<head>
<title>Firebase Google Authentication</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" ></script>
<script src="https://www.gstatic.com/firebasejs/5.5.9/firebase.js"></script>
<script>
// ตั้งค่า Firebase สามารถ ดูได้ตามรูปที่ 2
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div class="container">
<br /><br />
<div id="login_panel" class='text-right' >
<!-- สร้างปุ่มเข้าสู่ระบบโดยกำหนดให้ยังไม่แสดงในครั้งแรก -->
<button class="btn btn-primary btn_login " style="display:none" >
<i class="fa fa-key" ></i> เข้าสู่ระบบ
</button>
<!-- สร้าง span สำหรับ -->
<span class="user_info" ></span>
<!-- สร้าง ออกจากระบบ ระบบโดยกำหนดให้ยังไม่แสดงในครั้งแรก -->
<button class="btn btn-danger btn_sign_out " style="display:none" >
<i class="fa fa-sign-out-alt" ></i> ออกจากระบบ
</button>
</div>
<script>
//bind event กำหนด function การทำงานเมื่อ กดปุ่ม เข้าสู่ระบบ
$("#login_panel").find(".btn_login").on("click",function(){
//เมื่อกดปุ่มเข้าสู่ระบบแล้ว ให้ไปที่ หน้าจอของ google
var GoogleAuthProvider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(GoogleAuthProvider);
});
//bind event กำหนด function การทำงานเมื่อ กดปุ่มออกจากระบบ
$("#login_panel").find(".btn_sign_out").on("click",function(){
//คำสั่ง ออกจการะบบ ของ firebase
firebase.auth().signOut().then(function() {
});
});
//ชุดคำสั่งของ firebase เมื่อมีการเปลี่ยนแปลงสถานะการ login
firebase.auth().onAuthStateChanged(function(user) {
if (user)
// เมื่อผู้ใช้อยู่ใน สถานะ login
{
console.log(user);
$("#login_panel").find(".btn_login").css("display","none");
//ซ่อนปุ่ม เข้าสู่ระบบ
$("#login_panel").find(".btn_sign_out").css("display","");
//แสดงปุ่ม ออกจากระบบ
$("#login_panel").find(".user_info").html(user.displayName);
//แสดงชื่อผู้ใช้ ที่ login
}
else
// เมื่อผู้ใช้ไม่ได้อยู่ใน สถานะ login
{
$("#login_panel").find(".btn_login").css("display","");
//แสดงปุ่ม เข้าสู่ระบบ
$("#login_panel").find(".btn_sign_out").css("display","none");
//ซ่อนปุ่ม ออกจากระบบ
$("#login_panel").find(".user_info").html("");
//ซ่อนชื่อผู้ใช้
}
});
</script>
</div>
</body>
</html>
