Google มุ่งมั่นที่จะพัฒนาความเท่าเทียมทางเชื้อชาติสำหรับชุมชนคนผิวดำ มาดูกันว่า
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

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

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

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

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

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

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

รับรองความถูกต้องกับ Firebase ในส่วนขยายของ Chrome

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

  1. เปิดโครงการของคุณใน คอนโซล Firebase
  2. ในส่วนการ ตรวจสอบสิทธิ์ ให้เปิดหน้า วิธีลงชื่อเข้าใช้
  3. เพิ่ม URI ดังนี้รายการของโดเมนที่ได้รับอนุญาต:
    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 และ Cloud Storage Security คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

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

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