אתם יכולים לאפשר למשתמשים לבצע אימות ב-Firebase באמצעות ספקי OAuth כמו Yahoo. לשם כך, משלבים את OAuth Login הגנרי באפליקציה באמצעות Firebase SDK כדי לבצע את תהליך הכניסה מקצה לקצה.
לפני שמתחילים
כדי לאפשר למשתמשים להיכנס באמצעות חשבונות Yahoo, קודם צריך להפעיל את Yahoo כספק כניסה לפרויקט Firebase:
- מוסיפים את Firebase לפרויקט JavaScript.
- במסוף Firebase, פותחים את הקטע Auth.
- בכרטיסייה Sign in method (שיטת כניסה), מפעילים את הספק Yahoo.
- מוסיפים את מזהה הלקוח ואת סוד הלקוח ממסוף הפיתוח של הספק להגדרות הספק:
-
כדי לרשום לקוח OAuth של Yahoo, פועלים לפי ההוראות במסמכי העזרה למפתחים של Yahoo בנושא רישום אפליקציית אינטרנט ב-Yahoo.
חשוב לבחור את שתי ההרשאות של OpenID Connect API:
profile
ו-email
. - כשרושמים אפליקציות אצל הספקים האלה, חשוב לרשום את הדומיין
*.firebaseapp.com
של הפרויקט כדומיין להפניה אוטומטית של האפליקציה.
-
- לוחצים על שמירה.
טיפול בתהליך הכניסה באמצעות Firebase SDK
אם אתם מפתחים אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים ב-Firebase באמצעות חשבונות Yahoo שלהם היא לטפל בתהליך הכניסה כולו באמצעות ה-SDK של Firebase ל-JavaScript.
כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:
יוצרים מופע של OAuthProvider באמצעות מזהה הספק yahoo.com.
Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
אופציונלי: מציינים פרמטרים מותאמים אישית נוספים של OAuth שרוצים לשלוח עם בקשת ה-OAuth.
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
הפרמטרים שבהם Yahoo תומכת מפורטים במסמכי התיעוד של Yahoo OAuth. שימו לב: אי אפשר להעביר פרמטרים שנדרשים ל-Firebase באמצעות
setCustomParameters()
. הפרמטרים האלה הם client_id, redirect_uri, response_type, scope ו-state.אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0, מעבר ל-
profile
ול-email
, שרוצים לבקש מספק האימות. אם האפליקציה שלכם זקוקה לגישה לנתוני משתמשים פרטיים מממשקי Yahoo API, תצטרכו לבקש הרשאות לממשקי Yahoo API בקטע API Permissions במסוף הפיתוח של Yahoo. היקפי ה-OAuth המבוקשים חייבים להיות זהים להיקפים שהוגדרו מראש בהרשאות ה-API של האפליקציה. לדוגמה, אם מבקשים גישה לקריאה וכתיבה לאנשי הקשר של המשתמש והיא מוגדרת מראש בהרשאות ה-API של האפליקציה, צריך להעביר את הערךsdct-w
במקום את היקף הרשאת ה-OAuth לקריאה בלבדsdct-r
. אחרת, התהליך ייכשל ותוצג הודעת שגיאה למשתמש הקצה.Web
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
Web
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
למידע נוסף, אפשר לעיין במסמכי התיעוד בנושא היקפי הרשאה ב-Yahoo.
אימות באמצעות Firebase באמצעות אובייקט הספק של OAuth. אתם יכולים לבקש מהמשתמשים להיכנס באמצעות חשבונות Yahoo שלהם על ידי פתיחת חלון קופץ או על ידי הפניה לדף הכניסה. השיטה להפניה אוטומטית היא המועדפת במכשירים ניידים.
כדי להיכנס באמצעות חלון קופץ, צריך לבצע את הפעולות הבאות:
signInWithPopup
Web
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... // Yahoo OAuth access token and ID token can be retrieved by calling: const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... /** @type {firebase.auth.OAuthCredential} */ const credential = result.credential; // Yahoo OAuth access token and ID token can be retrieved by calling: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
כדי להיכנס לחשבון על ידי הפניה לדף הכניסה, צריך להתקשר למספר
signInWithRedirect
:
מומלץ לפעול לפי השיטות המומלצות כשמשתמשים ב-
signInWithRedirect
, ב-linkWithRedirect
או ב-reauthenticateWithRedirect
.firebase.auth().signInWithRedirect(provider);
אחרי שהמשתמש משלים את הכניסה וחוזרים לדף, אפשר לקבל את תוצאת הכניסה באמצעות קריאה ל-
getRedirectResult
.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
בסיום התהליך, אפשר לאחזר את אסימון הזיהוי ואת אסימון הגישה של OAuth המשויכים לספק מהאובייקט
firebase.auth.UserCredential
שמוחזר.באמצעות אסימון הגישה ל-OAuth, אפשר לבצע קריאה ל-Yahoo API.
לדוגמה, כדי לקבל את פרטי הפרופיל הבסיסיים, אפשר להפעיל את ה-API ל-REST הבא:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
כאשר
YAHOO_USER_UID
הוא מזהה המשתמש ב-Yahoo, שניתן לאחזר מהשדהfirebase.auth().currentUser.providerData[0].uid
או מהשדהresult.additionalUserInfo.profile
.הדוגמאות שלמעלה מתמקדות בתהליכי כניסה, אבל יש לכם גם אפשרות לקשר ספק של Yahoo למשתמש קיים באמצעות
linkWithPopup
/linkWithRedirect
. לדוגמה, אתם יכולים לקשר כמה ספקים לאותו משתמש ולאפשר לו להיכנס באמצעות כל אחד מהם.Web
import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
אפשר להשתמש באותו דפוס עם
reauthenticateWithPopup
/reauthenticateWithRedirect
, כדי לאחזר פרטי כניסה עדכניים לפעולות רגישות שדורשות התחברות מהזמן האחרון.Web
import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
אימות באמצעות 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. });