Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

احراز هویت با استفاده از لاگین فیس بوک با جاوا اسکریپت

با مجموعه‌ها، منظم بمانید ذخیره و دسته‌بندی محتوا براساس اولویت‌های شما.

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

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

  1. Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
  2. در سایت Facebook for Developers ، شناسه برنامه و یک App Secret را برای برنامه خود دریافت کنید.
  3. فعال کردن ورود به فیس بوک:
    1. در کنسول Firebase ، بخش Auth را باز کنید.
    2. در زبانه روش ورود ، روش ورود به فیس بوک را فعال کنید و شناسه برنامه و رمز برنامه را که از فیس بوک دریافت کرده اید را مشخص کنید.
    3. سپس، مطمئن شوید که URI تغییر مسیر OAuth شما (به عنوان مثال my-app-12345.firebaseapp.com/__/auth/handler ) به عنوان یکی از URI های تغییر مسیر OAuth شما در صفحه تنظیمات برنامه Facebook شما در سایت Facebook for Developers در محصول فهرست شده است. تنظیمات > پیکربندی ورود به فیس بوک .

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

اگر در حال ساخت یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های فیس بوک آنها، مدیریت جریان ورود به سیستم با Firebase JavaScript SDK است. (اگر می خواهید یک کاربر را در Node.js یا سایر محیط های غیر مرورگر احراز هویت کنید، باید جریان ورود به سیستم را به صورت دستی مدیریت کنید.)

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

  1. یک نمونه از شی ارائه دهنده فیس بوک ایجاد کنید:

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";
    
    const provider = new FacebookAuthProvider();

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
  2. اختیاری : محدوده های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با addScope تماس بگیرید. مثلا:

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    به مستندات ارائه دهنده احراز هویت مراجعه کنید.
  3. اختیاری : برای بومی سازی جریان OAuth ارائه دهنده به زبان برگزیده کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth به روز کنید. مثلا:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. اختیاری : پارامترهای اضافی ارائه‌دهنده OAuth را که می‌خواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی، setCustomParameters را در ارائه‌دهنده اولیه با یک شی حاوی کلید که توسط اسناد ارائه‌دهنده OAuth و مقدار مربوطه مشخص شده است، فراخوانی کنید. مثلا:

    Web version 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.
  5. احراز هویت با Firebase با استفاده از شی ارائه دهنده فیس بوک. شما می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم، از کاربران خود بخواهید با حساب های فیس بوک خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
    • برای ورود به سیستم با یک پنجره بازشو، signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
      
          // ...
        });
      همچنین توجه داشته باشید که می‌توانید توکن OAuth ارائه‌دهنده فیس‌بوک را بازیابی کنید که می‌تواند برای واکشی داده‌های اضافی با استفاده از APIهای Facebook استفاده شود.

      این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.

    • برای ورود به سیستم با تغییر مسیر به صفحه ورود به سیستم، signInWithRedirect تماس بگیرید:

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      سپس، می‌توانید با فراخوانی getRedirectResult هنگام بارگیری صفحه، توکن OAuth ارائه‌دهنده فیس‌بوک را بازیابی کنید:

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          const user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        }).catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
          // ...
        });
      این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.

با 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.
});

Web version 8

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