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

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

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

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

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

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

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

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

    Web modular API

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

    Web namespaced API

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

    Web modular API

    provider.addScope('repo');

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

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

      Web modular API

      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);
          // ...
        });

      Web namespaced API

      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;
          // ...
        });
      همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده GitHub را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های GitHub استفاده شود.

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

    • برای ورود به صفحه ورود به سیستم، با signInWithRedirect تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین روش‌ها را دنبال کنید.

      Web modular API

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

      Web namespaced API

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

      Web modular API

      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);
          // ...
        });

      Web namespaced API

      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 با کنترل جریان ورود به سیستم با تماس با نقاط پایانی GitHub OAuth 2.0 با Firebase احراز هویت کنید:

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

    Web modular API

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

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. احراز هویت با Firebase با استفاده از اعتبار Firebase:

    Web modular API

    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;
        // ...
      });

    Web namespaced API

    // 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;
        // ...
      });

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

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

مراحل بعدی

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

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

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

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

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

Web modular API

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

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

Web namespaced API

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