OAuth 2.0 הוא תקן המאפשר ליישומי צד שלישי לגשת לנתונים מיישומי אינטרנט בצורה מאובטחת. אתה יכול להשתמש בו כדי להביא נתונים כולל פרטי פרופיל, לוחות זמנים וכו'. שמתארח באפליקציות אינטרנט אחרות כמו פייסבוק, גוגל ו-GitHub. שירות יכול לעשות זאת בשם משתמש מבלי לחשוף את האישורים שלו לאפליקציה של צד שלישי.

למד כיצד ליישם OAuth באפליקציית Express באמצעות GitHub כספק OAuth בכמה שלבים.

זרימת OAuth

בזרימת OAuth טיפוסית, האתר שלך מספק אפשרות למשתמשים להיכנס עם חשבון הצד השלישי שלהם מספק כמו GitHub או Facebook. משתמש יכול להתחיל תהליך זה על ידי לחיצה על כפתור התחברות רלוונטי ל-OAuth.

זה מפנה אותם מהאפליקציה שלך לאתר האינטרנט של ספק ה-OAuth ומציג להם טופס הסכמה. טופס ההסכמה מכיל את כל המידע שאליו תרצה לגשת מהמשתמש, שיכול להיות המיילים שלו, תמונות, לוחות זמנים וכו'.

אם המשתמש מאשר את האפליקציה שלך, הצד השלישי יפנה אותו בחזרה לאפליקציה שלך עם קוד. לאחר מכן, היישום שלך יכול להחליף את הקוד שהתקבל עבור אסימון גישה שבו הוא יכול להשתמש כדי לגשת לנתוני המשתמש הזמינים.

יישום זרימה זו באפליקציית Express כרוך במספר שלבים.

instagram viewer

שלב 1: הגדרת סביבת פיתוח

ראשית, צור ספריית פרויקט ריקה ו CD לתוך הספרייה שנוצרה.

לדוגמה:

mkdir github-app
CD github-app

לאחר מכן, אתחול npm בפרויקט שלך על ידי הפעלת:

npm init -y

פקודה זו יוצרת א package.json קובץ המכיל פרטים על הפרויקט שלך כמו השם, הגרסה וכו'.

מדריך זה יציג את השימוש במערכת המודולים ES6. הגדר זאת על ידי פתיחת שלך package.json קובץ וציון "type": "מודול" באובייקט JSON.

שלב 2: התקנת תלות

תצטרך להתקין כמה תלות כדי שהשרת שלך יפעל כראוי:

  • ExpressJS: ExpressJS היא מסגרת NodeJS המספקת סט חזק של תכונות עבור אפליקציות אינטרנט וניידים. השימוש ב-Express יפשט את תהליך יצירת השרת שלך.
  • Axios: Axios הוא לקוח HTTP מבוסס הבטחות. תזדקק לחבילה הזו כדי לבצע בקשת POST עבור אסימון גישה ל- GitHub.
  • dotenv: dotenv היא חבילה שטוענת משתני סביבה מקובץ ‎.env לאובייקט process.env. תצטרך אותו כדי להסתיר מידע חשוב על היישום שלך.

התקן אותם על ידי הפעלת:

npm להתקין express axios dotenv

שלב 3: יצירת אפליקציית אקספרס

אתה צריך ליצור שרת אקספרס בסיסי לטפל ולהגיש בקשות לספק OAuth.

ראשית, צור א index.js קובץ בספריית השורש של הפרויקט שלך המכילה את הדברים הבאים:

// index.js
יְבוּא אֶקְסְפּרֶס מ "אֶקְסְפּרֶס";
יְבוּא אקסיוס מ "אקסיות";
יְבוּא * כפי ש dotenv מ "dotenv";
dotenv.config();
const app = express();
const port = process.env. PORT || 3000
app.listen (יציאה, () => {
לְנַחֵם.עֵץ(`האפליקציה פועלת ביציאה ${port}`);
});

קוד זה מייבא את ספריית האקספרס, מפעיל מופע אקספרס ומתחיל להאזין לתעבורה ביציאה 3000.

שלב 4: יצירת מטפלי מסלולים

תצטרך ליצור שני מטפלי מסלול כדי לטפל בזרימת OAuth. הראשון מפנה את המשתמש אל GitHub ומבקש הרשאה. השני מטפל בהפניה מחדש אל האפליקציה שלך ומבקש את אסימון הגישה כאשר משתמש מאשר את האפליקציה שלך.

מטפל המסלול הראשון צריך להפנות את המשתמש אליו https://github.com/login/oauth/authorize? פרמטרים.

תצטרך להעביר קבוצה של פרמטרים נדרשים לכתובת ה-OAuth של GitHub, הכוללים:

  • מזהה לקוח: זה מתייחס למזהה שאפליקציית OAuth שלך מקבלת כשהיא נרשמה ב-GitHub.
  • היקף: זה מתייחס למחרוזת שמציינת את כמות הגישה שיש לאפליקציית OAuth למידע של משתמש. תוכל למצוא רשימה של היקפים זמינים ב תיעוד OAuth של GitHub. כאן אתה תשתמש ב"קרא: משתמש” scope, המעניק גישה לקריאת נתוני הפרופיל של המשתמש.

הוסף את הקוד הבא שלך index.js קוֹבֶץ:

// index.js
app.get("/auth", (req, res) => {
// אחסן פרמטרים באובייקט
const params = {
 תְחוּם: "קרא: משתמש",
מזהה_לקוח: תהליך.env.CLIENT_ID,
 };
// המרת פרמטרים למחרוזת מקודדת כתובת אתר
const urlEncodedParams = חָדָשׁ URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

קוד זה מיישם את מטפל המסלול הראשון. הוא מאחסן את הפרמטרים הנדרשים באובייקט, וממיר אותם לפורמט מקודד URL באמצעות ה-URLSearchParams API. לאחר מכן הוא מוסיף את הפרמטרים האלה לכתובת ה-OAuth של GitHub ומפנה את המשתמש לדף ההסכמה של GitHub.

הוסף את הקוד הבא שלך index.js קובץ עבור מטפל המסלול השני:

// index.js
app.get("/github-callback", (req, res) => {
const { code } = req.query;
const גוף = {
מזהה_לקוח: תהליך.env.CLIENT_ID,
client_secret: תהליך.env.CLIENT_SECRET,
 קוד,
 };


תן אסימון גישה;
 const options = { headers: { accept: "application/json" } };
אקסיוס
 .הודעה("https://github.com/login/oauth/access_token", גוף, אפשרויות)
 .then((תגובה) => response.data.access_token)
 .then((אסימון) => {
 accessToken = אסימון;
 res.redirect(`/?token=${token}`);
 })
 .לתפוס((שגיאה) => res.status(500).json({ err: err.message }));
});

מטפל המסלול השני יחלץ את קוד חזר מ-GitHub ב- req.query לְהִתְנַגֵד. לאחר מכן הוא עושה פוסט בקשה באמצעות אקסיוס ל " https://github.com/login/oauth/access_token" עם הקוד, מזהה_לקוח, ו client_secret.

ה client_secret היא מחרוזת פרטית שתיצור בעת יצירת יישום GitHub OAuth. כאשר אסימון גישה אוחזר בהצלחה, הוא נשמר במשתנה לשימוש מאוחר יותר. המשתמש מנותב לבסוף לאפליקציה שלך עם ה אסימון גישה.

שלב 5: יצירת אפליקציית GitHub

לאחר מכן, תצטרך ליצור יישום OAuth ב- GitHub.

ראשית, היכנס לחשבון GitHub שלך ולאחר מכן עבור אל הגדרות, גלול מטה אל הגדרות מפתח, ובחר אפליקציות OAuth. לבסוף, לחץ על "רשום בקשה חדשה.”

GitHub יספק לך טופס בקשה חדש ל-OAuth, כמו זה:

מלא את השדות הנדרשים עם הפרטים הרצויים. ה "כתובת האתר של דף הבית" צריך להיות " http://localhost: 3000”. שלך "כתובת אתר להתקשרות חוזרת של הרשאה" צריך להיות " http://localhost: 3000/github-callback". אתה יכול גם לאפשר זרימת מכשירים באופן אופציונלי, מה שמאפשר לך לאשר למשתמשים אפליקציה ללא ראש, כגון כלי CLI או מנהל אישורי Git.

זרימת המכשיר נמצאת בגרסת בטא ציבורית ונתונה לשינויים.

לבסוף, לחץ על הרשמה בקשה לַחְצָן.

GitHub יפנה אותך לדף עם שלך מזהה_לקוח ואפשרות ליצור שלך client_secret. תעתיק את שלך מזהה_לקוח, צור את שלך client_secret, וגם להעתיק אותו.

צור קובץ ‎.env ולאחסן את מזהה_לקוח ו client_secret בתוך זה. תן שם למשתנים אלה CLIENT_ID ו-CLIENT_SECRET בהתאמה.

זרימת ה-OAuth שלך הושלמה כעת, וכעת תוכל להגיש בקשות עם אסימון הגישה לקריאת נתוני משתמש (ה תְחוּם שציינת קודם).

החשיבות של OAuth 2.0

השימוש ב-OAuth 2.0 ביישום שלך מפשט מאוד את המשימה של הטמעת זרימת אימות. זה מאבטח את נתוני המשתמשים של הלקוחות שלך באמצעות תקן Secure Sockets Layer (SSL), ומבטיח שהם נשארים פרטיים.