Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

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

מוסיפים את Firebase לפרויקט ב-JavaScript.
במסוף Firebase, עוברים אל Security (אבטחה) > Authentication (אימות).
בכרטיסייה שיטת כניסה, מפעילים את ספק הכניסה של מיקרוסופט.
מוסיפים את מזהה הלקוח ואת סוד הלקוח ממסוף המפתחים של הספק להגדרות הספק:
1. כדי לרשום לקוח Microsoft OAuth, פועלים לפי ההוראות במאמר Quickstart: Register an app with the Azure Active Directory v2.0 endpoint. שימו לב שנקודת הקצה הזו תומכת בכניסה באמצעות חשבונות מיקרוסופט אישיים ובאמצעות חשבונות Azure Active Directory. מידע נוסף על Azure Active Directory v2.0
2. כשרושמים אפליקציות אצל הספקים האלה, חשוב לרשום את הדומיין *.firebaseapp.com של הפרויקט כדומיין ההפניה של האפליקציה.
לוחצים על שמירה.

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

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

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

יוצרים מופע של 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

אופציונלי: מציינים פרמטרים נוספים של 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

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

כדי לאפשר רק למשתמשים מדייר (tenant) מסוים ב-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

אופציונלי: מציינים היקפי הרשאות נוספים של OAuth 2.0 מעבר לפרופיל הבסיסי שרוצים לבקש מספק האימות.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
מידע נוסף מופיע במסמכים בנושא הרשאות והסכמה של מיקרוסופט.

מתבצע אימות ב-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 Auth, מיקרוסופט לא מספקת כתובת URL של תמונה. במקום זאת, צריך לשלוח בקשה לנתונים הבינאריים של תמונת הפרופיל דרך Microsoft Graph API.

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

בדוגמאות שלמעלה התמקדנו בתהליכי כניסה, אבל אפשר גם לקשר ספק של מיקרוסופט למשתמש קיים באמצעות 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

אפשר להשתמש באותה תבנית עם 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

טיפול בשגיאות מסוג account-exists-with-different-credential

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

אם משתמשים ב-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,‏ פייסבוק ו-Twitter, שבהם אפשר להיכנס ישירות באמצעות אישורי גישה ל-OAuth, אימות ב-Firebase לא תומך באותה יכולת עבור ספקים כמו מיקרוסופט. הסיבה לכך היא ששרת האימות ב-Firebase לא יכול לאמת את קהל היעד של טוקני הגישה ל-OAuth של מיקרוסופט. זהו דרישת אבטחה קריטית, והיא עלולה לחשוף אפליקציות ואתרים להתקפות שידור חוזר, שבהן אפשר להשתמש בטוקן גישה ל-OAuth של מיקרוסופט שהושג עבור פרויקט אחד (התוקף) כדי להיכנס לפרויקט אחר (הקורבן). במקום זאת, אימות ב-Firebase מאפשר לטפל בתהליך OAuth כולו ולהחליף את קוד ההרשאה באמצעות מזהה הלקוח והסוד של OAuth שהוגדרו במסוף Firebase. מכיוון שאפשר להשתמש בקוד ההרשאה רק בשילוב עם מזהה לקוח או סוד ספציפיים, אי אפשר להשתמש בקוד הרשאה שהושג עבור פרויקט אחד בפרויקט אחר.

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

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

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

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

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

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

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

כשמפעילים את ספריית ה-JavaScript, מציינים את הדומיין המותאם אישית בשדה authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

השלבים הבאים

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

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

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

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

Web

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

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

אימות באמצעות Microsoft באמצעות JavaScript קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.