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

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

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

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

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

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

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

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

   Web

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

   Web

   var provider = new firebase.auth.GoogleAuthProvider();
   google-signin.js

2. اختیاری : محدوده‌های اضافی OAuth 2.0 را که می‌خواهید از ارائه‌دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، تابع addScope را فراخوانی کنید. برای مثال:

   Web

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

   Web

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

   به مستندات ارائه دهنده احراز هویت مراجعه کنید.
3. اختیاری : برای بومی‌سازی جریان 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

4. اختیاری : پارامترهای اضافی ارائه دهنده OAuth سفارشی را که می‌خواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی، setCustomParameters را روی ارائه دهنده مقداردهی اولیه شده با یک شیء حاوی کلید مشخص شده توسط مستندات ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال:

   Web

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

   Web

   provider.setCustomParameters({
     'login_hint': 'user@example.com'
   });
   google-signin.js

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

     Web

     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;
         // 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 = GoogleAuthProvider.credentialFromError(error);
         // ...
       });
     auth_google_signin_popup.js

     Web

     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;
         // 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;
         // ...
       });
     google-signin.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, 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;
         // 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 = GoogleAuthProvider.credentialFromError(error);
         // ...
       });
     auth_google_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 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;
         // 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;
         // ...
       });
     google-signin.js

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

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

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google 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 Google 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 در افزونه Chrome

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

مراحل بعدی

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

• در برنامه‌های شما، روش توصیه‌شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر (observer) روی شیء Auth است. سپس می‌توانید اطلاعات اولیه پروفایل کاربر را از شیء User ) دریافت کنید. به بخش مدیریت کاربران (Manage Users) مراجعه کنید.

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

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

برای خروج کاربر، signOut را فراخوانی کنید:

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

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

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