مشاركة عبر

البرنامج التعليمي: إعداد تطبيق Vanilla JavaScript أحادي الصفحة للمصادقة في مستأجر عميل

في المقالة السابقة، قمت بتسجيل تطبيق وتكوين تدفقات المستخدم في معرف Microsoft Entra الخاص بك لمستأجر العملاء. توضح لك هذه المقالة كيفية إنشاء تطبيق Vanilla JavaScript (JS) أحادي الصفحة (SPA) وتكوينه لتسجيل الدخول وتسجيل خروج المستخدمين مع مستأجر العميل الخاص بك.

في هذا البرنامج التعليمي؛

  • إنشاء مشروع Vanilla JavaScript في Visual Studio Code
  • قم بتثبيت الحزم المطلوبة
  • إضافة تعليمة برمجية إلى server.js لإنشاء خادم

المتطلبات الأساسية

إنشاء مشروع Vanilla JS جديد وتثبيت التبعيات

  1. افتح Visual Studio Code، وحدد File>Open Folder.... انتقل إلى وحدد الموقع الذي تريد إنشاء مشروعك فيه.

  2. افتح محطة طرفية جديدة عن طريق تحديد Terminal>New Terminal.

  3. قم بتشغيل الأمر التالي لإنشاء مشروع Vanilla JS جديد:

    npm init -y

  4. إنشاء مجلدات وملفات إضافية لتحقيق بنية المشروع التالية:

        └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

تثبيت تبعيات التطبيق

  1. في Terminal، قم بتشغيل الأمر التالي لتثبيت التبعيات المطلوبة للمشروع:

    npm install express morgan @azure/msal-browser

تحرير ملف server.js

Express هو إطار عمل لتطبيق الويب Node.js. يتم استخدامه لإنشاء خادم يستضيف التطبيق. مورغان هو البرنامج الوسيط الذي يسجل طلبات HTTP إلى وحدة التحكم. يتم استخدام ملف الخادم لاستضافة هذه التبعيات ويحتوي على مسارات التطبيق. تتم معالجة المصادقة والتخويل بواسطة مكتبة مصادقة Microsoft ل JavaScript (MSAL.js).

  1. أضف القصاصة البرمجية التالية إلى ملف server.js :

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

في هذه التعليمة البرمجية، تتم تهيئة متغير التطبيق مع الوحدة النمطية السريعة ويتم استخدام express لخدمة الأصول العامة. يتم تقديم مستعرض MSAL كأصل ثابت ويستخدم لبدء تدفق المصادقة.

الخطوات التالية

تكوين SPA للمصادقة