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

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

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

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

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

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

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

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

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

Web

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web

var provider = new firebase.auth.TwitterAuthProvider();twitter.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({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
پارامترهای رزرو شده و الزامی OAuth مجاز نیستند و نادیده گرفته می‌شوند. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.

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

برای ورود به سیستم با یک پنجره پاپ‌آپ، تابع signInWithPopup را فراخوانی کنید:

Web

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    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;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web

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

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

    // 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;
    // ...
  });twitter.js

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

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

برای ورود به سیستم با هدایت به صفحه ورود، تابع 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, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    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;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_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 the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

    // 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;
    // ...
  });twitter.js

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

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

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

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

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter 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 Twitter 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) {
  // ...
}

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

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

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

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

با دنبال کردن مستندات توسعه‌دهنده ، احراز هویت توییتر را در برنامه خود ادغام کنید. در پایان فرآیند ورود به توییتر، یک توکن دسترسی OAuth و یک رمز OAuth دریافت خواهید کرد.
اگر نیاز به ورود به سیستم در یک برنامه Node.js دارید، توکن دسترسی OAuth و رمز OAuth را به برنامه Node.js ارسال کنید.
پس از اینکه کاربر با موفقیت از طریق توییتر وارد سیستم شد، توکن دسترسی OAuth و رمز OAuth را با یک اعتبارنامه Firebase مبادله کنید:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

با استفاده از اعتبارنامه Firebase، با Firebase احراز هویت کنید:

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

اگر در حال ساخت یک برنامه افزونه کروم هستید، به راهنمای اسناد 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_sign_out.js

Web

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

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