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


Firebase นั้นมี API สำหรับการทำ  Authentication โดย Google Account โดยมีขั้นตอนดังต่อไปนี้


ไปที่ 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>