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

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

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

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

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

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

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

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

   Web

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

   Web

   var provider = new firebase.auth.GithubAuthProvider();
   github.js

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

   Web

   provider.addScope('repo');
   auth_github_provider_scopes.js

   Web

   provider.addScope('repo');
   github.js

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

   Web

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   auth_github_provider_params.js

   Web

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   github.js

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

     Web

     import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // This gives you a GitHub Access Token. You can use it to access the GitHub API.
         const credential = GithubAuthProvider.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 = GithubAuthProvider.credentialFromError(error);
         // ...
       });
     auth_github_signin_popup.js

     Web

     firebase
       .auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // This gives you a GitHub Access Token. You can use it to access the GitHub 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;
         // ...
       });
     github.js

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

     همچنین اینجا جایی است که می‌توانید خطاها را دریافت و مدیریت کنید. برای مشاهده‌ی فهرستی از کدهای خطا، به مستندات مرجع احراز هویت (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 ارائه‌دهنده GitHub را نیز بازیابی کنید:

     Web

     import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then((result) => {
         const credential = GithubAuthProvider.credentialFromResult(result);
         if (credential) {
           // This gives you a GitHub Access Token. You can use it to access the GitHub API.
           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 = GithubAuthProvider.credentialFromError(error);
         // ...
       });
     auth_github_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 GitHub Access Token. You can use it to access the GitHub 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;
         // ...
       });
     github.js

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

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

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

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

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

1. با دنبال کردن مستندات توسعه‌دهنده، احراز هویت GitHub را در برنامه خود ادغام کنید. در پایان فرآیند ورود به سیستم GitHub، یک توکن دسترسی OAuth 2.0 دریافت خواهید کرد.
2. اگر نیاز به ورود به سیستم در یک برنامه Node.js دارید، توکن دسترسی OAuth را به برنامه Node.js ارسال کنید.
3. پس از اینکه کاربر با موفقیت با GitHub وارد سیستم شد، توکن دسترسی OAuth 2.0 را با یک اعتبارنامه Firebase مبادله کنید:

   Web

   import { GithubAuthProvider } from "firebase/auth";
   
   const credential = GithubAuthProvider.credential(token);
   auth_github_provider_credential.js

   Web

   var credential = firebase.auth.GithubAuthProvider.credential(token);
   github.js

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

   Web

   import { getAuth, signInWithCredential } from "firebase/auth";
   
   // Sign in with the credential from the user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .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;
       // ...
     });
   auth_signin_credential.js

   Web

   // Sign in with the credential from the user.
   firebase.auth()
     .signInWithCredential(credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .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;
       // ...
     });
   index.js

احراز هویت با 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