ตรวจสอบการใช้ 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 Secret ของแอป
   2. ตรวจสอบให้แน่ใจว่า URI การเปลี่ยนเส้นทาง Firebase OAuth ของคุณ (เช่น my-app-12345.firebaseapp.com/__/auth/handler ) ได้รับการตั้งค่าเป็น URL โทรกลับการอนุญาต ของคุณในหน้าการตั้งค่าของแอป ใน config ของแอป Twitter
5. คลิก บันทึก

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

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

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

1. สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Twitter:

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

   import { TwitterAuthProvider } from "firebase/auth";
   
   const provider = new TwitterAuthProvider();
   auth_twitter_provider_create.js

   Web namespaced API

   var provider = new firebase.auth.TwitterAuthProvider();
   twitter.js

2. ไม่บังคับ : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการให้เป็นภาษาที่ผู้ใช้ต้องการโดยไม่ต้องส่งพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจน ให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนที่จะเริ่มโฟลว์ OAuth ตัวอย่างเช่น:

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // auth.useDeviceLanguage();
   auth_set_language_code.js

   Web namespaced API

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

3. ไม่บังคับ : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียก setCustomParameters บนผู้ให้บริการที่เตรียมใช้งานด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุในเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น:

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

   provider.setCustomParameters({
     'lang': 'es'
   });
   auth_twitter_provider_params.js

   Web namespaced API

   provider.setCustomParameters({
     'lang': 'es'
   });
   twitter.js

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

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

     import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((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.
         const credential = TwitterAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
         const secret = credential.secret;
     
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_popup.js

     Web namespaced API

     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;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).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;
         // ...
       });
     twitter.js

     โปรดสังเกตด้วยว่าคุณสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Twitter ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Twitter API

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

   • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร signInWithRedirect : ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุด เมื่อใช้ `signInWithRedirect`

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

     import { getAuth, signInWithRedirect } from "firebase/auth";
     
     const auth = getAuth();
     signInWithRedirect(auth, provider);
     auth_signin_redirect.js

     Web namespaced API

     firebase.auth().signInWithRedirect(provider);
     index.js

     จากนั้น คุณยังสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Twitter ได้โดยการเรียก getRedirectResult เมื่อเพจของคุณโหลด:

     Web modular API

     เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

     import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then((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.
         const credential = TwitterAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
         const secret = credential.secret;
         // ...
     
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_redirect_result.js

     Web namespaced API

     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;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).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;
         // ...
       });
     twitter.js

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

การจัดการข้อผิดพลาดของบัญชีที่มีอยู่พร้อมกับข้อมูลประจำตัวที่แตกต่างกัน

หากคุณเปิดใช้งานการตั้ง ค่าหนึ่งบัญชีต่อที่อยู่อีเมล ใน คอนโซล Firebase เมื่อผู้ใช้พยายามลงชื่อเข้าใช้ผู้ให้บริการ (เช่น Twitter) ด้วยอีเมลที่มีอยู่แล้วสำหรับผู้ให้บริการผู้ใช้ Firebase รายอื่น (เช่น Google) ข้อผิดพลาด auth/account-exists-with-different-credential ถูกโยนพร้อมกับวัตถุ AuthCredential (โทเค็น Twitter oauth และความลับ) ในการลงชื่อเข้าใช้ผู้ให้บริการที่ต้องการให้เสร็จสมบูรณ์ ผู้ใช้ต้องลงชื่อเข้าใช้ผู้ให้บริการที่มีอยู่ (Google) ก่อน จากนั้นจึงลิงก์ไปยัง AuthCredential เดิม (โทเค็น OAuth และความลับของ Twitter)

โหมดป๊อปอัป

หากคุณใช้ signInWithPopup คุณสามารถจัดการข้อผิดพลาด auth/account-exists-with-different-credential ด้วยโค้ดตามตัวอย่างต่อไปนี้:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

โหมดเปลี่ยนเส้นทาง

ข้อผิดพลาดนี้ได้รับการจัดการในลักษณะเดียวกันในโหมดการเปลี่ยนเส้นทาง โดยมีข้อแตกต่างที่ต้องแคชข้อมูลรับรองที่ค้างอยู่ระหว่างการเปลี่ยนเส้นทางเพจ (เช่น การใช้ที่เก็บข้อมูลเซสชัน)

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

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

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:

   Web modular API

   เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

   import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
   
   // Sign in with the credential from the Facebook user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       const credential = FacebookAuthProvider.credentialFromResult(result);
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = FacebookAuthProvider.credentialFromError(error);
       // ...
     });
   auth_facebook_signin_credential.js

   Web namespaced API

   // 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;
       // ...
     });
   facebook.js

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

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

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

   chrome-extension://CHROME_EXTENSION_ID

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

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

การปรับแต่งโดเมนการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ Twitter

ในการสร้างโปรเจ็กต์ Firebase จะจัดเตรียมโดเมนย่อยที่ไม่ซ้ำกันสำหรับโปรเจ็กต์ของคุณ: https://my-app-12345.firebaseapp.com

นอกจากนี้ยังใช้เป็นกลไกการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ OAuth โดเมนนั้นจะต้องได้รับอนุญาตสำหรับผู้ให้บริการ OAuth ที่รองรับทั้งหมด อย่างไรก็ตาม หมายความว่าผู้ใช้อาจเห็นโดเมนนั้นขณะลงชื่อเข้าใช้ Twitter ก่อนที่จะเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชัน: ไปที่: https://my-app-12345.firebaseapp.com

เพื่อหลีกเลี่ยงการแสดงโดเมนย่อย คุณสามารถตั้งค่าโดเมนที่กำหนดเองด้วย Firebase Hosting:

1. ทำตามขั้นตอนที่ 1 ถึง 3 ใน การตั้งค่าโดเมนของคุณสำหรับโฮสติ้ง เมื่อคุณยืนยันความเป็นเจ้าของโดเมน โฮสติ้งจะจัดเตรียมใบรับรอง SSL สำหรับโดเมนที่คุณกำหนดเอง
2. เพิ่มโดเมนที่กำหนดเองของคุณลงในรายการโดเมนที่ได้รับอนุญาตใน คอนโซล Firebase : auth.custom.domain.com
3. ในคอนโซลนักพัฒนาซอฟต์แวร์ Twitter หรือหน้าการตั้งค่า OAuth ให้อนุญาต URL ของหน้าเปลี่ยนเส้นทาง ซึ่งจะสามารถเข้าถึงได้บนโดเมนที่กำหนดเองของคุณ: https://auth.custom.domain.com/__/auth/handler
4. เมื่อคุณเริ่มต้นไลบรารี JavaScript ให้ระบุโดเมนที่คุณกำหนดเองด้วยฟิลด์ authDomain :

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

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

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

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

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

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

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

Web modular API

เรียนรู้เพิ่มเติม เกี่ยวกับ Web API แบบโครงสร้างที่เขย่าได้และ อัปเกรด จาก API เนมสเปซ

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js