ตัวอย่างการทำ Firebase Authentication Login โดย Google Account

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 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>