ตรวจสอบสิทธิ์การใช้ 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;
       // ...
     });
     

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

// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(user) {
          // Step 4a.
          return user.linkWithCredential(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already has an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

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

คุณสามารถตรวจสอบสิทธิ์กับ 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.
});