Google is committed to advancing racial equity for Black communities. See how.
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

รับรองความถูกต้องโดยใช้ Facebook เข้าสู่ระบบด้วย JavaScript

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

ก่อนที่คุณจะเริ่ม

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

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

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

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

  1. สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Facebook:
    var provider = new firebase.auth.FacebookAuthProvider();
    
  2. ทางเลือก : ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณต้องการขอจากผู้ให้บริการการพิสูจน์ตัวตน หากต้องการเพิ่มขอบเขตให้เรียก addScope ตัวอย่างเช่น
    provider.addScope('user_birthday');
    
    ดู เอกสาร คู่มือ ผู้ให้บริการการพิสูจน์ ตัว ตน
  3. ทางเลือก : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการโดยไม่ต้องส่งผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจนให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น
    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. ทางเลือก : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเองให้เรียกใช้ setCustomParameters บนผู้ให้บริการที่เตรียมใช้งานด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น
    provider.setCustomParameters({
      'display': 'popup'
    });
    
    ไม่อนุญาตให้จองพารามิเตอร์ OAuth ที่จำเป็นและจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการการพิสูจน์ ตัว ตน สำหรับรายละเอียดเพิ่มเติม
  5. ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ Facebook คุณสามารถแจ้งให้ผู้ใช้ของคุณลงชื่อเข้าใช้ด้วยบัญชี Facebook ของพวกเขาได้โดยการเปิดหน้าต่างป๊อปอัปหรือโดยเปลี่ยนเส้นทางไปที่หน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์เคลื่อนที่
    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัปให้เรียก signInWithPopup :
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Facebook Access Token. You can use it to access the Facebook API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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 ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ API ของ Facebook

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

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ให้โทร signInWithRedirect :
      firebase.auth().signInWithRedirect(provider);
      
      จากนั้นคุณยังสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Facebook ได้โดยเรียก getRedirectResult เมื่อเพจของคุณโหลด:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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;
        // ...
      });
      
      นอกจากนี้คุณยังสามารถตรวจจับและจัดการข้อผิดพลาดได้อีกด้วย สำหรับรายการรหัสข้อผิดพลาดโปรดดูที่ Auth Reference Docs

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

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

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

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

ในไฟล์ Manifest ของส่วนขยาย Chrome ของคุณตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม https://apis.google.com URL ในรายการที่อนุญาตพิเศษของ content_security_policy

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

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

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

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

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

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

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