Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

با مجموعه‌ها، منظم بمانید ذخیره و دسته‌بندی محتوا براساس اولویت‌های شما.

می‌توانید به کاربران خود اجازه دهید با استفاده از حساب‌های Google خود با Firebase احراز هویت کنند. می‌توانید از Firebase SDK برای اجرای جریان ورود به سیستم Google استفاده کنید، یا جریان ورود به سیستم را به صورت دستی با استفاده از کتابخانه Sign In With Google انجام دهید و کد ID حاصل را به Firebase ارسال کنید.

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

  1. Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
  2. Google را به عنوان یک روش ورود به سیستم در کنسول Firebase فعال کنید:
    1. در کنسول Firebase ، بخش Auth را باز کنید.
    2. در برگه روش ورود به سیستم، روش ورود به سیستم Google را فعال کنید و روی ذخیره کلیک کنید.

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

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

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.GoogleAuthProvider();
  2. اختیاری : محدوده های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با addScope تماس بگیرید. مثلا:

    Web version 9

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    به مستندات ارائه دهنده احراز هویت مراجعه کنید.
  3. اختیاری : برای بومی سازی جریان OAuth ارائه دهنده به زبان برگزیده کاربر بدون ارسال صریح پارامترهای OAuth سفارشی مربوطه، قبل از شروع جریان OAuth، کد زبان را در نمونه Auth به روز کنید. مثلا:

    Web version 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();

    Web version 8

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

    Web version 9

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });

    Web version 8

    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.
  5. با استفاده از شی ارائه دهنده Google با Firebase احراز هویت کنید. می توانید با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم از کاربران خود بخواهید با حساب های Google خود وارد شوند. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
    • برای ورود به سیستم با یک پنجره بازشو، signInWithPopup :

      Web version 9

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // 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.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // 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 ارائه‌دهنده Google را بازیابی کنید که می‌تواند برای واکشی داده‌های اضافی با استفاده از APIهای Google استفاده شود.

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

    • برای ورود به سیستم با تغییر مسیر به صفحه ورود به سیستم، signInWithRedirect تماس بگیرید:

      Web version 9

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

      Web version 8

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

      Web version 9

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // 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.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // 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;
          // ...
        });
      این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.

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

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

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

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

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

مراحل بعدی

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

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

  • در قوانین امنیتی Firebase Realtime Database و Cloud Storage، می‌توانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر auth دریافت کنید و از آن برای کنترل داده‌هایی که کاربر می‌تواند به آن دسترسی داشته باشد استفاده کنید.

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

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

Web version 9

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

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

Web version 8

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