ملاحظة
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تسجيل الدخول أو تغيير الدلائل.
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تغيير الدلائل.
في المقالة السابقة، قمت بتسجيل تطبيق وتكوين تدفقات المستخدم في معرف Microsoft Entra الخاص بك لمستأجر العملاء. توضح لك هذه المقالة كيفية إنشاء تطبيق Vanilla JavaScript (JS) أحادي الصفحة (SPA) وتكوينه لتسجيل الدخول وتسجيل خروج المستخدمين مع مستأجر العميل الخاص بك.
في هذا البرنامج التعليمي؛
- إنشاء مشروع Vanilla JavaScript في Visual Studio Code
- قم بتثبيت الحزم المطلوبة
- إضافة تعليمة برمجية إلى server.js لإنشاء خادم
المتطلبات الأساسية
- إكمال المتطلبات الأساسية والخطوات في إعداد مستأجر العميل الخاص بك لمصادقة تطبيق Vanilla JavaScript أحادي الصفحة.
- على الرغم من أنه يمكن استخدام أي بيئة تطوير متكاملة (IDE) تدعم تطبيقات Vanilla JS، يوصى باستخدام Visual Studio Code لهذا الدليل. يمكن تنزيله من صفحة التنزيلات .
- Node.js.
إنشاء مشروع Vanilla JS جديد وتثبيت التبعيات
افتح Visual Studio Code، وحدد File>Open Folder.... انتقل إلى وحدد الموقع الذي تريد إنشاء مشروعك فيه.
افتح محطة طرفية جديدة عن طريق تحديد Terminal>New Terminal.
قم بتشغيل الأمر التالي لإنشاء مشروع Vanilla JS جديد:
npm init -y
إنشاء مجلدات وملفات إضافية لتحقيق بنية المشروع التالية:
└── public └── authConfig.js └── authPopup.js └── authRedirect.js └── claimUtils.js └── index.html └── signout.html └── styles.css └── ui.js └── server.js
تثبيت تبعيات التطبيق
في Terminal، قم بتشغيل الأمر التالي لتثبيت التبعيات المطلوبة للمشروع:
npm install express morgan @azure/msal-browser
تحرير ملف server.js
Express هو إطار عمل لتطبيق الويب Node.js. يتم استخدامه لإنشاء خادم يستضيف التطبيق. مورغان هو البرنامج الوسيط الذي يسجل طلبات HTTP إلى وحدة التحكم. يتم استخدام ملف الخادم لاستضافة هذه التبعيات ويحتوي على مسارات التطبيق. تتم معالجة المصادقة والتخويل بواسطة مكتبة مصادقة Microsoft ل JavaScript (MSAL.js).
أضف القصاصة البرمجية التالية إلى ملف 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 كأصل ثابت ويستخدم لبدء تدفق المصادقة.