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

ตรวจสอบสิทธิ์การใช้ Twitter ใน JavaScript

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

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

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

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

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

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

  1. สร้างตัวอย่างของวัตถุผู้ให้บริการ Twitter:
    var provider = new firebase.auth.TwitterAuthProvider();
    
  2. ทางเลือก : ในการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการโดยไม่ต้องผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจนให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  3. ทางเลือก : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth ในการเพิ่มพารามิเตอร์ที่กำหนดเองให้เรียก setCustomParameters บนผู้ให้บริการที่เริ่มต้นด้วยวัตถุที่มีคีย์ตามที่ระบุไว้ในเอกสารประกอบการของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น:
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่สงวนไว้และจะถูกละเว้น ดูการ อ้างอิงผู้ให้บริการการรับรองความถูกต้อง สำหรับรายละเอียดเพิ่มเติม
  4. รับรองความถูกต้องกับ Firebase โดยใช้วัตถุผู้ให้บริการของ Twitter คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Twitter ได้โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปที่หน้าลงชื่อเข้าใช้ วิธีการเปลี่ยนเส้นทางเป็นที่ต้องการในอุปกรณ์มือถือ
    • ในการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัพโทร signInWithPopup :
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
        // You can use these server side with your app's credentials to access the Twitter API.
        var token = result.credential.accessToken;
        var secret = result.credential.secret;
        // 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 ของผู้ให้บริการ Twitter ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Twitter API

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

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปที่หน้าลงชื่อเข้าใช้โทร signInWithRedirect :
      firebase.auth().signInWithRedirect(provider);
      
      จากนั้นคุณยังสามารถเรียกโทเค็น OAuth ของผู้ให้บริการ Twitter ได้โดยเรียกใช้ getRedirectResult เมื่อโหลดหน้าเว็บของคุณ:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
          // You can use these server side with your app's credentials to access the Twitter API.
          var token = result.credential.accessToken;
          var secret = result.credential.secret;
          // ...
        }
        // 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 โดยใช้บัญชี Twitter ได้ด้วยการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยการโทรหาจุดสิ้นสุด Twitter OAuth:

  1. รวมการตรวจสอบสิทธิ์ Twitter เข้ากับแอพของคุณโดยทำตาม เอกสารของนักพัฒนาซอฟต์แวร์ ในตอนท้ายของขั้นตอนการลงชื่อเข้าใช้ Twitter คุณจะได้รับโทเค็นการเข้าถึง OAuth และข้อมูลลับ OAuth
  2. หากคุณต้องการลงชื่อเข้าใช้ในแอปพลิเคชัน Node.js ให้ส่งโทเค็นการเข้าถึง OAuth และข้อมูลลับ OAuth ไปยังแอปพลิเคชัน Node.js
  3. หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย Twitter สำเร็จให้แลกเปลี่ยนโทเค็นการเข้าถึง OAuth และความลับ OAuth สำหรับข้อมูลประจำตัว Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. รับรองความถูกต้องกับ Firebase โดยใช้ข้อมูลรับรอง Firebase:
    firebase.auth().signInWithCredential(credential).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 Realtime Database และ กฎความปลอดภัย Cloud Storage คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

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

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