אימות באמצעות 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

   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

   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 namespaced API

   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 של הדייר. ניתן לעשות זאת על ידי ציון השדה "דייר" באובייקט הפרמטרים המותאמים אישית.

   Web modular 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

   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

   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

   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

   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

   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

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 ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש המחובר ממשתנה 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