אימות באמצעות Microsoft עם JavaScript, אימות באמצעות Microsoft עם JavaScript

אתה יכול לאפשר למשתמשים שלך לבצע אימות עם Firebase באמצעות ספקי OAuth כמו Microsoft Azure Active Directory על ידי שילוב OAuth Login גנרי באפליקציה שלך באמצעות Firebase SDK כדי לבצע את זרימת הכניסה מקצה לקצה.

לפני שאתה מתחיל

כדי להיכנס למשתמשים באמצעות חשבונות Microsoft (Azure Active Directory וחשבונות Microsoft אישיים), תחילה עליך להפעיל את Microsoft כספק כניסה לפרויקט Firebase שלך:

1. הוסף את Firebase לפרויקט JavaScript שלך .
2. במסוף Firebase , פתח את הקטע Auth .
3. בכרטיסייה שיטת כניסה , הפעל את ספק Microsoft .
4. הוסף את מזהה הלקוח ואת סוד הלקוח ממסוף המפתחים של אותו ספק לתצורת הספק:
   1. כדי לרשום לקוח Microsoft OAuth, בצע את ההוראות בהתחלה מהירה: רישום אפליקציה עם נקודת הקצה של Azure Active Directory v2.0 . שים לב שנקודת קצה זו תומכת בכניסה באמצעות חשבונות אישיים של Microsoft וכן חשבונות Azure Active Directory. למידע נוסף על Azure Active Directory v2.0.
   2. בעת רישום אפליקציות אצל ספקים אלה, הקפד לרשום את הדומיין *.firebaseapp.com עבור הפרויקט שלך כדומיין ההפניה מחדש עבור האפליקציה שלך.
5. לחץ על שמור .

טפל בזרימת הכניסה עם Firebase SDK

אם אתה בונה אפליקציית אינטרנט, הדרך הקלה ביותר לאמת את המשתמשים שלך עם Firebase באמצעות חשבונות Microsoft שלהם היא לטפל בכל זרימת הכניסה עם Firebase JavaScript SDK.

כדי לטפל בזרימת הכניסה עם Firebase JavaScript SDK, בצע את השלבים הבאים:

1. צור מופע של OAuthProvider באמצעות מזהה הספק microsoft.com .

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('microsoft.com');
   auth_msft_create_provider.js

   Web namespaced API

   var provider = new firebase.auth.OAuthProvider('microsoft.com');
   microsoft-oauth.js

2. אופציונלי : ציין פרמטרים נוספים של OAuth מותאמים אישית שברצונך לשלוח עם בקשת ה-OAuth.

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   auth_msft_provider_params.js

   Web namespaced API

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   microsoft-oauth.js

   לפרמטרים שבהם Microsoft תומכת, עיין בתיעוד Microsoft OAuth . שים לב שאינך יכול להעביר פרמטרים הנדרשים לפי Firebase עם setCustomParameters() . פרמטרים אלו הם client_id , response_type , redirect_uri , state , scope ו- response_mode .

   כדי לאפשר רק למשתמשים מדייר Azure AD מסוים להיכנס לאפליקציה, ניתן להשתמש בשם הדומיין הידידותי של דייר Azure AD או במזהה ה-GUID של הדייר. ניתן לעשות זאת על ידי ציון השדה "דייר" באובייקט הפרמטרים המותאמים אישית.

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   provider.setCustomParameters({
     // Optional "tenant" parameter in case you are using an Azure AD tenant.
     // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
     // or "common" for tenant-independent tokens.
     // The default value is "common".
     tenant: 'TENANT_ID'
   });
   auth_msft_provider_params_tenant.js

   Web namespaced API

   provider.setCustomParameters({
     // Optional "tenant" parameter in case you are using an Azure AD tenant.
     // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
     // or "common" for tenant-independent tokens.
     // The default value is "common".
     tenant: 'TENANT_ID'
   });
   microsoft-oauth.js

3. אופציונלי : ציין היקפי OAuth 2.0 נוספים מעבר לפרופיל הבסיסי שברצונך לבקש מספק האימות.

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   למידע נוסף, עיין בתיעוד ההרשאות וההסכמה של Microsoft .

4. בצע אימות עם Firebase באמצעות אובייקט ספק OAuth. אתה יכול לבקש מהמשתמשים שלך להיכנס עם חשבונות Microsoft שלהם על ידי פתיחת חלון מוקפץ או על ידי הפנייה מחדש לדף הכניסה. שיטת ההפניה מועדפת במכשירים ניידים.

   • כדי להיכנס באמצעות חלון מוקפץ, התקשר ל- signInWithPopup :

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       // 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.
     });
   auth_msft_signin_popup.js

   Web namespaced API

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   microsoft-oauth.js

   • כדי להיכנס על ידי הפנייה מחדש לדף הכניסה, התקשר ל- signInWithRedirect :

   פעל לפי השיטות המומלצות בעת שימוש signInWithRedirect , linkWithRedirect או reauthenticateWithRedirect .

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   auth_msft_signin_redirect.js

   Web namespaced API

   firebase.auth().signInWithRedirect(provider);
   microsoft-oauth.js

   לאחר שהמשתמש משלים את הכניסה וחוזר לדף, תוכל להשיג את תוצאת הכניסה על ידי קריאה ל- getRedirectResult .

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       // 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.
     });
   auth_msft_signin_redirect_result.js

   Web namespaced API

   firebase.auth().getRedirectResult()
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   microsoft-oauth.js

   בסיום מוצלח, ניתן לאחזר את אסימון הגישה של OAuth המשויך לספק מהאובייקט firebase.auth.UserCredential שהוחזר.

   באמצעות אסימון הגישה של OAuth, אתה יכול לקרוא ל- Microsoft Graph API .

   לדוגמה, כדי לקבל את מידע הפרופיל הבסיסי, ניתן לקרוא ל- REST API הבא:

   curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
   

   בניגוד לספקים אחרים הנתמכים על ידי Firebase Auth, מיקרוסופט אינה מספקת כתובת URL של תמונה ובמקום זאת, יש לבקש את הנתונים הבינאריים עבור תמונת פרופיל באמצעות Microsoft Graph API .

   בנוסף לאסימון הגישה של OAuth, ניתן לאחזר את אסימון ה-OAuth ID של המשתמש מהאובייקט firebase.auth.UserCredential . תביעת sub באסימון המזהה היא ספציפית לאפליקציה ולא תתאים למזהה המשתמש המאוחד המשמש את Firebase Auth ונגיש דרך user.providerData[0].uid . במקום זאת יש להשתמש בשדה תביעת oid . בעת שימוש בדייר Azure AD לכניסה, תביעת ה- oid תהיה התאמה מדויקת. אולם במקרה שאינו דייר, שדה ה- oid מרופד. עבור מזהה מאוחד 4b2eabcdefghijkl , ל- oid יהיה טופס 00000000-0000-0000-4b2e-abcdefghijkl .

5. בעוד שהדוגמאות לעיל מתמקדות בזרימות כניסה, יש לך גם את היכולת לקשר ספק Microsoft למשתמש קיים באמצעות linkWithPopup / linkWithRedirect . לדוגמה, אתה יכול לקשר מספר ספקים לאותו משתמש ולאפשר להם להיכנס עם אחד מהם.

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('microsoft.com');
   const auth = getAuth();
   
   linkWithPopup(auth.currentUser, provider)
       .then((result) => {
         // Microsoft 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.
       });
   auth_msft_link_popup.js

   Web namespaced API

   var provider = new firebase.auth.OAuthProvider('microsoft.com');
   firebase.auth().currentUser.linkWithPopup(provider)
       .then((result) => {
         // Microsoft credential is linked to the current user.
         // IdP data available in result.additionalUserInfo.profile.
         // OAuth access token can also be retrieved:
         // result.credential.accessToken
         // OAuth ID token can also be retrieved:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   microsoft-oauth.js

6. ניתן להשתמש באותה דפוס עם reauthenticateWithPopup / reauthenticateWithRedirect אשר ניתן להשתמש בהם כדי לאחזר אישורים טריים עבור פעולות רגישות הדורשות כניסה אחרונה.

   Web modular API

   למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לטלטלה עצים ושדרוג מ-API עם מרווח שמות.

   import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('microsoft.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.
       });
   auth_msft_reauth_popup.js

   Web namespaced API

   var provider = new firebase.auth.OAuthProvider('microsoft.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.
         // OAuth access token can also be retrieved:
         // result.credential.accessToken
         // OAuth ID token can also be retrieved:
         // result.credential.idToken
       })
       .catch((error) => {
         // Handle error.
       });
   microsoft-oauth.js

טיפול בחשבון-קיים-עם-שגיאות-אישורים-שונות

אם הפעלת את ההגדרה חשבון אחד לכל כתובת אימייל במסוף Firebase , כאשר משתמש מנסה להיכנס לספק (כגון Microsoft) עם אימייל שכבר קיים עבור ספק אחר של משתמש Firebase (כגון Google), השגיאה auth/account-exists-with-different-credential נזרק יחד עם אובייקט AuthCredential (אישור Microsoft). כדי להשלים את הכניסה לספק המיועד, המשתמש צריך להיכנס תחילה לספק הקיים (Google) ולאחר מכן לקשר ל- AuthCredential לשעבר (אישור Microsoft).

מצב קופץ

אם אתה משתמש signInWithPopup , אתה יכול לטפל auth/account-exists-with-different-credential עם קוד כמו הדוגמה הבאה:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Microsoft.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Microsoft credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Microsoft credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

מצב הפניה מחדש

שגיאה זו מטופלת באופן דומה במצב ההפניה מחדש, עם ההבדל שיש לשמור את האישורים הממתינים במטמון בין הפניות מחדש של עמודים (לדוגמה, שימוש באחסון הפעלה).

מתקדם: טפל בזרימת הכניסה באופן ידני

בניגוד לספקי OAuth אחרים הנתמכים על ידי Firebase כגון Google, Facebook וטוויטר, שבהם ניתן להגיע ישירות לכניסה באמצעות אישורים מבוססי אסימון OAuth, Firebase Auth אינו תומך באותה יכולת עבור ספקים כגון Microsoft עקב חוסר היכולת של שרת Firebase Auth לאימות הקהל של אסימוני גישה של Microsoft OAuth. זוהי דרישת אבטחה קריטית ועלולה לחשוף יישומים ואתרים להתקפות חוזרות שבהן ניתן להשתמש באסימון גישה של Microsoft OAuth שהושג עבור פרויקט אחד (תוקף) כדי להיכנס לפרויקט אחר (קורבן). במקום זאת, Firebase Auth מציע את היכולת לטפל בכל זרימת ה-OAuth וחילופי קוד ההרשאה באמצעות מזהה הלקוח והסוד של OAuth שהוגדרו במסוף Firebase. מכיוון שניתן להשתמש בקוד ההרשאה רק בשילוב עם מזהה לקוח/סוד ספציפי, לא ניתן להשתמש בקוד הרשאה שהושג עבור פרויקט אחד עם אחר.

אם נדרשים שימוש בספקים אלה בסביבות שאינן נתמכות, יהיה צורך להשתמש בספריית OAuth של צד שלישי ובאימות מותאם אישית של Firebase . הראשון דרוש כדי לאמת עם הספק והשני כדי להחליף את האישור של הספק לאסימון מותאם אישית.

בצע אימות באמצעות Firebase בתוסף Chrome

אם אתה בונה אפליקציית הרחבת Chrome, עיין במדריך מסמכים מחוץ למסך .

התאמה אישית של תחום ההפניה מחדש עבור הכניסה של Microsoft

בעת יצירת הפרויקט, Firebase תספק תת-דומיין ייחודי עבור הפרויקט שלך: https://my-app-12345.firebaseapp.com .

זה ישמש גם כמנגנון ההפניה מחדש לכניסה ל-OAuth. יהיה צורך לאפשר את הדומיין הזה עבור כל ספקי ה-OAuth הנתמכים. עם זאת, משמעות הדבר היא שמשתמשים עשויים לראות את הדומיין בזמן הכניסה ל-Microsoft לפני שיפנו חזרה לאפליקציה: המשך אל: https://my-app-12345.firebaseapp.com .

כדי להימנע מהצגת תת-הדומיין שלך, תוכל להגדיר דומיין מותאם אישית עם Firebase Hosting:

1. בצע את שלבים 1 עד 3 בהגדרת הדומיין שלך לאירוח . כאשר אתה מאמת את הבעלות על הדומיין שלך, Hosting מספק אישור SSL עבור הדומיין המותאם אישית שלך.
2. הוסף את הדומיין המותאם אישית שלך לרשימת הדומיינים המורשים במסוף Firebase : auth.custom.domain.com .
3. במסוף המפתחים של Microsoft או בדף ההגדרות של OAuth, רשום את כתובת האתר של דף ההפניה מחדש, שיהיה נגיש בדומיין המותאם אישית שלך: https://auth.custom.domain.com/__/auth/handler .
4. כאשר אתה מאתחל את ספריית JavaScript, ציין את הדומיין המותאם אישית שלך באמצעות השדה authDomain :

   var config = {
     apiKey: '...',
     // Changed from 'my-app-12345.firebaseapp.com'.
     authDomain: 'auth.custom.domain.com',
     databaseURL: 'https://my-app-12345.firebaseio.com',
     projectId: 'my-app-12345',
     storageBucket: 'my-app-12345.appspot.com',
     messagingSenderId: '1234567890'
   };
   firebase.initializeApp(config);
   

הצעדים הבאים

לאחר שמשתמש נכנס בפעם הראשונה, נוצר חשבון משתמש חדש ומקושר לאישורים - כלומר, שם המשתמש והסיסמה, מספר הטלפון או פרטי ספק האישורים - המשתמש נכנס איתו. החשבון החדש הזה מאוחסן כחלק מפרויקט Firebase שלך, וניתן להשתמש בו כדי לזהות משתמש בכל אפליקציה בפרויקט שלך, ללא קשר לאופן שבו המשתמש נכנס.

• באפליקציות שלך, הדרך המומלצת לדעת את סטטוס ההרשאה של המשתמש שלך היא להגדיר צופה על אובייקט Auth . לאחר מכן תוכל לקבל את פרטי הפרופיל הבסיסיים של המשתמש מאובייקט User . ראה ניהול משתמשים .

• בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש המחובר ממשתנה auth , ולהשתמש בו כדי לשלוט לאילו נתונים המשתמש יכול לגשת.

אתה יכול לאפשר למשתמשים להיכנס לאפליקציה שלך באמצעות מספר ספקי אימות על ידי קישור אישורי ספק אימות לחשבון משתמש קיים.

כדי לצאת ממשתמש, התקשר ל- signOut :

Web modular API

למד עוד על ממשק ה-API האינטרנט המודולרי הניתן לשינוי עצים ושדרוג מ-API עם מרווח שמות.

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js