احراز هویت با استفاده از مایکروسافت با جاوا اسکریپت

می‌توانید با استفاده از Firebase SDK به کاربران خود اجازه دهید با استفاده از ارائه‌دهندگان OAuth مانند Microsoft Azure Active Directory با ادغام ورود به سیستم OAuth عمومی در برنامه خود با استفاده از Firebase SDK احراز هویت کنند.

قبل از اینکه شروع کنی

برای ورود کاربران با استفاده از حساب‌های مایکروسافت (Azure Active Directory و حساب‌های شخصی مایکروسافت)، ابتدا باید Microsoft را به‌عنوان ارائه‌دهنده ورود برای پروژه Firebase خود فعال کنید:

  1. Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
  2. در کنسول Firebase ، بخش Auth را باز کنید.
  3. در زبانه روش ورود به سیستم، ارائه دهنده مایکروسافت را فعال کنید.
  4. شناسه مشتری و Client Secret را از کنسول توسعه دهنده آن ارائه دهنده به پیکربندی ارائه دهنده اضافه کنید:
    1. برای ثبت یک سرویس گیرنده Microsoft OAuth، دستورالعمل‌های موجود در Quickstart را دنبال کنید: یک برنامه را با نقطه پایانی Azure Active Directory v2.0 ثبت کنید. توجه داشته باشید که این نقطه پایانی از ورود به سیستم با استفاده از حساب‌های شخصی مایکروسافت و همچنین حساب‌های Azure Active Directory پشتیبانی می‌کند. درباره Azure Active Directory نسخه 2.0 بیشتر بدانید .
    2. هنگام ثبت برنامه در این ارائه دهندگان، مطمئن شوید که دامنه *.firebaseapp.com را برای پروژه خود به عنوان دامنه تغییر مسیر برای برنامه خود ثبت کنید.
  5. روی ذخیره کلیک کنید.

جریان ورود به سیستم را با Firebase SDK مدیریت کنید

اگر در حال ساختن یک برنامه وب هستید، ساده‌ترین راه برای احراز هویت کاربران با Firebase با استفاده از حساب‌های مایکروسافت آن‌ها، مدیریت کل جریان ورود به سیستم با Firebase JavaScript SDK است.

برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:

  1. یک نمونه از یک OAuthProvider با استفاده از شناسه ارائه دهنده microsoft.com ایجاد کنید.

    Web version 9

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    Web version 8

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

  2. اختیاری : پارامترهای سفارشی OAuth اضافی را که می خواهید با درخواست OAuth ارسال کنید، مشخص کنید.

    Web version 9

    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 version 8

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

    برای پارامترهایی که مایکروسافت پشتیبانی می کند، به مستندات Microsoft OAuth مراجعه کنید. توجه داشته باشید که نمی‌توانید پارامترهای مورد نیاز Firebase را با setCustomParameters() ارسال کنید. این پارامترها عبارتند از client_id , answer_type , redirect_uri , state , scope و answer_mode .

    برای اینکه فقط کاربران یک مستاجر Azure AD خاص بتوانند وارد برنامه شوند، می توان از نام دامنه دوستانه مستاجر Azure AD یا شناسه GUID مستاجر استفاده کرد. این را می توان با تعیین فیلد "مستاجر" در شیء پارامترهای سفارشی انجام داد.

    Web version 9

    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 version 8

    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. با استفاده از شی ارائه دهنده OAuth با Firebase احراز هویت کنید. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم از کاربران خود بخواهید با حساب های مایکروسافت خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.

    • برای ورود به سیستم با یک پنجره بازشو، signInWithPopup تماس بگیرید:

    Web version 9

    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 version 8

    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 version 9

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_msft_signin_redirect.js

    Web version 8

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

    پس از تکمیل ورود کاربر و بازگشت به صفحه، می توانید با فراخوانی getRedirectResult نتیجه ورود را دریافت کنید.

    Web version 9

    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 version 8

    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 در کد ID مختص برنامه است و با شناسه کاربر فدرال استفاده شده توسط Firebase Auth و قابل دسترسی از طریق user.providerData[0].uid . به جای آن باید از فیلد ادعای oid استفاده شود. هنگام استفاده از مستاجر Azure AD برای ورود به سیستم، ادعای oid کاملاً مطابقت دارد. با این حال، برای مورد غیر مستاجر، فیلد oid پر شده است. برای شناسه فدرال 4b2eabcdefghijkl ، oid دارای فرم 00000000-0000-0000-4b2e-abcdefghijkl خواهد بود.

  5. در حالی که مثال‌های بالا بر جریان‌های ورود تمرکز دارند، شما همچنین می‌توانید با استفاده از linkWithPopup / linkWithRedirect یک ارائه‌دهنده مایکروسافت را به یک کاربر موجود پیوند دهید. برای مثال، می‌توانید چندین ارائه‌دهنده را به یک کاربر پیوند دهید و به آنها اجازه دهید با هر یک از آنها وارد سیستم شوند.

    Web version 9

    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 version 8

    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 version 9

    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 version 8

    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 در یک برنامه افزودنی Chrome

اگر در حال ساخت یک برنامه افزودنی Chrome هستید، باید شناسه برنامه افزودنی Chrome خود را اضافه کنید:

  1. پروژه خود را در کنسول Firebase باز کنید.
  2. در بخش Authentication ، صفحه روش ورود به سیستم را باز کنید.
  3. یک URI مانند زیر به لیست دامنه های مجاز اضافه کنید: 
    chrome-extension://CHROME_EXTENSION_ID

فقط عملیات بازشو ( signInWithPopup ، linkWithPopup ، و reauthenticateWithPopup ) برای برنامه‌های افزودنی Chrome در دسترس است، زیرا برنامه‌های افزودنی Chrome نمی‌توانند از تغییر مسیرهای HTTP استفاده کنند. شما باید این روش‌ها را از یک اسکریپت صفحه پس‌زمینه فراخوانی کنید تا از یک پنجره عملکرد مرورگر، زیرا پنجره بازشو احراز هویت، پنجره عملیات مرورگر را لغو می‌کند. روش‌های بازشو فقط در برنامه‌های افزودنی با استفاده از Manifest V2 قابل استفاده هستند. Manifest V3 جدیدتر فقط به اسکریپت‌های پس‌زمینه در قالب سرویس‌دهندگان اجازه می‌دهد، که اصلاً نمی‌توانند عملیات بازشو را انجام دهند.

در فایل مانیفست افزونه Chrome خود، مطمئن شوید که URL https://apis.google.com را به لیست مجاز content_security_policy اضافه کنید.

مراحل بعدی

پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد می‌شود و به اعتبارنامه‌ها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائه‌دهنده تاییدیه) مرتبط می‌شود که کاربر با آن وارد شده است. این حساب جدید به‌عنوان بخشی از پروژه Firebase شما ذخیره می‌شود و می‌توان از آن برای شناسایی کاربر در همه برنامه‌های پروژه شما، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.

  • در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی Auth است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شی User دریافت کنید. به مدیریت کاربران مراجعه کنید.

  • در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، می‌توانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر auth دریافت کنید و از آن برای کنترل داده‌هایی که کاربر می‌تواند به آن دسترسی داشته باشد استفاده کنید.

می‌توانید به کاربران اجازه دهید با استفاده از چندین ارائه‌دهنده احراز هویت، با پیوند دادن اعتبار ارائه‌دهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.

برای خروج از سیستم کاربر، با خروج از سیستم تماس signOut :

Web version 9

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 version 8

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