FirebaseMean StackNode Js

สร้าง Web App สำหรับเข้าระบบ Authentication ด้วย Firebase

Photo of Asst. Prof. Banyapon Poolsawas Asst. Prof. Banyapon PoolsawasOctober 1, 2017
4 6,988 4 minutes read

บทเรียนสำหรับสาย Web App ที่ชื่นชอบ JavaScript สำหรับการใช้ระบบ Authentication ของ Firebase อย่างง่าย

บทเรียนก่อนหน้านี้: Labs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์

เป็นการแนะนำขึ้นตอนการ Init ตัว Firebase Project ของเรามาแก้ไขแล้วสร้าง Deploy ใหม่ขึ้นสู่ระบบ โดยใช้ Material Design Lite จากเว็บไซต์ http://getmdl.io เป็น UI สำหรับออกแบบ ในตัวอย่างนี้เช่นกันเราจะทำการสร้าง App ของ Firebase ขึ้นมาใหม่ แล้วให้ init ส่วนของ Hosting และ Database อีกครั้ง

เตรียม Project:

firebase init

เลือกแค่ Database และ Hosting

ทดสอบให้รันคำสั่ง

firebase serve

ทำการเปลี่ยน Rule ให้ของ Database ให้เรียบร้อย แต่เพียงแค่ว่ารอบนี้เราจะใช้งาน Authentication ให้เราเข้าไปเปิดระบบของ Authentication ส่วนของ Email ให้เรียบร้อย

ต่อมาให้เราเปิดไฟล์ public/index.html ในเครื่องเราให้พร้อม ทำการเคลียร์ไฟล์ index.html ให้  clean ที่สุด แล้วเพิ่ม mdl เข้าไปให้ทำงานส่วนของ css และ js

<head>
  <title>Firebase Authentication</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

ภายใต้ Tag ของ <body> ก่อนปิด </body> ให้แทรก code ส่วนของการออกแบบหน้าจอ Login เข้าไปดังนี้:

<div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--scroll">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Login</span>
      
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="register.html">Register</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content" style="padding-top: 60px;" align="center">
    <!-- Your content goes here -->
    <h1>Login to Admin</h1>
    <form>
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Segments</th>
          <th><div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Email</td>
          <td>
            <div class="mdl-textfield mdl-js-textfield">
              <input class="mdl-textfield__input" type="email" id="email">
              <label class="mdl-textfield__label" for="email">Email...</label>
            </div>
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Password</td>
          <td>
            <div class="mdl-textfield mdl-js-textfield">
              <input class="mdl-textfield__input" type="password" id="password">
              <label class="mdl-textfield__label" for="password">...</label>
              <span class="mdl-textfield__error"></span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
            <button id="sign-in" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
              Submit
            </button>
          </td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
            <a href="register.html">Create new Account</a>
          </td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
              Console:
          </td>
          <td>
            <div class="panel panel-danger" id ="errors" style='display: none;'>       
            </div>
            <div class="panel panel-primary" id ="success" style='display: none;'>
            </div>
            <div class="col-xs-2"></div>
            <div class="row"></div>
          </td>
        </tr>
      </tbody>
    </table>
    </form>
    </div>
  </main>
</div>

ลองทดสอบผลลัพธ์เล็กน้อย โดยการไปที่ http://localhost:5000 จะเห็นผลลัพธ์ดังนี้

ส่วนของการทำงาน Action ของการกดปุ่ม Submit จะให้ javascript มา Control อีกทีเพื่อส่งข้อมูลไปตรวจสอบกับ Firebase ดังนั้นส่วนของ Javascript จะเป็นดังนี้

ไปที่เว็บไซต์ https://console.firebase.google.com กดที่ ไอคอนรูปเฟืองหรือ Setting ทำการ Add Application ใหม่

โดยให้เราเลือก Web

ทำการ Copy Script ที่ได้ไปวางก่อนปิด Body

ดังนั้นก่อนปิด </body> ของเราจะเป็นดังนี้:

<!--Include firebase.js  -->
  <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
  
  <!--Configure firebase-->
  <script>
    // Visit https://console.firebase.google.com/project/<your project id>/overview and click on "Add Firebase to your web app"
    // Initialize Firebase
  var config = {
    apiKey: "<<ใส่ apiKey>>",
    authDomain: "<<ใส่ authDomain>>",
    databaseURL: "<<ใส่ databaseURL>>",
    projectId: "<<ใส่ projectId>>",
    storageBucket: "<<ใส่ storageBucket>>",
    messagingSenderId: "<<ใส่ messagingSenderId>>"
  };
  firebase.initializeApp(config);
</script>

เมื่อตั้งค่าเป็นที่เรียบร้อยแล้วก็ได้เวลา Customise ส่วนของการเข้าระบบให้แทรก Javascript ต่อไปนี้ก่อนปิด </script> ข้างบน

document.getElementById("sign-in").onclick = function(e) {
    e.preventDefault();
    handleSignUp();
  }

  function handleSignUp() {
    var errors = document.getElementById('errors');
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    var warnings = "";

    if (email.length < 4) {
      warnings += 'You need a valid email chief <br/>';
    }
    if (password.length < 4) {
      warnings += 'You need a valid password boss <br/>';
    }

    if (warnings != "") {
      console.log(warnings);
      errors.style.display = 'block';
      errors.innerHTML = warnings;
    } else {
      errors.style.display = "none";
      firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        errors.style.display = (errors.style.display === "none" || errors.style.display === "") ? "block" : "none";
        console.log(error);
        errors.innerHTML = error + "<br/>";
      });
    }
  }

  // Once a user is created with the email/login
  // Notify when he/she is logged in
  firebase.auth().onAuthStateChanged(user => {  
    if (user) {
      var fireBase_name = user.displayName;
      var fireBase_email = user.email;
      var fireBase_emailVerified = user.emailVerified;
      var fireBase_uid = user.uid;
      var success = document.getElementById('success');
      success.style.display = (success.style.display === "none" || success.style.display === "") ? "block" : "none";
      success.innerHTML = "User Logged in with Credentials: <br />" +
        "<b>Name:</b> " + fireBase_name + "<br />" + 
        "<b>Email: </b>" + fireBase_email + "<br />" + 
        "<b>emailVerified: </b>" + fireBase_emailVerified + "<br />" + 
        "<b>uid: </b>" + fireBase_uid + "<br />";
        window.location.href = "main.html";
    } 
  });

  firebase.auth().signOut().then(function() {
    // Sign-out successful.
  }, function(error) {
    // An error happened.
  });

หลังขั้นตอนนี้ให้สร้างหน้า main.html ขึ้นมาเปล่าๆ เพื่อให้เวลาเข้าระบบเสร็จ redirect ไปหน้านั้น

การทำงานหลักๆคือ เมื่อกดปุ่ม sign-in จะมีการเรียกตรวจสอบ Field ของ Textbox ว่าว่างหรือมีข้อมูลยาวตามที่ตกลงหรือไม่ หลังจากนั้น การทำงานเข้าระบบจริงๆ คือส่วนนี้:

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        errors.style.display = (errors.style.display === "none" || errors.style.display === "") ? "block" : "none";
        console.log(error);
        errors.innerHTML = error + "<br/>";
});

การส่ง email และ password ผ่าน Method ที่ชื่อ signInWithEmailAndPassword() ก็จะเป็นการเข้าระบบได้อย่างสมบูรณ์เราสามารถทดสอบได้โดยการไปเพิ่ม ข้อมูลบน Firebase หรือสร้างหน้า Register.html ขึ้นมารองรับ

ไฟล์หน้า Register.html ให้ทำการออกแบบดังนี้:

<h1>Create new account</h1>
    <form>
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Segments</th>
          <th><div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Email</td>
          <td>
            <div class="mdl-textfield mdl-js-textfield">
              <input class="mdl-textfield__input" type="email" id="email">
              <label class="mdl-textfield__label" for="email">Email...</label>
            </div>
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Password</td>
          <td>
            <div class="mdl-textfield mdl-js-textfield">
              <input class="mdl-textfield__input" type="password" id="password">
              <label class="mdl-textfield__label" for="password">...</label>
              <span class="mdl-textfield__error"></span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
            <button id="sign-in" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
              Create
            </button>
          </td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
            <a href="login.html">Already have account</a>
          </td>
          <td>
            
          </td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">
              Console:
          </td>
          <td>
            <div class="panel panel-danger" id ="errors" style='display: none;'>       
            </div>
            <div class="panel panel-primary" id ="success" style='display: none;'>
            </div>
            <div class="col-xs-2"></div>
            <div class="row"></div>
          </td>
        </tr>
      </tbody>
    </table>
    </form>
    </div>

ส่วนของ Javascript จะแตกต่างหน่อยคือเรียก Method ของ firebase คนละตัวการใช้งานคือ

<!--Include firebase.js  -->
  <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
  
  <!--Configure firebase-->
  <script>
    // Visit https://console.firebase.google.com/project/<your project id>/overview and click on "Add Firebase to your web app"
    // Initialize Firebase
  var config = {
    apiKey: "<<ใส่ apiKey>>",
    authDomain: "<<ใส่ authDomain>>",
    databaseURL: "<<ใส่ databaseURL>>",
    projectId: "<<ใส่ projectId>>",
    storageBucket: "<<ใส่ storageBucket>>",
    messagingSenderId: "<<ใส่ 215120056254>>"
  };
  firebase.initializeApp(config);

  document.getElementById("sign-in").onclick = function(e) {
    e.preventDefault();
    handleSignUp();
    
  }

  function handleSignUp() {
    var errors = document.getElementById('errors');
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    var warnings = "";

    if (email.length < 4) {
      warnings += 'You need a valid email chief <br/>';
    }
    if (password.length < 4) {
      warnings += 'You need a valid password boss <br/>';
    }

    if (warnings != "") {
      console.log(warnings);
      errors.style.display = 'block';
      errors.innerHTML = warnings;
    } else {
      errors.style.display = "none";
      firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
        errors.style.display = (errors.style.display === "none" || errors.style.display === "") ? "block" : "none";
        console.log(error);
        errors.innerHTML = error + "<br/>";
      });
    }
  }

  // Once a user is created with the email/login
  // Notify when he/she is logged in
  firebase.auth().onAuthStateChanged(user => {  
    if (user) {

      var fireBase_name = user.displayName;
      var fireBase_email = user.email;

      var fireBase_emailVerified = user.emailVerified;
      var fireBase_uid = user.uid;
      var success = document.getElementById('success');
      success.style.display = (success.style.display === "none" || success.style.display === "") ? "block" : "none";
      success.innerHTML = "User Logged in with Credentials: <br />" +
        "<b>Name:</b> " + fireBase_name + "<br />" + 
        "<b>Email: </b>" + fireBase_email + "<br />" + 
        "<b>emailVerified: </b>" + fireBase_emailVerified + "<br />" + 
        "<b>uid: </b>" + fireBase_uid + "<br />";
        window.location.href = "main.html";
    } 

  });


  firebase.auth().signOut().then(function() {
    // Sign-out successful.
  }, function(error) {
    // An error happened.
  });
  </script>

ดังนั้นหากทำการทดสอบจะเห็นว่า เราสามารถ Register เข้าไปใหม่ได้

ลองกรอกข้อมูลดูจะมี Console Log บอกหน้าเว็บไซต์ ส่วนข้อมูลจะปรากฏข้างบนระบบ firebase ดังนี้:

ดังนั้นๆ เราจะได้ระบบ Firebase Authentication คร่าวๆ มาใช้งานแล้ว ขั้นตอนต่อไปไปคือ การเพิ่มข้อมูลเข้าไปในระบบของ Firebase ผ่าน Real-Time Database พร้อมอัพโหลดรูปเข้า Storage ในบทความต่อไป:

ระหว่างนี้จะอัพเด็ตทั้งฝั่ง Android ควบคู่กันไปด้วยนะครับ

Tags
Photo of Asst. Prof. Banyapon Poolsawas Asst. Prof. Banyapon PoolsawasOctober 1, 2017
4 6,988 4 minutes read
Photo of Asst. Prof. Banyapon Poolsawas

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

สร้างเกม Unity ร่วมกับ Firebase การใช้ Firebase Authentication

December 28, 2017

สร้าง Real-Time LiveChat ด้วย NodeJs, Express และ Socket.io

February 28, 2016

เขียนแอพ Android รับค่า Realtime Database จาก CMS ของ Firebase

October 14, 2017

Labs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์

June 29, 2017
Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน