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

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

ก่อนจะเริ่ม

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

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

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

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

  1. สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Facebook:

    เว็บรุ่น 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    เว็บรุ่น8

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

    เว็บรุ่น 9

    provider.addScope('user_birthday');

    เว็บรุ่น8

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

    เว็บรุ่น 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    เว็บรุ่น8

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

    เว็บรุ่น 9

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

    เว็บรุ่น8

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

      เว็บรุ่น 9

      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;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      เว็บรุ่น8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // 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;
      
          // ...
        });
      นอกจากนี้ โปรดทราบด้วยว่าคุณสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Facebook ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Facebook API

      นี่คือที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายชื่อของรหัสข้อผิดพลาดมีลักษณะที่มี การตรวจสอบสิทธิ์การอ้างอิงเอกสาร

    • เพื่อเข้าสู่ระบบโดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้โทร signInWithRedirect :

      เว็บรุ่น 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      เว็บรุ่น8

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

      เว็บรุ่น 9

      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;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      เว็บรุ่น8

      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;
        }).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;
          // ...
        });
      นี่คือที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายชื่อของรหัสข้อผิดพลาดมีลักษณะที่มี การตรวจสอบสิทธิ์การอ้างอิงเอกสาร

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

หากคุณกำลังสร้างแอปส่วนขยาย Chrome คุณต้องเพิ่มรหัสส่วนขยาย Chrome ของคุณ:

  1. เปิดโครงการใน คอนโซล Firebase
  2. ในส่วนการตรวจสอบความถูกเปิดเข้าสู่ระบบในหน้าวิธีการ
  3. เพิ่ม URI เช่นต่อไปนี้ในรายชื่อของผู้มีอำนาจโดเมน:
    chrome-extension://CHROME_EXTENSION_ID

ป๊อปอัพเฉพาะการดำเนินงาน ( signInWithPopup , linkWithPopup และ reauthenticateWithPopup ) พร้อมที่จะให้ส่วนขยายของ Chrome เป็นส่วนขยายของ Chrome ไม่สามารถใช้ HTTP เปลี่ยนเส้นทาง คุณควรเรียกใช้เมธอดเหล่านี้จากสคริปต์ของเพจพื้นหลังแทนที่จะเป็นป๊อปอัปการดำเนินการของเบราว์เซอร์ เนื่องจากป๊อปอัปการตรวจสอบสิทธิ์จะยกเลิกป๊อปอัปการดำเนินการของเบราว์เซอร์ วิธีการป๊อปอัพอาจจะใช้เฉพาะในส่วนขยายการใช้ Manifest V2 ใหม่ Manifest V3 เพียง แต่ช่วยให้สคริปต์พื้นหลังในรูปแบบของคนงานบริการซึ่งไม่สามารถดำเนินการป๊อปอัพที่ทุกคน

ในส่วนขยายของ Chrome ของคุณทำให้ไฟล์ที่ประจักษ์แน่ใจว่าคุณเพิ่ม https://apis.google.com URL ไป content_security_policy allowlist

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

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

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

  • ในฐานข้อมูล Firebase เรียลไทม์และการจัดเก็บเมฆ กฎการรักษาความปลอดภัย , คุณจะได้รับการลงนามใน ID ผู้ใช้ของผู้ใช้ที่ไม่ซ้ำกันจาก auth ตัวแปรและใช้ในการควบคุมสิ่งที่ข้อมูลที่เข้าถึงผู้ใช้สามารถ

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

ออกจากระบบผู้ใช้โทร signOut :

เว็บรุ่น 9

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

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

เว็บรุ่น8

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