Cách triển khai OAuth trong ứng dụng Express bằng GitHub

OAuth 2.0 là một tiêu chuẩn cho phép các ứng dụng của bên thứ ba truy cập dữ liệu từ các ứng dụng web một cách an toàn. Bạn có thể sử dụng nó để tìm nạp dữ liệu bao gồm thông tin hồ sơ, lịch biểu, v.v. được lưu trữ trên các ứng dụng web khác như Facebook, Google và GitHub. Một dịch vụ có thể thực hiện việc này thay mặt người dùng mà không để lộ thông tin đăng nhập của họ cho ứng dụng của bên thứ ba.

Tìm hiểu cách triển khai OAuth trong ứng dụng Express bằng GitHub làm nhà cung cấp OAuth trong một vài bước.

Luồng OAuth

Trong quy trình OAuth điển hình, trang web của bạn cung cấp tùy chọn để người dùng đăng nhập bằng tài khoản bên thứ ba của họ từ nhà cung cấp như GitHub hoặc Facebook. Người dùng có thể bắt đầu quá trình này bằng cách nhấp vào nút đăng nhập OAuth có liên quan.

Điều này sẽ chuyển hướng họ từ ứng dụng của bạn đến trang web của nhà cung cấp OAuth và trình bày cho họ một biểu mẫu đồng ý. Biểu mẫu chấp thuận chứa tất cả thông tin bạn muốn truy cập từ người dùng, đó có thể là email, hình ảnh, lịch trình của họ, v.v.

Nếu người dùng cho phép ứng dụng của bạn, bên thứ ba sẽ chuyển hướng họ trở lại ứng dụng của bạn bằng một mã. Sau đó, ứng dụng của bạn có thể trao đổi mã đã nhận để lấy mã thông báo truy cập mà sau đó nó có thể sử dụng để truy cập vào dữ liệu người dùng có sẵn.

Việc triển khai quy trình này trong ứng dụng Express bao gồm một vài bước.

Bước 1: Thiết lập môi trường phát triển

Đầu tiên, tạo một thư mục dự án trống và đĩa CD vào thư mục đã tạo.

Ví dụ:

mkdir github-app
cd github-app

Tiếp theo, khởi tạo npm trong dự án của bạn bằng cách chạy:

npm init -y

Lệnh này tạo ra một package.json tệp chứa thông tin chi tiết về dự án của bạn như tên, phiên bản, v.v.

Hướng dẫn này sẽ giới thiệu cách sử dụng hệ thống mô-đun ES6. Thiết lập điều này bằng cách mở package.json tập tin và chỉ định “gõ “:” mô-đun “ trong đối tượng JSON.

Bước 2: Cài đặt phụ thuộc

Bạn sẽ cần cài đặt một số phụ thuộc để máy chủ của mình hoạt động bình thường:

• ExpressJS: ExpressJS là một khung công tác NodeJS cung cấp một tập hợp các tính năng mạnh mẽ cho các ứng dụng web và di động. Sử dụng Express sẽ đơn giản hóa quá trình tạo máy chủ của bạn.
• Axios: Axios là một ứng dụng HTTP dựa trên lời hứa. Bạn sẽ cần gói này để thực hiện yêu cầu ĐĂNG cho mã thông báo truy cập vào GitHub.
• dotenv: dotenv là một gói tải các biến môi trường từ tệp .env vào đối tượng process.env. Bạn sẽ cần nó để ẩn thông tin quan trọng về ứng dụng của mình.

Cài đặt chúng bằng cách chạy:

npm install express axios dotenv

Bước 3: Tạo ứng dụng Express

Bạn cần tạo một máy chủ Express cơ bản để xử lý và đưa ra yêu cầu với nhà cung cấp OAuth.

Đầu tiên, hãy tạo một index.js tệp trong thư mục gốc của dự án của bạn có chứa thông tin sau:

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}`);
});

Mã này nhập thư viện express, khởi tạo một phiên bản express và bắt đầu lắng nghe lưu lượng truy cập trên cổng 3000.

Bước 4: Tạo trình xử lý tuyến đường

Bạn sẽ cần tạo hai trình xử lý định tuyến để xử lý luồng OAuth. Đầu tiên chuyển hướng người dùng đến GitHub và yêu cầu ủy quyền. Thứ hai xử lý chuyển hướng trở lại ứng dụng của bạn và thực hiện yêu cầu mã thông báo truy cập khi người dùng cho phép ứng dụng của bạn.

Trình xử lý tuyến đầu tiên phải chuyển hướng người dùng đến https://github.com/login/oauth/authorize?parameters.

Bạn sẽ cần chuyển một tập hợp các tham số bắt buộc đến URL OAuth của GitHub, bao gồm:

• Id khách hàng: Đây là ID mà ứng dụng OAuth của bạn nhận được khi đăng ký trên GitHub.
• Phạm vi: Điều này đề cập đến một chuỗi chỉ định số lượng quyền truy cập mà ứng dụng OAuth có đối với thông tin của người dùng. Bạn có thể tìm thấy danh sách các phạm vi có sẵn trong tài liệu OAuth của GitHub. Ở đây bạn sẽ sử dụng “đọc: người dùngPhạm vi ”, cấp quyền truy cập để đọc dữ liệu hồ sơ của người dùng.

Thêm mã sau vào của bạn index.js tập tin:

app.get("/auth", (req, res) => {
const params = {
scope: "read:user",
client_id: process.env.CLIENT_ID,
};

const urlEncodedParams = new URLSearchParams(params).toString();
res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Mã này thực hiện trình xử lý tuyến đầu tiên. Nó lưu trữ các tham số bắt buộc trong một đối tượng, chuyển đổi chúng sang định dạng được mã hóa URL bằng cách sử dụng API URLSearchParams. Sau đó, nó thêm các tham số này vào URL OAuth của GitHub và chuyển hướng người dùng đến trang chấp thuận của GitHub.

Thêm mã sau vào của bạn index.js tệp cho trình xử lý tuyến thứ hai:

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

Trình xử lý tuyến thứ hai sẽ trích xuất mã số được trả lại từ GitHub trong req.query sự vật. Sau đó, nó thực hiện một yêu cầu ĐĂNG bằng cách sử dụng Axios tới “https://github.com/login/oauth/access_token” bằng mã, client_idvà client_secret.

Các client_secret là một chuỗi riêng tư mà bạn sẽ tạo khi tạo ứng dụng GitHub OAuth. Khi mà truy cập thẻ được tìm nạp thành công, nó được lưu vào một biến để sử dụng sau này. Người dùng cuối cùng được chuyển hướng đến ứng dụng của bạn với truy cập thẻ.

Bước 5: Tạo ứng dụng GitHub

Tiếp theo, bạn sẽ cần tạo một ứng dụng OAuth trên GitHub.

Đầu tiên, đăng nhập vào tài khoản GitHub của bạn, sau đó truy cập Cài đặtcuộn xuống Cài đặt nhà phát triểnvà chọn Ứng dụng OAuth. Cuối cùng, nhấp vào “Đăng ký một ứng dụng mới. ”

GitHub sẽ cung cấp cho bạn một biểu mẫu đăng ký OAuth mới như sau:

Điền vào các trường bắt buộc với các chi tiết mong muốn của bạn. Các “URL trang chủ”Phải là“ http: // localhost: 3000 ”. Của bạn “URL gọi lại ủy quyền”Phải là“ http: // localhost: 3000 / github-callback ”. Bạn cũng có thể tùy chọn bật luồng thiết bị, cho phép bạn cấp quyền cho người dùng đối với một ứng dụng không có đầu, chẳng hạn như công cụ CLI hoặc trình quản lý thông tin xác thực Git.

Luồng thiết bị đang ở giai đoạn thử nghiệm công khai và có thể thay đổi.

Cuối cùng, nhấn Đăng ký ứng dụng cái nút.

GitHub sẽ đưa bạn đến một trang có client_id và một tùy chọn để tạo client_secret. Sao chép của bạn client_idtạo ra của bạn client_secretvà sao chép nó nữa.

Tạo tệp .env và lưu trữ client_id và client_secret bên trong nó. Đặt tên cho các biến này lần lượt là CLIENT_ID và CLIENT_SECRET.

Luồng OAuth của bạn hiện đã hoàn tất và bây giờ bạn có thể đưa ra yêu cầu với mã thông báo truy cập để đọc dữ liệu người dùng ( phạm vi bạn đã chỉ định trước đó).

Tầm quan trọng của OAuth 2.0

Sử dụng OAuth 2.0 trong ứng dụng của bạn giúp đơn giản hóa đáng kể tác vụ triển khai quy trình xác thực. Nó bảo mật dữ liệu người dùng của khách hàng của bạn bằng cách sử dụng tiêu chuẩn Lớp cổng bảo mật (SSL), đảm bảo rằng chúng vẫn ở chế độ riêng tư.