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