כדי לאפשר למשתמשים לבצע אימות ב-Firebase באמצעות חשבונות Twitter שלהם, אפשר לשלב את אימות Twitter באפליקציה. אפשר לשלב את אימות Twitter באמצעות ה-SDK של Firebase כדי לבצע את תהליך הכניסה, או לבצע את תהליך OAuth של Twitter באופן ידני ולהעביר את אסימון הגישה והסוד שנוצרו ל-Firebase.
לפני שמתחילים
- מוסיפים את Firebase לפרויקט JavaScript.
- במסוף Firebase, פותחים את הקטע Auth.
- בכרטיסייה Sign in method (שיטת כניסה), מפעילים את הספק Twitter.
- מוסיפים את מפתח ה-API ואת סוד ה-API ממסוף הפיתוח של הספק לתצורת הספק:
- רושמים את האפליקציה בתור אפליקציית פיתוח ב-Twitter ומקבלים את מפתח ה-API וסוד ה-API של האפליקציה.
- מוודאים שכתובת ה-URI להפניה אוטומטית של OAuth ב-Firebase (למשל,
my-app-12345.firebaseapp.com/__/auth/handler
) מוגדרת ככתובת ה-URL להודעת החזרה (callback) לאישור בדף ההגדרות של האפליקציה בהגדרות של אפליקציית Twitter.
- לוחצים על שמירה.
טיפול בתהליך הכניסה באמצעות Firebase SDK
אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות Twitter שלהם היא לטפל בתהליך הכניסה באמצעות ה-SDK של Firebase ל-JavaScript. (אם רוצים לאמת משתמש ב-Node.js או בסביבה אחרת שאינה דפדפן, צריך לטפל בתהליך הכניסה באופן ידני).
כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:
- יוצרים מופע של אובייקט הספק של Twitter:
Web
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
Web
var provider = new firebase.auth.TwitterAuthProvider();
- אופציונלי: כדי להתאים את תהליך ה-OAuth של הספק לשפה המועדפת על המשתמש בלי להעביר באופן מפורש את הפרמטרים המותאמים אישית הרלוונטיים של OAuth, מעדכנים את קוד השפה במכונה של Auth לפני שמתחילים את תהליך ה-OAuth. לדוגמה:
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של ספק OAuth שרוצים לשלוח עם בקשת ה-OAuth. כדי להוסיף פרמטר מותאם אישית, צריך להפעיל את
setCustomParameters
במסגרת הספק שהותחל עם אובייקט שמכיל את המפתח כפי שמפורט במסמכי העזרה של ספק OAuth, ואת הערך התואם. לדוגמה:Web
provider.setCustomParameters({ 'lang': 'es' });
Web
provider.setCustomParameters({ 'lang': 'es' });
- אימות באמצעות Firebase באמצעות אובייקט הספק של Twitter. אתם יכולים לבקש מהמשתמשים להיכנס באמצעות חשבונות Twitter שלהם על ידי פתיחת חלון קופץ או על ידי הפניה לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
- כדי להיכנס באמצעות חלון קופץ, צריך לבצע את הפעולות הבאות:
signInWithPopup
Web
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); // ... });
Web
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; // ... });
כאן אפשר גם לזהות שגיאות ולטפל בהן. רשימה של קודי שגיאה מופיעה במאמר Auth Reference Docs.
- כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, צריך לבצע קריאה ל-
signInWithRedirect
: יש לפעול לפי השיטות המומלצות כשמשתמשים ב-`signInWithRedirect`.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
כשהדף נטען:Web
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); // ... });
Web
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
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
// 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
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });