ตรวจสอบสิทธิ์โดยใช้การเข้าสู่ระบบ Facebook ด้วย JavaScript

คุณสามารถให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Facebook ของผู้ใช้ด้วยการผสานรวมการเข้าสู่ระบบของ Facebook ในแอป คุณสามารถผสานรวมการเข้าสู่ระบบของ Facebook ได้โดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ หรือดำเนินขั้นตอนการเข้าสู่ระบบของ Facebook ด้วยตนเองและส่งโทเค็นเพื่อการเข้าถึงที่ได้ไปยัง Firebase

ก่อนเริ่มต้น

  1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
  2. ในเว็บไซต์ Facebook for Developers ให้รับรหัสแอปและข้อมูลลับของแอปสำหรับแอปของคุณ
  3. เปิดใช้การเข้าสู่ระบบ Facebook โดยทำดังนี้
    1. ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์
    2. ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้วิธีการลงชื่อเข้าใช้ Facebook และระบุ App ID และ App Secret ที่ได้รับจาก Facebook
    3. จากนั้นตรวจสอบว่า URI การเปลี่ยนเส้นทาง OAuth (เช่น my-app-12345.firebaseapp.com/__/auth/handler) อยู่ในรายการ URI การเปลี่ยนเส้นทาง OAuth ในหน้าการตั้งค่าของแอป Facebook ในเว็บไซต์ Facebook for Developers ในการกำหนดค่า การตั้งค่าผลิตภัณฑ์ > การเข้าสู่ระบบ Facebook

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้บัญชี Facebook ของผู้ใช้คือการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากต้องการตรวจสอบสิทธิ์ผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่นๆ ที่ไม่ใช่เบราว์เซอร์ คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างอินสแตนซ์ของออบเจ็กต์ผู้ให้บริการ Facebook ดังนี้

    Web Modular API

    import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();
    auth_facebook_provider_create.js

    API ที่ใช้เนมสเปซในเว็บ

    var provider = new firebase.auth.FacebookAuthProvider();
    facebook.js
  2. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์ หากต้องการเพิ่มขอบเขต โปรดติดต่อ addScope เช่น

    Web Modular API

    provider.addScope('user_birthday');
    auth_facebook_provider_scopes.js

    API ที่ใช้เนมสเปซในเว็บ

    provider.addScope('user_birthday');
    facebook.js
    โปรดดูเอกสารประกอบเกี่ยวกับผู้ให้บริการตรวจสอบสิทธิ์
  3. ไม่บังคับ: หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการให้เป็นภาษาที่ต้องการของผู้ใช้โดยไม่ต้องส่งพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดแจ้ง ให้อัปเดตโค้ดภาษาในอินสแตนซ์ Auth ก่อนเริ่มขั้นตอน OAuth เช่น

    Web Modular API

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    API ที่ใช้เนมสเปซในเว็บ

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. ไม่บังคับ: ระบุพารามิเตอร์ของผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่ต้องการส่งด้วยคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียก setCustomParameters ในผู้ให้บริการเริ่มต้นด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง เช่น

    Web Modular API

    provider.setCustomParameters({
  'display': 'popup'
});
    auth_facebook_provider_params.js

    API ที่ใช้เนมสเปซในเว็บ

    provider.setCustomParameters({
  'display': 'popup'
});
    facebook.js
    ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่จำเป็นซึ่งสงวนไว้และระบบจะไม่สนใจ โปรดดูรายละเอียดเพิ่มเติมใน ข้อมูลอ้างอิงของผู้ให้บริการการตรวจสอบสิทธิ์
  5. ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ Facebook คุณแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Facebook ได้ด้วยการเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ขอแนะนำให้ใช้วิธีเปลี่ยนเส้นทางในอุปกรณ์เคลื่อนที่
    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา signInWithPopup

      Web Modular API

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);

    // ...
  });
      auth_facebook_signin_popup.js

      API ที่ใช้เนมสเปซในเว็บ

      firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...

    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var accessToken = credential.accessToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });
      facebook.js
      นอกจากนี้ ให้สังเกตว่าคุณสามารถเรียกโทเค็น OAuth ของผู้ให้บริการ Facebook ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ API ของ Facebook

      นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์

    • หากต้องการลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ โปรดโทรหา signInWithRedirect โดยทำตามแนวทางปฏิบัติแนะนำเมื่อใช้ "signInWithRedirect"

      Web Modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      API ที่ใช้เนมสเปซในเว็บ

      firebase.auth().signInWithRedirect(provider);
      index.js
      จากนั้น คุณยังเรียกโทเค็น OAuth ของผู้ให้บริการ Facebook ได้ด้วยโดยเรียกใช้ getRedirectResult เมื่อหน้าเว็บโหลดขึ้นมา

      Web Modular API

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    const credential = FacebookAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });
      auth_facebook_signin_redirect_result.js

      API ที่ใช้เนมสเปซในเว็บ

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Facebook Access Token. You can use it to access the Facebook API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
      facebook.js
      นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คู่มือเอกสารนอกหน้าจอ

ขั้นตอนถัดไป

หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก ระบบจะสร้างบัญชีผู้ใช้ใหม่และลิงก์กับข้อมูลเข้าสู่ระบบ ซึ่งก็คือชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลของผู้ให้บริการการตรวจสอบสิทธิ์ ซึ่งผู้ใช้ที่ลงชื่อเข้าใช้ด้วย ระบบจะจัดเก็บบัญชีใหม่นี้เป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และสามารถใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ได้ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใด

  • สำหรับแอปของคุณ ทางที่แนะนำเพื่อให้ทราบถึงสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณจะรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User โปรดดูหัวข้อจัดการผู้ใช้

  • ในกฎความปลอดภัยของ Firebase Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth ได้ และใช้รหัสดังกล่าวเพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

คุณอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้ผู้ให้บริการการตรวจสอบสิทธิ์หลายรายได้โดยลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่

หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทรหา signOut:

Web Modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

API ที่ใช้เนมสเปซในเว็บ

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js