إدارة المصادقة في Static Web Apps
يحتاج تطبيق الويب الخاص بقائمة التسوق إلى طريقة لتحديد هوية مستخدميه بشكل فريد، وتوفير مساحة شخصية لهم لتخزين المنتجات.
المصادقة هي الطريقة التي ستتحقق بها من هوية المستخدم الذي يحاول الوصول إلى نظام معلومات. سننظر الآن في المصادقة وكيفية تنفيذها في تطبيقات Azure Static Web Apps.
موفرو الهوية
تعمل تطبيقات Azure Static Web Apps على تبسيط تجربة المصادقة من خلال إدارة المصادقة مع الموفرين التاليين:
- Microsoft Entra ID
- GitHub
- موقع Twitter
يُمكِّن جميع موفري المصادقة افتراضيًا. سنرى لاحقًا كيف يمكنك تقييد مزود المصادقة بقاعدة مسار مخصصة.
مجلد النظام
يزود مجلد النظام /.auth الوصول إلى جميع واجهات برمجة التطبيقات المتعلقة بالمصادقة. يمكنك استخدام نقاط النهاية هذه لتنفيذ سير عمل المصادقة الكامل في تطبيقك، بما في ذلك تسجيل الدخول والخروج والوصول إلى معلومات المستخدم.
تسجيل الدخول
يسرد الجدول التالي مسار تسجيل الدخول الخاص بالمزود الذي يمكنك استخدامه في التطبيق.
| موفر الهوية | مسار تسجيل الدخول |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| موقع Twitter | /.auth/login/twitter |
على سبيل المثال، لتسجيل الدخول باستخدام GitHub، يمكنك تضمين رابط تسجيل الدخول في تطبيق الويب خاصتك بالقصاصة البرمجية التالية:
<a href="/.auth/login/github">Login</a>
إذا كنت تريد أن يعود المستخدم إلى صفحة معينة بعد تسجيل الدخول، يمكنك أيضًا تقديم عنوان موقع URL في post_login_redirect_uri معلمة سلسلة الاستعلام. على سبيل المثال:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
تسجيل الخروج
يسجل المسار /.auth/logout خروج المستخدمين من تطبيق الويب. يمكنك إضافة رابط إلى التنقل داخل موقعك للسماح للمستخدم بتسجيل الخروج كما هو موضح في المثال التالي.
<a href="/.auth/logout">Log out</a>
كما هو الحال مع تسجيل الدخول، يمكنك توفير عنوان URL لإعادة التوجيه إليه بعد تسجيل الخروج باستخدام معلمة post_logout_redirect_uri سلسلة الاستعلام:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
الوصول إلى معلومات المستخدم
يمكنك الوصول إلى معلومات المستخدم المتعلقة بالمصادقة إما عبر نقطة نهاية وصول مباشر أو عنوان خاص في دوال واجهة برمجة التطبيقات.
إذا أرسلت طلب GET إلى المسار /.auth/me، فستتلقى كائن JSON مع البيانات الخاصة بالمستخدم المُسجَّل دخوله حاليًا. ترجع الطلبات من المستخدمين غير المصادقين null.
المثال التالي هو مثال على كائن استجابة.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
دوال واجهة برمجة التطبيقات
جميع دوال واجهة برمجة التطبيقات المتاحة في Azure Static Web Apps الوصول إلى معلومات المستخدم نفسه مثل تطبيق عميلك. تُمرر بيانات المستخدم إلى دوال في عنوان x-ms-client-principal HTTP. يتم تسلسل البيانات ككائن JSON وتشفيرها في Base64.
تظهر الدالة المثال التالي كيفية قراءة معلومات المستخدم وإعادتها.
module.exports = async function (context, req) {
const header = req.headers["x-ms-client-principal"];
const encoded = Buffer.from(header, "base64");
const decoded = encoded.toString("ascii");
context.res = {
body: {
userInfo: JSON.parse(decoded)
}
};
};
الخطوات التالية
بعد ذلك، سننفذ سير عمل المصادقة بالكامل في تطبيقنا.