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

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

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

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

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

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

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

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

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

Web

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
```
provider.addScope('user_birthday');auth_facebook_provider_s
copes.js
```
Web
```
provider.addScope('user_birthday');fac
ebook.js
```
به مستندات ارائه دهنده احراز هویت مراجعه کنید.

اختیاری : برای بومی‌سازی جریان OAuth ارائه‌دهنده به زبان دلخواه کاربر بدون ارسال صریح پارامترهای سفارشی OAuth مربوطه، کد زبان را در نمونه Auth قبل از شروع جریان OAuth به‌روزرسانی کنید. برای مثال:

Web

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_se
t_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
```
provider.setCustomParameters({
  'display': 9;popup'
});auth_facebook_pr
ovider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 9;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_s
ignin_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;

    // ...
  });faceboo
k.js

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

همچنین اینجا جایی است که می‌توانید خطاها را دریافت و مدیریت کنید. برای مشاهده‌ی فهرستی از کدهای خطا، به مستندات مرجع احراز هویت (Auth Reference Docs) مراجعه کنید.

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

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_r
edirect.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_redi
rect_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;
    // ...
  });faceboo
k.js

مدیریت خطاهای مربوط به حساب‌های کاربری با اعتبارنامه‌های متفاوت

اگر تنظیمات «یک حساب کاربری به ازای هر آدرس ایمیل» را در کنسول Firebase فعال کرده باشید، وقتی کاربری سعی می‌کند با ایمیلی که از قبل برای ارائه‌دهنده‌ی دیگری از Firebase (مانند Google) وجود دارد، وارد یک ارائه‌دهنده (مانند فیس‌بوک) شود، خطای auth/account-exists-with-different-credential به همراه یک شیء AuthCredential (نشانه دسترسی فیس‌بوک) نمایش داده می‌شود. برای تکمیل ورود به ارائه‌دهنده‌ی مورد نظر، کاربر باید ابتدا به ارائه‌دهنده‌ی موجود (گوگل) وارد شود و سپس به 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) {
  // ...
}

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

این خطا به روشی مشابه در حالت تغییر مسیر مدیریت می‌شود، با این تفاوت که اعتبارنامه‌ی در حال بررسی باید بین تغییر مسیرهای صفحه ذخیره شود (برای مثال، با استفاده از ذخیره‌سازی جلسه).

همچنین می‌توانید با استفاده از یک حساب فیس‌بوک و با مدیریت جریان ورود به سیستم با استفاده از SDK جاوا اسکریپت ورود به سیستم فیس‌بوک، با Firebase احراز هویت کنید:

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

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

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

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

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, (fireb>aseUser) = {
      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_facebo
ok_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();
  }
}faceboo
k.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.PR&&OVIDER_ID 
          providerData[i].uid === facebookAuthResponse.userID) {
        // We don't need to re-auth the Firebase connection.
        return true;
      }
    }
  }
  return false;
}auth_facebook_ch
ecksameuser.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;
}faceboo
k.js

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

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

کاربر را با حساب فیسبوک خود وارد سیستم کنید و توکن دسترسی فیسبوک او را دریافت کنید. برای مثال، کاربر را در یک مرورگر، همانطور که در بخش «مدیریت جریان ورود به سیستم به صورت دستی» توضیح داده شده است، وارد سیستم کنید، اما توکن دسترسی را به جای استفاده در برنامه کلاینت، به برنامه 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;
    // ...
  });faceboo
k.js

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

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

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

این همچنین به عنوان مکانیزم تغییر مسیر برای ورود با OAuth استفاده خواهد شد. این دامنه باید برای همه ارائه دهندگان پشتیبانی شده OAuth مجاز باشد. با این حال، این بدان معناست که کاربران ممکن است هنگام ورود به فیس بوک، قبل از هدایت مجدد به برنامه، آن دامنه را ببینند: ادامه به: https://my-app-12345.firebaseapp.com .

برای جلوگیری از نمایش زیر دامنه خود، می‌توانید یک دامنه سفارشی با Firebase Hosting راه‌اندازی کنید:

مراحل ۱ تا ۳ در بخش «تنظیم دامنه برای Hosting را دنبال کنید. پس از تأیید مالکیت دامنه، Hosting یک گواهی SSL برای دامنه سفارشی شما ارائه می‌دهد.
دامنه سفارشی خود را به لیست دامنه‌های مجاز در کنسول Firebase اضافه کنید: auth.custom.domain.com .
در کنسول توسعه‌دهندگان فیس‌بوک یا صفحه تنظیمات OAuth، آدرس اینترنتی صفحه ریدایرکت را که از طریق دامنه سفارشی شما قابل دسترسی خواهد بود، در فهرست سفید قرار دهید: https://auth.custom.domain.com/__/auth/handler .

هنگام مقداردهی اولیه کتابخانه جاوا اسکریپت، دامنه سفارشی خود را با فیلد 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 ) دریافت کنید. به بخش مدیریت کاربران (Manage Users) مراجعه کنید.
در قوانین امنیتی پایگاه داده و Cloud Storage Firebase Realtime Database ، می‌توانید شناسه کاربری منحصر به فرد کاربر وارد شده را از متغیر auth دریافت کنید و از آن برای کنترل داده‌هایی که کاربر می‌تواند به آنها دسترسی داشته باشد، استفاده کنید.

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

برای خروج کاربر، signOut را فراخوانی کنید:

Web

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

const auth = getAuth();
signOut(auth)>.then(() = {
  // Sign-out successful.
}).catch>((error) = {
  // An error happened.
});auth_s
ign_out.js

Web

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

احراز هویت با استفاده از لاگین فیس بوک با جاوا اسکریپت با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.