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

รับรองความถูกต้องโดยใช้ Twitter ใน JavaScript

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

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

  1. เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
  2. ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
  3. บนแท็บ วิธีการลงชื่อเข้า ใช้ให้เปิดใช้งานผู้ให้บริการ Twitter
  4. เพิ่ม คีย์ API และข้อมูล ลับ API จากคอนโซลนักพัฒนาของผู้ให้บริการไปยังการกำหนดค่าผู้ให้บริการ:
    1. ลงทะเบียนแอปของคุณ เป็น แอปพลิเคชัน สำหรับนักพัฒนาบน Twitter และรับ คีย์ OAuth API และข้อมูล ลับ API ของแอป
    2. ตรวจสอบให้แน่ใจว่า URI ของ Firebase OAuth เปลี่ยนเส้นทาง (เช่น 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 = 'it';
    // 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((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = 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 = credential.accessToken;
          var secret = credential.secret;
      
          // 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;
          // ...
        });
      นอกจากนี้โปรดสังเกตว่าคุณสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Twitter ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Twitter API

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

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ให้เรียก signInWithRedirect :
      firebase.auth().signInWithRedirect(provider);
      จากนั้นคุณยังสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Twitter โดยเรียก getRedirectResult เมื่อเพจของคุณโหลด:
      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = 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 = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // 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;
          // ...
        });
      นอกจากนี้คุณยังสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาดโปรดดูที่ Auth Reference Docs

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

นอกจากนี้คุณยังสามารถตรวจสอบสิทธิ์กับ 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:
    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in       
        var credential = result.credential;
        // ...
      })
      .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 ดังต่อไปนี้ในรายการ 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(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});