คุณสามารถให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Twitter ของตนได้โดยผสานรวมการตรวจสอบสิทธิ์ Twitter เข้ากับแอปของคุณ คุณสามารถผสานรวมการตรวจสอบสิทธิ์ของ Twitter ได้โดยใช้ Firebase SDK เพื่อดำเนินขั้นตอนการลงชื่อเข้าใช้หรือดำเนินการตามขั้นตอน OAuth ของ Twitter ด้วยตนเองและส่งโทเค็นการเข้าถึงที่เป็นผลลัพธ์และข้อมูลลับไปยัง Firebase
ก่อนที่คุณจะเริ่ม
- เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
- ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
- บนแท็บ วิธีการลงชื่อเข้า ใช้ให้เปิดใช้งานผู้ให้บริการ Twitter
- เพิ่ม คีย์ API และข้อมูล ลับ API จากคอนโซลนักพัฒนาของผู้ให้บริการไปยังการกำหนดค่าผู้ให้บริการ:
- ลงทะเบียนแอปของคุณ เป็น แอปพลิเคชัน สำหรับนักพัฒนาบน Twitter และรับ คีย์ OAuth API และข้อมูล ลับ API ของแอป
- ตรวจสอบให้แน่ใจว่า URI ของ Firebase OAuth เปลี่ยนเส้นทาง (เช่น
my-app-12345.firebaseapp.com/__/auth/handler
) เป็น URL เรียกกลับการให้สิทธิ์ ของคุณในหน้าการตั้งค่าของแอปในการกำหนดค่า แอป Twitter
- คลิก บันทึก
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอปวิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้กับ Firebase โดยใช้บัญชี Twitter คือจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากคุณต้องการพิสูจน์ตัวตนผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่น ๆ ที่ไม่ใช่เบราว์เซอร์คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)
ในการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:
- สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Twitter:
var provider = new firebase.auth.TwitterAuthProvider();
- ทางเลือก : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการโดยไม่ต้องส่งผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจนให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- ทางเลือก : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเองให้เรียกใช้
setCustomParameters
บนผู้ให้บริการที่เตรียมใช้งานด้วยออบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารประกอบของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่นprovider.setCustomParameters({ 'lang': 'es' });
ไม่อนุญาตให้จองพารามิเตอร์ OAuth ที่จำเป็นและจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการการพิสูจน์ ตัว ตน สำหรับรายละเอียดเพิ่มเติม - ตรวจสอบสิทธิ์กับ 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:
- รวมการรับรองความถูกต้องของ Twitter เข้ากับแอปของคุณโดยทำตาม เอกสารของผู้พัฒนา ในตอนท้ายของขั้นตอนการลงชื่อเข้าใช้ Twitter คุณจะได้รับโทเค็นการเข้าถึง OAuth และข้อมูลลับของ OAuth
- หากคุณต้องการลงชื่อเข้าใช้แอปพลิเคชัน Node.js ให้ส่งโทเค็นการเข้าถึง OAuth และรหัสลับ OAuth ไปยังแอปพลิเคชัน Node.js
- หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย Twitter สำเร็จแล้วให้แลกเปลี่ยนโทเค็นการเข้าถึง OAuth และข้อมูลลับของ OAuth เป็นข้อมูลรับรอง Firebase:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- ตรวจสอบสิทธิ์กับ 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 ของคุณ:
- เปิดโครงการของคุณใน คอนโซล Firebase
- ในส่วนการ รับรองความถูกต้อง เปิดหน้า วิธีการลงชื่อเข้าใช้
- เพิ่ม 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. });