คุณอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Twitter ได้โดยผสานการตรวจสอบสิทธิ์ Twitter ในแอปของคุณ คุณสามารถผสานรวมการตรวจสอบสิทธิ์ Twitter โดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ หรือดำเนินการตามขั้นตอน OAuth ของ Twitter ด้วยตนเองและส่งโทเค็นการเข้าถึงที่เป็นผลลัพธ์และข้อมูลลับไปยัง Firebase
ก่อนจะเริ่ม
- เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
- ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
- บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ Twitter
- เพิ่ม คีย์ API และข้อมูลลับ API จากคอนโซลนักพัฒนาซอฟต์แวร์ของผู้ให้บริการรายนั้นไปยังการกำหนดค่าผู้ให้บริการ:
- ลงทะเบียนแอปของคุณเป็นแอปพลิ เคชันนักพัฒนาซอฟต์แวร์บน Twitter และรับ คีย์ OAuth API และ API ลับ ของแอป
- ตรวจสอบให้แน่ใจว่า Firebase OAuth เปลี่ยนเส้นทาง URI ของคุณ (เช่น
my-app-12345.firebaseapp.com/__/auth/handler
) ถูกตั้งค่าเป็น URL การเรียกกลับของ Authorization ในหน้าการตั้งค่าของ แอปบน config ของแอป Twitter
- คลิก บันทึก
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ของคุณด้วย Firebase โดยใช้บัญชี Twitter คือการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากคุณต้องการตรวจสอบสิทธิ์ผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่นที่ไม่ใช่เบราว์เซอร์ คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:
- สร้างอินสแตนซ์ของวัตถุผู้ให้บริการ Twitter:
Web version 9
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
Web version 8
var provider = new firebase.auth.TwitterAuthProvider();
- ไม่บังคับ : หากต้องการแปลโฟลว์ OAuth ของผู้ให้บริการเป็นภาษาที่ผู้ใช้ต้องการโดยไม่ผ่านพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดแจ้ง ให้อัปเดตรหัสภาษาบนอินสแตนซ์ Auth ก่อนเริ่มโฟลว์ OAuth ตัวอย่างเช่น:
Web version 9
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
Web version 8
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- ไม่บังคับ : ระบุพารามิเตอร์ผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth ในการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียก
setCustomParameters
บนตัวให้บริการที่เริ่มต้นด้วยอ็อบเจ็กต์ที่มีคีย์ตามที่ระบุโดยเอกสารของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง ตัวอย่างเช่น:ไม่อนุญาตให้ใช้พารามิเตอร์ OAuth ที่สงวนไว้และจะถูกละเว้น ดู ข้อมูลอ้างอิงผู้ให้บริการรับรองความถูกต้อง สำหรับรายละเอียดเพิ่มเติมWeb version 9
provider.setCustomParameters({ 'lang': 'es' });
Web version 8
provider.setCustomParameters({ 'lang': 'es' });
- ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ Twitter คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Twitter โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์มือถือ
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทร
signInWithPopup
:นอกจากนี้ โปรดทราบด้วยว่าคุณสามารถดึงโทเค็น OAuth ของผู้ให้บริการ Twitter ซึ่งสามารถใช้เพื่อดึงข้อมูลเพิ่มเติมโดยใช้ Twitter APIWeb version 9
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; // ... }).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); // ... });
Web version 8
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; // ... });
นี่คือที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาด โปรดดู เอกสารอ้างอิงการตรวจสอบสิทธิ์
- หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร
signInWithRedirect
:จากนั้น คุณยังสามารถเรียกข้อมูลโทเค็น OAuth ของผู้ให้บริการ Twitter ได้โดยเรียกWeb version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
getRedirectResult
เมื่อหน้าเว็บของคุณโหลด:นี่คือที่ที่คุณสามารถตรวจจับและจัดการข้อผิดพลาดได้ สำหรับรายการรหัสข้อผิดพลาด โปรดดู เอกสารอ้างอิงการตรวจสอบสิทธิ์Web version 9
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; }).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); // ... });
Web version 8
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; // ... });
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทร
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง
คุณยังสามารถตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Twitter โดยจัดการขั้นตอนการลงชื่อเข้าใช้โดยเรียกปลายทาง OAuth ของ Twitter:
- รวมการรับรองความถูกต้องของ Twitter ในแอปของคุณโดยทำตาม เอกสารของนักพัฒนา เมื่อสิ้นสุดขั้นตอนการลงชื่อเข้าใช้ Twitter คุณจะได้รับโทเค็นการเข้าถึง OAuth และข้อมูลลับของ OAuth
- หากคุณต้องการลงชื่อเข้าใช้แอปพลิเคชัน Node.js ให้ส่งโทเค็นการเข้าถึง OAuth และข้อมูลลับของ OAuth ไปยังแอปพลิเคชัน Node.js
- หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ Twitter สำเร็จแล้ว ให้แลกเปลี่ยนโทเค็นการเข้าถึง OAuth และข้อมูลลับ OAuth เป็นข้อมูลประจำตัว Firebase:
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- ตรวจสอบสิทธิ์กับ Firebase โดยใช้ข้อมูลรับรอง Firebase:
Web version 9
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); // ... });
Web version 8
// 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 ดังต่อไปนี้ในรายการโดเมนที่ได้รับอนุญาต:
chrome-extension://CHROME_EXTENSION_ID
เฉพาะการดำเนินการป๊อปอัป ( signInWithPopup
, linkWithPopup
และ reauthenticateWithPopup
) เท่านั้นที่ใช้ได้กับส่วนขยาย Chrome เนื่องจากส่วนขยาย Chrome ไม่สามารถใช้การเปลี่ยนเส้นทาง HTTP คุณควรเรียกเมธอดเหล่านี้จากสคริปต์ของเพจพื้นหลังแทนที่จะเป็นป๊อปอัปการดำเนินการของเบราว์เซอร์ เนื่องจากป๊อปอัปการตรวจสอบสิทธิ์จะยกเลิกป๊อปอัปการดำเนินการของเบราว์เซอร์ วิธีการแบบป๊อปอัปสามารถใช้ได้ในส่วนขยายโดยใช้ Manifest V2 เท่านั้น Manifest V3 ที่ใหม่กว่าอนุญาตเฉพาะสคริปต์พื้นหลังในรูปแบบของพนักงานบริการ ซึ่งไม่สามารถดำเนินการป๊อปอัปได้เลย
ในไฟล์ Manifest ของส่วนขยาย Chrome ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม https://apis.google.com
URL ในรายการที่อนุญาตของ content_security_policy
ขั้นตอนถัดไป
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก บัญชีผู้ใช้ใหม่จะถูกสร้างขึ้นและเชื่อมโยงกับข้อมูลประจำตัว นั่นคือ ชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลผู้ให้บริการตรวจสอบสิทธิ์ ซึ่งผู้ใช้ลงชื่อเข้าใช้ บัญชีใหม่นี้จัดเก็บเป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ของคุณ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
ในแอปของคุณ วิธีที่แนะนำในการทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์บนออบเจ็กต์การ
Auth
จากนั้น คุณจะได้รับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้จากออบเจ็กต์User
ดู จัดการผู้ใช้ในฐานข้อมูล Firebase Realtime Database และ Cloud Storage Security Rules คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร
auth
และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้
คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้ผู้ให้บริการตรวจสอบสิทธิ์หลายรายโดย เชื่อมโยงข้อมูลรับรองของผู้ให้บริการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่
หากต้องการออกจากระบบผู้ใช้ โทร signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });