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

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

לפני שמתחילים

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

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

טיפול בתהליך הכניסה באמצעות Firebase SDK

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

כדי לטפל בתהליך הכניסה באמצעות Firebase JavaScript SDK:

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

   Web

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

   Web

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

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

   Web

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: 'user@firstadd.onmicrosoft.com'
   });
   auth_msft_provider_params.js

   Web

   provider.setCustomParameters({
     // Force re-consent.
     prompt: 'consent',
     // Target specific email with login hint.
     login_hint: 'user@firstadd.onmicrosoft.com'
   });
   microsoft-oauth.js

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

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

   Web

   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

   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

   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

   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

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

   Web

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

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

   Web

   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

   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.

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

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

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

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

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

   Web

   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

   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

   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

   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

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) {
  // ...
}

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

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

השלבים הבאים

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

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

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

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

כדי להוציא משתמש מהחשבון, קוראים לפונקציה signOut:

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

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

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