نحوه پیاده سازی OAuth در یک برنامه Express با استفاده از GitHub

بدون نیاز به نوشتن کد خود، حساب های کاربری را به وب سایت خود اضافه کنید. ورودهای ساده و ایمن را با OAuth و GitHub فعال کنید.

OAuth 2.0 استانداردی است که به برنامه های شخص ثالث اجازه می دهد به طور ایمن به داده های برنامه های وب دسترسی داشته باشند. می‌توانید از آن برای واکشی داده‌هایی از جمله اطلاعات نمایه، زمان‌بندی‌ها و غیره که در سایر برنامه‌های وب مانند Facebook، Google و GitHub میزبانی می‌شوند، استفاده کنید. یک سرویس می‌تواند این کار را از طرف یک کاربر بدون افشای اعتبار آنها در معرض برنامه شخص ثالث انجام دهد.

نحوه پیاده سازی OAuth را در برنامه Express با استفاده از GitHub به عنوان ارائه دهنده OAuth در چند مرحله بیاموزید.

جریان OAuth

در یک جریان معمولی OAuth، سایت شما گزینه ای را برای کاربران فراهم می کند تا با حساب شخص ثالث خود از ارائه دهنده ای مانند GitHub یا Facebook وارد شوند. کاربر می‌تواند این فرآیند را با کلیک کردن روی دکمه ورود OAuth مربوطه شروع کند.

این آنها را از برنامه شما به وب سایت ارائه دهنده OAuth هدایت می کند و یک فرم رضایت به آنها ارائه می دهد. فرم رضایت شامل تمام اطلاعاتی است که می خواهید از کاربر به آن دسترسی داشته باشید، که می تواند ایمیل، تصاویر، برنامه زمانی و غیره باشد.

اگر کاربر برنامه شما را مجوز دهد، شخص ثالث آنها را با یک کد به برنامه شما هدایت می کند. سپس برنامه شما می تواند کد دریافتی را با یک نشانه دسترسی مبادله کند که سپس می تواند برای دسترسی به داده های کاربر موجود از آن استفاده کند.

پیاده سازی این جریان در یک برنامه Express شامل چند مرحله است.

مرحله 1: تنظیم محیط توسعه

ابتدا یک پوشه پروژه خالی ایجاد کنید و cd را در پوشه ایجاد شده ایجاد کنید.

مثلا:

mkdir github-app
cd github-app

سپس، npm را در پروژه خود با اجرای:

npm init -y

این دستور یک فایل package.json ایجاد می کند که حاوی جزئیات پروژه شما مانند نام، نسخه و غیره است.

این آموزش استفاده از سیستم ماژول ES6 را نشان می دهد. این را با باز کردن فایل package.json خود و تعیین “type”: “module” در شی JSON تنظیم کنید.

مرحله 2: نصب Dependencies

برای اینکه سرورتان به درستی کار کند، باید چند وابستگی نصب کنید:

• ExpressJS: ExpressJS یک چارچوب NodeJS است که مجموعه ای قوی از ویژگی ها را برای برنامه های کاربردی وب و موبایل ارائه می دهد. استفاده از Express فرآیند ایجاد سرور شما را ساده می کند.
• Axios: Axios یک سرویس گیرنده HTTP مبتنی بر وعده است. برای درخواست POST برای توکن دسترسی به GitHub به این بسته نیاز دارید.
• dotenv: dotenv بسته ای است که متغیرهای محیطی را از یک فایل .env در شی process.env بارگیری می کند. برای مخفی کردن اطلاعات مهم در مورد برنامه خود به آن نیاز دارید.

آنها را با اجرا نصب کنید:

npm install express axios dotenv

مرحله 3: ایجاد یک برنامه Express

برای رسیدگی و ارسال درخواست‌ها به ارائه‌دهنده OAuth، باید یک سرور Express اولیه ایجاد کنید.

ابتدا یک فایل index.js در دایرکتوری ریشه پروژه خود ایجاد کنید که حاوی موارد زیر است:

// index.js
import express from "express";
import axios from "axios";
import * as dotenv from "dotenv";
dotenv.config();
 
const app = express();
const port = process.env.PORT || 3000
 
app.listen(port, () => {
  console.log(`App is running on port ${port}`);
});

این کد کتابخانه اکسپرس را وارد می کند، یک نمونه اکسپرس را نمونه سازی می کند و شروع به گوش دادن به ترافیک در پورت 3000 می کند.

مرحله 4: ایجاد Route Handler

برای مدیریت جریان OAuth باید دو کنترل کننده مسیر ایجاد کنید. اولی کاربر را به GitHub هدایت می کند و درخواست مجوز می کند. دومی هدایت مجدد به برنامه شما را انجام می دهد و زمانی که کاربر برنامه شما را مجوز می دهد درخواست رمز دسترسی را ارائه می دهد.

اولین کنترل کننده مسیر باید کاربر را به https://github.com/login/oauth/authorize?parameters هدایت کند.

شما باید مجموعه ای از پارامترهای مورد نیاز را به URL OAuth GitHub ارسال کنید که عبارتند از:

• شناسه مشتری: این به شناسه ای اشاره دارد که برنامه OAuth شما هنگام ثبت نام در GitHub دریافت می کند.
• محدوده: این به رشته ای اشاره دارد که میزان دسترسی یک برنامه OAuth به اطلاعات کاربر را مشخص می کند. می‌توانید فهرستی از حوزه‌های موجود را در اسناد OAuth GitHub بیابید. در اینجا شما از یک محدوده “خواندن: کاربر” استفاده خواهید کرد، که دسترسی به خواندن اطلاعات نمایه کاربر را می دهد.

کد زیر را به فایل index.js خود اضافه کنید:

// index.js
app.get("/auth", (req, res) => {
  // Store parameters in an object
  const params = {
    scope: "read:user",
    client_id: process.env.CLIENT_ID,
  };
 
  // Convert parameters to a URL-encoded string
  const urlEncodedParams = new URLSearchParams(params).toString();
  res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

این کد اولین کنترلر مسیر را پیاده سازی می کند. پارامترهای مورد نیاز را در یک شی ذخیره می کند و با استفاده از URLSearchParams API آنها را به فرمت کدگذاری شده با URL تبدیل می کند. سپس این پارامترها را به URL OAuth GitHub اضافه می کند و کاربر را به صفحه رضایت GitHub هدایت می کند.

کد زیر را برای کنترلر مسیر دوم به فایل index.js خود اضافه کنید:

// index.js
app.get("/github-callback", (req, res) => {
  const { code } = req.query;
 
  const body = {
    client_id: process.env.CLIENT_ID,
    client_secret: process.env.CLIENT_SECRET,
    code,
  };
 
  let accessToken;
  const options = { headers: { accept: "application/json" } };
 
  axios
    .post("https://github.com/login/oauth/access_token", body, options)
    .then((response) => response.data.access_token)
    .then((token) => {
      accessToken = token;
      res.redirect(`/?token=${token}`);
    })
    .catch((err) => res.status(500).json({ err: err.message }));
});

دومین کنترل کننده مسیر کد بازگردانده شده از GitHub را در شی req.query استخراج می کند. سپس یک درخواست POST با استفاده از Axios به “https://github.com/login/oauth/access_token” با کد، client_id، و client_secret می کند.

client_secret یک رشته خصوصی است که هنگام ایجاد یک برنامه GitHub OAuth ایجاد می کنید. هنگامی که access_token با موفقیت واکشی شد، در یک متغیر برای استفاده بعدی ذخیره می‌شود. کاربر در نهایت با access_token به برنامه شما هدایت می شود.

مرحله 5: ایجاد یک برنامه GitHub

در مرحله بعد، باید یک برنامه OAuth در GitHub ایجاد کنید.

ابتدا وارد حساب GitHub خود شوید، سپس به تنظیمات بروید، به تنظیمات Developer بروید و OAuth Apps را انتخاب کنید. در نهایت روی «ثبت برنامه جدید» کلیک کنید.

GitHub یک فرم درخواست OAuth جدید مانند زیر در اختیار شما قرار می دهد:

فیلدهای مورد نیاز را با مشخصات مورد نظر خود پر کنید. “URL صفحه اصلی” باید “http://localhost:3000” باشد. «نشانی اینترنتی پاسخ به تماس مجوز» شما باید «http://localhost:3000/github-callback» باشد. همچنین می‌توانید به‌صورت اختیاری جریان دستگاه را فعال کنید و به شما اجازه می‌دهد تا کاربران را برای یک برنامه بدون هد، مانند ابزار CLI یا مدیر اعتبار Git مجوز دهید.

جریان دستگاه در نسخه بتا عمومی است و ممکن است تغییر کند.

در نهایت دکمه ثبت درخواست را بزنید.

GitHub شما را به صفحه ای با client_id و گزینه ای برای ایجاد client_secret هدایت می کند. Client_id خود را کپی کنید، client_secret خود را ایجاد کنید و آن را نیز کپی کنید.

یک فایل env ایجاد کنید و client_id و client_secret را در داخل آن ذخیره کنید. نام این متغیرها را به ترتیب CLIENT_ID و CLIENT_SECRET بگذارید.

جریان OAuth شما اکنون کامل شده است، و اکنون می توانید با نشانه دسترسی برای خواندن داده های کاربر (محدوده ای که قبلاً مشخص کرده اید) درخواست کنید.

اهمیت OAuth 2.0

استفاده از OAuth 2.0 در برنامه شما کار اجرای یک جریان احراز هویت را بسیار ساده می کند. داده های کاربر مشتریان شما را با استفاده از استاندارد لایه سوکت های امن (SSL) ایمن می کند و از خصوصی بودن آنها اطمینان می دهد.

منبع مقاله