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

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

قبل از شروع

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

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

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

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

  1. یک نمونه از شی ارائه دهنده توییتر ایجاد کنید:
    WebWeb
    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();
    var provider = new firebase.auth.TwitterAuthProvider();
  2. اختیاری : برای بومی‌سازی جریان OAuth ارائه‌دهنده به زبان ترجیحی کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth به‌روزرسانی کنید. به عنوان مثال:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. اختیاری : پارامترهای اضافی ارائه‌دهنده OAuth را که می‌خواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی، setCustomParameters در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال:
    WebWeb
    provider.setCustomParameters({
      'lang': 'es'
    });
    provider.setCustomParameters({
      'lang': 'es'
    });
    پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.
  4. با استفاده از شی ارائه دهنده Twitter با Firebase احراز هویت کنید. می‌توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود، از کاربران خود بخواهید با حساب‌های توییتر خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
    • برای ورود به سیستم با یک پنجره بازشو، signInWithPopup را تماس بگیرید:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده توییتر را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های Twitter استفاده شود.

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

    • برای ورود به سیستم با هدایت مجدد به صفحه ورود به سیستم، با signInWithRedirect تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین شیوه ها را دنبال کنید.
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      سپس، می‌توانید با فراخوانی getRedirectResult هنگام بارگیری صفحه، توکن OAuth ارائه‌دهنده توییتر را بازیابی کنید:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.

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

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

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

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

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

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

  1. با دنبال کردن اسناد توسعه دهنده، احراز هویت توییتر را در برنامه خود ادغام کنید. در پایان جریان ورود به سیستم توییتر، یک نشانه دسترسی OAuth و یک رمز OAuth دریافت خواهید کرد.
  2. اگر نیاز به ورود به برنامه Node.js دارید، رمز دسترسی OAuth و رمز OAuth را به برنامه Node.js ارسال کنید.
  3. پس از اینکه کاربر با موفقیت وارد توییتر شد، رمز دسترسی OAuth و راز OAuth را با اعتبار Firebase مبادله کنید:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
  4. احراز هویت با Firebase با استفاده از اعتبار Firebase:
    WebWeb
    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);
        // ...
      });
    // 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;
        // ...
      });

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

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

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

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

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

  1. مراحل 1 تا 3 را در تنظیم دامنه خود برای Hosting دنبال کنید. هنگامی که مالکیت دامنه خود را تأیید می کنید، Hosting یک گواهی SSL برای دامنه سفارشی شما ارائه می دهد.
  2. دامنه سفارشی خود را به لیست دامنه های مجاز در کنسول Firebase اضافه کنید: auth.custom.domain.com .
  3. در کنسول توسعه‌دهنده توییتر یا صفحه راه‌اندازی OAuth، URL صفحه تغییر مسیر را در لیست سفید قرار دهید، که در دامنه سفارشی شما قابل دسترسی خواهد بود: https://auth.custom.domain.com/__/auth/handler .
  4. هنگامی که کتابخانه جاوا اسکریپت را مقداردهی اولیه می کنید، دامنه سفارشی خود را با فیلد 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 تماس بگیرید:

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

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