אתה יכול לאפשר למשתמשים שלך לבצע אימות עם Firebase באמצעות ספקי OAuth כמו Yahoo על ידי שילוב OAuth Login גנרי באפליקציה שלך באמצעות Firebase SDK כדי לבצע את זרימת הכניסה מקצה לקצה.
לפני שאתה מתחיל
כדי להיכנס למשתמשים באמצעות חשבונות Yahoo, תחילה עליך להפעיל את Yahoo כספק כניסה עבור פרויקט Firebase שלך:
- הוסף את Firebase לפרויקט JavaScript שלך .
- במסוף Firebase , פתח את הקטע Auth .
- בכרטיסייה שיטת כניסה , הפעל את ספק Yahoo .
- הוסף את מזהה הלקוח ואת סוד הלקוח ממסוף המפתחים של אותו ספק לתצורת הספק:
כדי לרשום לקוח Yahoo OAuth, עקוב אחר התיעוד למפתחים של Yahoo על רישום יישום אינטרנט עם Yahoo .
הקפד לבחור בשתי הרשאות OpenID Connect API:
profile
email
.- בעת רישום אפליקציות אצל ספקים אלה, הקפד לרשום את הדומיין
*.firebaseapp.com
עבור הפרויקט שלך כדומיין ההפניה מחדש עבור האפליקציה שלך.
- לחץ על שמור .
טפל בזרימת הכניסה עם Firebase SDK
אם אתה בונה אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים שלך עם Firebase באמצעות חשבונות Yahoo שלהם היא לטפל בכל זרימת הכניסה עם Firebase JavaScript SDK.
כדי לטפל בזרימת הכניסה עם Firebase JavaScript SDK, בצע את השלבים הבאים:
צור מופע של OAuthProvider באמצעות מזהה הספק yahoo.com .
Web modular API
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web namespaced API
var provider = new firebase.auth.OAuthProvider('yahoo.com');
אופציונלי : ציין פרמטרים נוספים של OAuth מותאמים אישית שברצונך לשלוח עם בקשת ה-OAuth.
Web modular API
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web namespaced API
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
שברצונך לבקש מספק האימות. אם האפליקציה שלך דורשת גישה לנתוני משתמש פרטיים ממשקי API של Yahoo, תצטרך לבקש הרשאות לממשקי API של Yahoo תחת הרשאות API במסוף המפתחים של Yahoo. היקפי OAuth המבוקשים חייבים להיות התאמות מדויקות לאלו שהוגדרו מראש בהרשאות ה-API של האפליקציה. לדוגמה, אם מתבקשת גישת קריאה/כתיבה לאנשי קשר של משתמשים ומוגדרת מראש בהרשאות ה-API של האפליקציה, יש להעביר אתsdct-w
במקום את היקף OAuth לקריאה בלבדsdct-r
. אחרת, הזרימה תיכשל ותוצג שגיאה למשתמש הקצה.Web modular API
// 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 namespaced API
// 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 modular API
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 namespaced API
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 modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
בסיום מוצלח, ניתן לאחזר את אסימון מזהה OAuth ואסימון הגישה המשויכים לספק מהאובייקט
firebase.auth.UserCredential
שהוחזר.באמצעות אסימון הגישה של OAuth, אתה יכול לקרוא ל- Yahoo API .
לדוגמה, כדי לקבל את מידע הפרופיל הבסיסי, ניתן לקרוא ל- REST API הבא:
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 modular API
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 namespaced API
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 modular API
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 namespaced API
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, עליך להוסיף את מזהה תוסף Chrome שלך:
- פתח את הפרויקט שלך במסוף Firebase .
- במקטע אימות , פתח את דף שיטת הכניסה .
- הוסף URI כמו הבא לרשימת הדומיינים המורשים:
chrome-extension://CHROME_EXTENSION_ID
רק פעולות קופצות ( signInWithPopup
, linkWithPopup
ו- reauthenticateWithPopup
) זמינות לתוספי Chrome, מכיוון שתוספי Chrome אינם יכולים להשתמש בהפניות HTTP. עליך לקרוא לשיטות אלה מסקריפט של דף רקע ולא מחלון קופץ של פעולה בדפדפן, מכיוון שחלון האימות יבטל את חלון פעולת הדפדפן הקופץ. ניתן להשתמש בשיטות הקופצות רק בהרחבות המשתמשות ב- Manifest V2 . ה- Manfest V3 החדש יותר מאפשר רק סקריפטים בצורת עובדי שירות, שאינם יכולים לבצע את פעולות המוקפץ כלל.
בקובץ המניפסט של תוסף Chrome שלך, ודא שאתה מוסיף את כתובת האתר https://apis.google.com
לרשימת ההיתרים content_security_policy
.
הצעדים הבאים
לאחר שמשתמש נכנס בפעם הראשונה, נוצר חשבון משתמש חדש ומקושר לאישורים - כלומר, שם המשתמש והסיסמה, מספר הטלפון או פרטי ספק האישורים - המשתמש נכנס איתו. החשבון החדש הזה מאוחסן כחלק מפרויקט Firebase שלך, וניתן להשתמש בו כדי לזהות משתמש בכל אפליקציה בפרויקט שלך, ללא קשר לאופן שבו המשתמש נכנס.
באפליקציות שלך, הדרך המומלצת לדעת את סטטוס ההרשאה של המשתמש שלך היא להגדיר צופה על אובייקט
Auth
. לאחר מכן תוכל לקבל את פרטי הפרופיל הבסיסיים של המשתמש מאובייקטUser
. ראה ניהול משתמשים .בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש המחובר ממשתנה
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. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });