با استفاده از Twitter در JavaScript احراز هویت شوید

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

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

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

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

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

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

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

    نسخه وب 9

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    نسخه وب 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. اختیاری: برای ترجمه و بومی سازی جریان OAuth حفظ ارائه دهنده به زبان مورد نظر کاربر به صراحت و بدون عبور از پارامترهای OAuth حفظ سفارشی مربوطه، کد زبان در نمونه تایید به روز رسانی قبل از شروع جریان OAuth تأیید. مثلا:

    نسخه وب 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    نسخه وب 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. اختیاری: مشخص پارامترهای ارائه دهنده OAuth حفظ سفارشی اضافی که شما می خواهید برای ارسال با درخواست OAuth تأیید. برای اضافه کردن یک پارامتر های سفارشی، پاسخ setCustomParameters به ارائه دهنده مقداردهی اولیه با یک شیء شامل کلید به عنوان اسناد و مدارک ارائه دهنده OAuth حفظ و ارزش مربوطه مشخص شده است. مثلا:

    نسخه وب 9

    provider.setCustomParameters({
      'lang': 'es'
    });

    نسخه وب 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    پارامترهای مورد نیاز OAuth مجاز نیستند و نادیده گرفته می شوند. را ببینید مرجع ارائه دهنده احراز هویت برای جزئیات بیشتر.
  4. با استفاده از شیء ارائه دهنده توییتر با Firebase احراز هویت کنید. شما می توانید با باز کردن یک پنجره بازشو یا تغییر مسیر به صفحه ورود به سیستم ، از کاربران خود بخواهید با حساب های توییتر خود وارد سیستم شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
    • برای ثبت نام با یک پنجره پاپ آپ، پاسخ signInWithPopup :

      نسخه وب 9

      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;
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      نسخه وب 8

      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;
          // ...
        }).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 های توییتر استفاده شود.

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

    • برای ثبت نام با تغییر مسیر به صفحه ورود به سیستم، پاسخ signInWithRedirect :

      نسخه وب 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      نسخه وب 8

      firebase.auth().signInWithRedirect(provider);
      سپس، شما همچنین می توانید کد OAuth ارائه دهنده توییتر را با تماس بازیابی getRedirectResult زمانی که بارهای صفحه خود قرار دهید:

      نسخه وب 9

      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;
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      نسخه وب 8

      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;
        }).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 OAuth با Firebase احراز هویت کنید:

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

    نسخه وب 9

    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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    نسخه وب 8

    // 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 هستید ، باید شناسه افزونه Chrome خود را اضافه کنید:

  1. پروژه خود را در را باز کنسول فایربیس .
  2. در بخش احراز هویت، باز کردن صفحه ورود به سیستم روش.
  3. اضافه کردن یک URI مانند زیر را به لیست مجاز دامنه:
    chrome-extension://CHROME_EXTENSION_ID

فقط عملیات پنجره ( signInWithPopup ، linkWithPopup و reauthenticateWithPopup ) در دسترس برنامههای افزودنی Chrome، به عنوان برنامههای افزودنی Chrome می توانید HTTP تغییرمسیر استفاده نمی کند. شما باید این روشها را از یک اسکریپت صفحه پس زمینه به جای یک پنجره عمل مرورگر فراخوانی کنید ، زیرا پنجره احراز هویت پنجره عملکرد مرورگر را لغو می کند. روش پنجره تنها ممکن است در پسوند با استفاده از استفاده از اظهارنامه V2 . جدیدتر آشکار V3 تنها اجازه می دهد تا اسکریپت پس زمینه در قالب کارگران خدمات، که می تواند عملیات پنجره در همه انجام نمی دهد.

در مانیفست فایل را برنامه افزودنی Chrome خود را حاصل کنید که شما اضافه کردن https://apis.google.com URL به content_security_policy allowlist.

مراحل بعدی

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

  • در برنامه های خود را، راه توصیه می شود به دانستن وضعیت تایید از کاربر خود را این است که مجموعه یک ناظر در Auth شی. بعد از آن شما می توانید اطلاعات نمایه کاربر از User شی. مشاهده مدیریت کاربران .

  • در خود پایگاه فایربیس بیدرنگ و ابر ذخیره سازی قوانین امنیتی ، شما می توانید دریافت امضا در شناسه کاربری منحصر به فرد کاربر را از auth متغیر، و استفاده از آن برای کنترل آنچه داده دسترسی کاربر می تواند.

شما می توانید اجازه به کاربران برای ورود به سیستم برنامه خود را با استفاده از ارائه دهندگان تأیید هویت چندگانه توسط ارتباط تایید اعتبار ارائه دهنده به یک حساب کاربری موجود.

برای خروج از سیستم یک کاربر، پاسخ signOut :

نسخه وب 9

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

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

نسخه وب 8

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