این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

قبل از شروع

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

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

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

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

یک نمونه از شی ارائه دهنده فیس بوک ایجاد کنید:
Web
درباره Web API مدولار قابل تکان دادن درخت بیشتر بیاموزید و از API فضای نامی ارتقا دهید .
```
import { FacebookAuthProvider } from "firebase/auth";

const provider = new FacebookAuthProvider();auth_facebook_provider_create.js
```
Web
```
var provider = new firebase.auth.FacebookAuthProvider();facebook.js
```
اختیاری : دامنه های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با addScope تماس بگیرید. به عنوان مثال:
Web
درباره Web API مدولار قابل تکان دادن درخت بیشتر بیاموزید و از API فضای نامی ارتقا دهید .
```
provider.addScope('user_birthday');auth_facebook_provider_scopes.js
```
Web
```
provider.addScope('user_birthday');facebook.js
```
به مستندات ارائه دهنده احراز هویت مراجعه کنید.
اختیاری : برای بومی‌سازی جریان OAuth ارائه‌دهنده به زبان ترجیحی کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth به‌روزرسانی کنید. به عنوان مثال:
Web
درباره Web API مدولار قابل تکان دادن درخت بیشتر بیاموزید و از API فضای نامی ارتقا دهید .
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
Web
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
اختیاری : پارامترهای اضافی ارائه دهنده OAuth سفارشی را که می خواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی، setCustomParameters در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال:
Web
درباره Web API مدولار قابل تکان دادن درخت بیشتر بیاموزید و از API فضای نامی ارتقا دهید .
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.

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

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

Web

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;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .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);

    // ...
  });auth_facebook_signin_popup.js

Web

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...

    // 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;

    // ...
  });facebook.js

همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده فیس بوک را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های فیس بوک استفاده شود.

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

برای ورود به صفحه ورود به سیستم، با signInWithRedirect تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین روش‌ها را دنبال کنید.

Web

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

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

Web

firebase.auth().signInWithRedirect(provider);index.js

سپس، می‌توانید با فراخوانی getRedirectResult هنگام بارگیری صفحه، توکن OAuth ارائه‌دهنده فیس‌بوک را بازیابی کنید:

Web

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;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).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);
    // ...
  });auth_facebook_signin_redirect_result.js

Web

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;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).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;
    // ...
  });facebook.js

Handling account-exists-with-different-credential Errors

اگر تنظیمات یک حساب برای هر آدرس ایمیل را در کنسول Firebase فعال کرده باشید، وقتی کاربر سعی می‌کند با ایمیلی که از قبل برای ارائه‌دهنده کاربر Firebase دیگر (مانند Google) وجود دارد، به یک ارائه‌دهنده (مانند Facebook) وارد شود، خطا auth/account-exists-with-different-credential همراه با یک شی AuthCredential (توکن دسترسی فیس بوک) پرتاب می شود. برای تکمیل ورود به سیستم ارائه دهنده مورد نظر، کاربر باید ابتدا به ارائه دهنده موجود (Google) وارد شود و سپس به AuthCredential قبلی (توکن دسترسی فیس بوک) پیوند دهد.

اگر از signInWithPopup استفاده می کنید، می توانید خطاهای auth/account-exists-with-different-credential با کدهایی مانند مثال زیر مدیریت کنید:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  FacebookAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Facebook.
  let result = await signInWithPopup(getAuth(), new FacebookAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Facebook 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 Facebook 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 با مدیریت جریان ورود به سیستم با SDK JavaScript Login Facebook احراز هویت کنید:

با دنبال کردن اسناد توسعه‌دهنده ، Login Facebook را در برنامه خود ادغام کنید. حتماً Login فیس بوک را با شناسه برنامه فیس بوک خود پیکربندی کنید:

<script src="//connect.facebook.net/en_US/sdk.js"></script>
<script>
  FB.init({
    /**********************************************************************
     * TODO(Developer): Change the value below with your Facebook app ID. *
     **********************************************************************/
    appId: '<YOUR_FACEBOOK_APP_ID>',
    status: true,
    xfbml: true,
    version: 'v2.6',
  });
</script>

ما همچنین یک شنونده را در وضعیت تأیید اعتبار فیس بوک تنظیم می کنیم:
```
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
```
پس از ادغام ورود به فیس بوک، یک دکمه ورود به فیس بوک را در صفحات وب خود اضافه کنید:
```
<fb:login-button
  data-auto-logout-link="true"
  scope="public_profile,email"
  size="large"
></fb:login-button>
```

در پاسخ به تماس وضعیت احراز هویت فیس بوک، رمز تأیید را از پاسخ تأیید هویت فیس بوک با اعتبار Firebase و ورود به سیستم Firebase مبادله کنید:

Web

import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth";
const auth = getAuth();

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        const credential = FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        signInWithCredential(auth, credential)
          .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);
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    signOut(auth);
  }
}auth_facebook_callback.js

Web

function checkLoginState(response) {
  if (response.authResponse) {
    // User is signed-in Facebook.
    var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => {
      unsubscribe();
      // Check if we are already signed-in Firebase with the correct user.
      if (!isUserEqual(response.authResponse, firebaseUser)) {
        // Build Firebase credential with the Facebook auth token.
        var credential = firebase.auth.FacebookAuthProvider.credential(
            response.authResponse.accessToken);

        // Sign in with the credential from the Facebook user.
        firebase.auth().signInWithCredential(credential)
          .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;
            // ...
          });
      } else {
        // User is already signed-in Firebase with the correct user.
      }
    });
  } else {
    // User is signed-out of Facebook.
    firebase.auth().signOut();
  }
}facebook.js

همچنین باید بررسی کنید که کاربر فیس‌بوک قبلاً وارد Firebase نشده باشد تا از تأیید مجدد غیرضروری جلوگیری کنید:

Web

import { FacebookAuthProvider } from "firebase/auth";

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    const providerData = firebaseUser.providerData;
    for (let i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_checksameuser.js

Web

function isUserEqual(facebookAuthResponse, firebaseUser) {
  if (firebaseUser) {
    var providerData = firebaseUser.providerData;
    for (var i = 0; i < providerData.length; i++) {
      if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID &&
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}facebook.js

پیشرفته: با Firebase در Node.js احراز هویت

برای احراز هویت با Firebase در برنامه Node.js:

کاربر را با حساب فیس بوک خود وارد کنید و رمز دسترسی فیس بوک کاربر را دریافت کنید. به عنوان مثال، همانطور که در بخش Handle the sign-in flow به صورت دستی توضیح داده شده است، کاربر را در مرورگر وارد کنید، اما رمز دسترسی را به جای استفاده از آن در برنامه مشتری، به برنامه Node.js خود ارسال کنید.

پس از دریافت رمز دسترسی فیس بوک کاربر، از آن برای ساختن یک شیء Credential استفاده کنید و سپس کاربر را با اعتبارنامه وارد کنید:

Web

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(result);
  })
  .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);
    // ...
  });auth_facebook_signin_credential.js

Web

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .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;
    // ...
  });facebook.js

احراز هویت با Firebase در افزونه Chrome

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

هنگام ایجاد پروژه، Firebase یک زیر دامنه منحصر به فرد برای پروژه شما فراهم می کند: https://my-app-12345.firebaseapp.com .

این همچنین به عنوان مکانیسم تغییر مسیر برای ورود به سیستم OAuth استفاده می شود. این دامنه باید برای همه ارائه دهندگان OAuth پشتیبانی شده مجاز باشد. با این حال، این بدان معنی است که کاربران ممکن است در حین ورود به فیس بوک قبل از هدایت مجدد به برنامه، آن دامنه را ببینند: به: 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 .

هنگامی که کتابخانه جاوا اسکریپت را مقداردهی اولیه می کنید، دامنه سفارشی خود را با فیلد authDomain مشخص کنید:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

مراحل بعدی

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

در برنامه‌های شما، روش توصیه‌شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی Auth است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شی User دریافت کنید. به مدیریت کاربران مراجعه کنید.
در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، می‌توانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر 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

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

قبل از شروع

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

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Handling account-exists-with-different-credential Errors

حالت پاپ آپ

حالت تغییر مسیر

پیشرفته: جریان ورود به سیستم را به صورت دستی مدیریت کنید

Web

Web

Web

Web

پیشرفته: با Firebase در Node.js احراز هویت

Web

Web

احراز هویت با Firebase در افزونه Chrome

سفارشی کردن دامنه تغییر مسیر برای ورود به فیس بوک

مراحل بعدی

Web

Web