‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

اصالت‌سنجی بااستفاده از ورود به سیستم Facebook با جاوا اسکریپت

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

قبل از شروع

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

مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار Firebase»

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

برای مدیریت جریان ورود به سیستم با «کیت توسعه نرم‌افزار جاوا اسکریپت Firebase»، این مراحل را دنبال کنید:

نمونه‌ای از شیء ارائه‌دهنده Facebook ایجاد کنید:

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_scopes.js
```
Web
```
provider.addScope('user_birthday');facebook.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_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
```
provider.setCustomParameters({
  'display': 'popup'
});auth_facebook_provider_params.js
```
Web
```
provider.setCustomParameters({
  'display': 'popup'
});facebook.js
```
پارامترهای OAuth الزامی رزروشده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر، مرجع ارائه‌دهنده اصالت‌سنجی را ببینید.

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

برای ورود به سیستم با پنجره بالاپر، با 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 ارائه‌دهنده Facebook را بازیابی کنید که می‌توان از آن برای واکشی داده‌های اضافی بااستفاده از Facebook APIs استفاده کرد.

در اینجا می‌توانید خطاها را نیز شناسایی و مدیریت کنید. برای مشاهده فهرست کدهای خطا، به اسناد مرجع Auth نگاهی بیندازید.

برای ورود به سیستم با هدایت به صفحه ورود به سیستم، 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 ارائه‌دهنده Facebook را نیز بازیابی کنید:

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

رسیدگی به خطاهای account-exists-with-different-credential

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

اگر از 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) {
  // ...
}

حالت هدایت کردن

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

همچنین می‌توانید بااستفاده از حساب Facebook با Firebase اصالت‌سنجی کنید و جریان ورود به سیستم را با کیت توسعه نرم‌افزار Facebook Login JavaScript مدیریت کنید:

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

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

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

در برگشت وضعیت اصالت‌سنجی Facebook، نشان اصالت‌سنجی را از پاسخ اصالت‌سنجی Facebook با اطلاعات اعتباری 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:

کاربر را با «حساب Facebook» او به سیستم وارد کنید و «کد دسترسی Facebook» کاربر را دریافت کنید. برای مثال، کاربر را در مرورگر به سیستم وارد کنید، همان‌طور که در بخش جریان ورود به سیستم را به‌صورت دستی مدیریت کنید توضیح داده شده است، اما به‌جای استفاده از کد دسترسی در برنامه مشتری، آن را به برنامه Node.js خود ارسال کنید.

پس‌از دریافت کد دسترسی Facebook کاربر، از آن برای ساختن «شیء اطلاعات اعتباری» استفاده کنید و سپس کاربر را با اطلاعات اعتباری به سیستم وارد کنید:

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 پشتیبانی‌شده مجاز باشد. بااین‌حال، این یعنی کاربران ممکن است هنگام ورود به سیستم Facebook قبل‌از هدایت شدن به برنامه، این دامنه را ببینند: ادامه به: https://my-app-12345.firebaseapp.com.

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

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

وقتی کتابخانه JavaScript را مقداردهی اولیه می‌کنید، دامنه سفارشی‌تان را با فیلد 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 شما ذخیره می‌شود و می‌توان از آن برای شناسایی کاربر در همه برنامه‌های پروژه شما، صرف‌نظر از نحوه ورود کاربر به سیستم، استفاده کرد.

در برنامه‌هایتان، روش توصیه‌شده برای اطلاع از وضعیت اصالت‌سنجی کاربر این است که روی شیء 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

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