با ادغام احراز هویت GitHub در برنامه خود، می توانید به کاربران خود اجازه دهید با استفاده از حساب های GitHub خود با Firebase احراز هویت کنند. میتوانید احراز هویت GitHub را با استفاده از Firebase SDK برای انجام جریان ورود به سیستم، یا با انجام دستی جریان GitHub OAuth 2.0 و ارسال توکن دسترسی به Firebase، ادغام کنید.
قبل از شروع
- Firebase را به پروژه جاوا اسکریپت خود اضافه کنید .
- در کنسول Firebase ، بخش Auth را باز کنید.
- در زبانه روش ورود به سیستم ، ارائه دهنده GitHub را فعال کنید.
- شناسه مشتری و Client Secret را از کنسول توسعه دهنده آن ارائه دهنده به پیکربندی ارائه دهنده اضافه کنید:
- برنامه خود را به عنوان یک برنامه توسعه دهنده در GitHub ثبت کنید و شناسه مشتری OAuth 2.0 و Client Secret برنامه خود را دریافت کنید.
- مطمئن شوید که URI تغییر مسیر Firebase OAuth شما (به عنوان مثال
my-app-12345.firebaseapp.com/__/auth/handler
) به عنوان URL بازگشت به تماس مجوز شما در صفحه تنظیمات برنامه شما در پیکربندی برنامه GitHub شما تنظیم شده است.
- روی ذخیره کلیک کنید.
جریان ورود به سیستم را با Firebase SDK مدیریت کنید
اگر در حال ساختن یک برنامه وب هستید، ساده ترین راه برای احراز هویت کاربران خود با Firebase با استفاده از حساب های GitHub آنها، مدیریت جریان ورود به سیستم با Firebase JavaScript SDK است. (اگر می خواهید یک کاربر را در Node.js یا سایر محیط های غیر مرورگر احراز هویت کنید، باید جریان ورود به سیستم را به صورت دستی مدیریت کنید.)
برای مدیریت جریان ورود به سیستم با Firebase JavaScript SDK، این مراحل را دنبال کنید:
- یک نمونه از شی ارائه دهنده GitHub ایجاد کنید:
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
var provider = new firebase.auth.GithubAuthProvider();
- اختیاری : دامنه های OAuth 2.0 دیگری را که می خواهید از ارائه دهنده احراز هویت درخواست کنید، مشخص کنید. برای افزودن یک محدوده، با
addScope
تماس بگیرید. به عنوان مثال: به مستندات ارائه دهنده احراز هویت مراجعه کنید.provider.addScope('repo');
provider.addScope('repo');
- اختیاری : پارامترهای اضافی ارائهدهنده OAuth را که میخواهید با درخواست OAuth ارسال کنید، مشخص کنید. برای افزودن یک پارامتر سفارشی،
setCustomParameters
در ارائه دهنده اولیه با یک شی حاوی کلید مشخص شده توسط اسناد ارائه دهنده OAuth و مقدار مربوطه فراخوانی کنید. به عنوان مثال: پارامترهای OAuth مورد نیاز رزرو شده مجاز نیستند و نادیده گرفته خواهند شد. برای جزئیات بیشتر به مرجع ارائه دهنده احراز هویت مراجعه کنید.provider.setCustomParameters({ 'allow_signup': 'false' });
provider.setCustomParameters({ 'allow_signup': 'false' });
- با استفاده از شی ارائه دهنده GitHub با Firebase احراز هویت کنید. میتوانید از کاربران خود بخواهید با حسابهای GitHub خود وارد شوند یا با باز کردن یک پنجره بازشو یا با هدایت مجدد به صفحه ورود به سیستم. روش تغییر مسیر در دستگاه های تلفن همراه ترجیح داده می شود.
- برای ورود به سیستم با یک پنجره بازشو،
signInWithPopup
را تماس بگیرید: همچنین توجه داشته باشید که می توانید توکن OAuth ارائه دهنده GitHub را بازیابی کنید که می تواند برای واکشی داده های اضافی با استفاده از API های GitHub استفاده شود.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); // ... });
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; // ... });
این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.
- برای ورود به صفحه ورود به سیستم، با
signInWithRedirect
تماس بگیرید: هنگام استفاده از «signInWithRedirect» ، بهترین روشها را دنبال کنید. سپس، میتوانید با فراخوانیimport { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
هنگام بارگیری صفحه، توکن OAuth ارائهدهنده GitHub را بازیابی کنید: این نیز جایی است که می توانید خطاها را پیدا کرده و کنترل کنید. برای فهرستی از کدهای خطا، به اسناد مرجع تأییدیه نگاهی بیندازید.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); // ... });
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; // ... });
- برای ورود به سیستم با یک پنجره بازشو،
Handling account-exists-with-different-credential Errors
اگر تنظیم یک حساب برای هر آدرس ایمیل را در کنسول Firebase فعال کرده باشید، وقتی کاربر سعی میکند با ایمیلی که از قبل برای ارائهدهنده کاربر دیگر Firebase (مانند Google) وجود دارد، به یک ارائهدهنده (مانند GitHub) وارد شود، این خطا رخ میدهد. auth/account-exists-with-different-credential
همراه با یک شی AuthCredential
(توکن دسترسی GitHub) پرتاب می شود. برای تکمیل ورود به سیستم ارائه دهنده مورد نظر، کاربر باید ابتدا به ارائه دهنده موجود (Google) وارد شود و سپس به AuthCredential
قبلی (توکن دسترسی GitHub) پیوند دهد.
حالت پاپ آپ
اگر از signInWithPopup
استفاده می کنید، می توانید خطاهای auth/account-exists-with-different-credential
با کدهایی مانند مثال زیر مدیریت کنید:
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 احراز هویت کنید:
- با دنبال کردن اسناد توسعه دهنده، احراز هویت GitHub را در برنامه خود ادغام کنید. در پایان جریان ورود به سیستم GitHub، یک نشانه دسترسی OAuth 2.0 دریافت خواهید کرد.
- اگر نیاز به ورود به برنامه Node.js دارید، رمز دسترسی OAuth را به برنامه Node.js ارسال کنید.
- پس از اینکه کاربر با موفقیت وارد سیستم GitHub شد، رمز دسترسی OAuth 2.0 را با اعتبار Firebase مبادله کنید:
import { GithubAuthProvider } from "firebase/auth"; const credential = GithubAuthProvider.credential(token);
var credential = firebase.auth.GithubAuthProvider.credential(token);
- احراز هویت با Firebase با استفاده از اعتبار Firebase:
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; // ... });
// 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 هستید، راهنمای اسناد خارج از صفحه را ببینید.
سفارشی کردن دامنه تغییر مسیر برای ورود به سیستم GitHub
هنگام ایجاد پروژه، Firebase یک زیر دامنه منحصر به فرد برای پروژه شما فراهم می کند: https://my-app-12345.firebaseapp.com
.
این همچنین به عنوان مکانیزم تغییر مسیر برای ورود به سیستم OAuth استفاده می شود. این دامنه باید برای همه ارائه دهندگان OAuth پشتیبانی شده مجاز باشد. با این حال، این بدان معنی است که کاربران ممکن است در حین ورود به GitHub قبل از هدایت مجدد به برنامه، آن دامنه را ببینند: به: https://my-app-12345.firebaseapp.com ادامه دهید .
برای جلوگیری از نمایش ساب دامنه خود، می توانید یک دامنه سفارشی با Firebase Hosting راه اندازی کنید:
- مراحل 1 تا 3 را در تنظیم دامنه خود برای Hosting دنبال کنید. هنگامی که مالکیت دامنه خود را تأیید می کنید، Hosting یک گواهی SSL برای دامنه سفارشی شما ارائه می دهد.
- دامنه سفارشی خود را به لیست دامنه های مجاز در کنسول Firebase اضافه کنید:
auth.custom.domain.com
. - در کنسول توسعهدهنده GitHub یا صفحه راهاندازی OAuth، URL صفحه تغییر مسیر را در لیست سفید قرار دهید، که در دامنه سفارشی شما قابل دسترسی خواهد بود:
https://auth.custom.domain.com/__/auth/handler
. - هنگامی که کتابخانه جاوا اسکریپت را مقداردهی اولیه می کنید، دامنه سفارشی خود را با فیلد
authDomain
مشخص کنید:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
مراحل بعدی
پس از اینکه کاربر برای اولین بار وارد سیستم شد، یک حساب کاربری جدید ایجاد میشود و به اعتبارنامهها (یعنی نام کاربری و رمز عبور، شماره تلفن یا اطلاعات ارائهدهنده تاییدیه) مرتبط میشود که کاربر با آن وارد شده است. این حساب جدید بهعنوان بخشی از پروژه Firebase شما ذخیره میشود و میتوان از آن برای شناسایی کاربر در همه برنامههای پروژه شما، صرف نظر از نحوه ورود کاربر به سیستم استفاده کرد.
در برنامه های شما، روش توصیه شده برای اطلاع از وضعیت احراز هویت کاربر، تنظیم یک ناظر بر روی شی
Auth
است. سپس می توانید اطلاعات اولیه پروفایل کاربر را از شیUser
دریافت کنید. به مدیریت کاربران مراجعه کنید.در قوانین امنیتی Firebase Realtime Database و Cloud Storage خود، میتوانید شناسه کاربری منحصر به فرد کاربر واردشده به سیستم را از متغیر
auth
دریافت کنید و از آن برای کنترل دادههایی که کاربر میتواند به آن دسترسی داشته باشد استفاده کنید.
میتوانید به کاربران اجازه دهید با استفاده از چندین ارائهدهنده احراز هویت، با پیوند دادن اعتبار ارائهدهنده تأیید اعتبار به یک حساب کاربری موجود، به برنامه شما وارد شوند.
برای خروج از سیستم کاربر، signOut
تماس بگیرید:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });