مشاركة عبر

تمكين المصادقة في تطبيق الويب الخاص بك باستخدامAzure AD Microsoft Azure Active Directory B2C

  • مقالة

توضح هذه المقالة كيفية إضافة مصادقةMicrosoft Azure Active Directory B2C (Microsoft Azure Active Directory B2C) إلى تطبيق ويب ASP.NET الخاص بك. تعرف على كيفية إنشاء ذاكرة أساسية لتطبيق الويب ASP.NET باستخدام الذاكرة الأساسية الوسيطة لـ ASP.NET التي تستخدم بروتوكول⁧⁩«OpenID Connect»⁧⁩.

استخدم هذه المقالة بالاقتران مع ⁧⁩تكوين المصادقة في نموذج تطبيق ويب⁧⁩، واستبدل تطبيق الويب النموذجي بتطبيق الويب الخاص بك.

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

من أجل مراجعة المتطلبات الأساسية وإرشادات التكامل، انظر⁧⁩تكوين المصادقة في نموذج تطبيق ويب⁧⁩.

الخطوة 1: قم بإنشاء مشروع تطبيق الويب

يمكنك استخدام مشروع تطبيق ويب ASP.NET الموجود لإنشاء نمط وعرض ومتحكم (MVC) أو إنشاء مشروع جديد. لإنشاء مشروع جديد، افتح الأمر «shell» ثم أدخل الأمر التالي:

dotnet new mvc -o mywebapp

ينتج عن الأمر السابق ما يلي:

  • إنشاء تطبيق ويب MVC جديد.
  • ⁧-o mywebapp⁩تقوم المعلمة بإنشاء دليل يسمى ⁧⁩mywebapp⁧⁩ مع ملفات مصدر للتطبيق.

الخطوة 2: أضف مكتبات المصادقة

أضف مكتبة الويب لـ Microsoft Identity، وهي مجموعة من مكتبات تعليمات البرمجية الرئيسية لـ ASP.NET التي تبسط إضافة مصادقةMicrosoft Azure Active Directory B2C ودعم التخويل إلى تطبيق الويب الخاص بك. تقوم مكتبة الويب لـ Microsoft Identity بإعداد خط بنية أساسية للمصادقة باستخدام المصادقة المستندة إلى ملفات تعريف الارتباط. حيث تهتم بإرسال واستقبال رسائل مصادقة HTTP، والتحقق من صحة الرمز المميز، واستخراج المطالبات، وأكثر من ذلك.

لإضافة مكتبة Microsoft Identity Web، قم بتثبيت الحزم عن طريق تشغيل الأوامر التالية:

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

الخطوة 3: بدء مكتبات المصادقة

يستخدم البرنامج الوسيط لـ Microsoft Identity Web فئة بدء التشغيل التي تعمل عند بدء تشغيل عملية الاستضافة. في هذه الخطوة، يمكنك إضافة التعليمات البرمجية الضرورية للبدء في مكتبات المصادقة.

افتح ⁧⁩Startup.cs⁧⁩ ثم أضف ⁧using⁩الإعلانات التالية في بداية الإعلان بالرابط:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

نظرًا إلى أن Microsoft Identity Web يستخدم المصادقة المستندة إلى ملفات تعريف الارتباط لحماية تطبيق الويب الخاص بك، تقوم التعليمات البرمجية التالية بتعيين إعدادات ملف تعريف الارتباط ⁧⁩SameSite.⁩ بعد ذلك يقرأ ⁧AzureAdB2C⁩ إعدادات التطبيق ويبدأ في وحدة تحكم البرنامج الوسيط مع طريقة العرض الخاصة به.

استبدل دالة ⁧ConfigureServices(IServiceCollection services)⁩ بأكملها بالشفرة التالية:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

التعليمات البرمجية التالية بإضافة نهج ملف تعريف الارتباط واستخدام طراز المصادقة. استبدل دالة ⁧Configure⁩ بأكملها بالشفرة التالية:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

الخطوة 4: أضف عناصر واجهة المستخدم

لإضافة عناصر واجهة المستخدم، استخدم طريقة عرض جزئية تحتوي على منطق للتحقق من معرفة ما إذا كان المستخدمون قد سجلوا الدخول أم لا. إذا لم يقم المستخدمون بتسجيل الدخول، فإن العرض الجزئي يعرض زر «تسجيل الدخول». إذا تم تسجيل الدخول، فإنه يعرض اسم العرض الخاص بالمستخدم وزر «تسجيل الخروج».

أنشئ ملفاً جديداً، _LoginPartial.cshtml، داخل المجلد /Views/Shared باستخدام القصاصة البرمجية التالية:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

تعديل ملف ⁧⁩/Views/Shared_Layout.cshtml⁧⁩ لتضمين الملف ⁧⁩_LoginPartial.cshtml⁧⁩ الذي قمت بإضافته. يعتبر⁧⁩ملف _Layout.cshtml⁧⁩ بمثابة تخطيط شائع يمنح المستخدمين تجربة متناسقة في أثناء الانتقال من صفحة إلى أخرى. يتضمن التخطيط عناصر واجهة مستخدم شائعة، مثل عنوان التطبيق وتذييل الصفحة.

ملاحظة

استنادًا إلى الإصدار .NET Core الذي تقوم بتشغيله وما إذا كنت تقوم بإضافة تسجيل الدخول إلى تطبيق موجود، قد تبدو عناصر واجهة المستخدم مختلفة. إذا كان الأمر كذلك، فتأكد من إدراج ⁧⁩_LoginPartial⁧⁩ في الموقع المناسب داخل تخطيط الصفحة.

افتح ⁧⁩الملف /Views/Shared/_Layout.cshtml،⁧⁩ ثم قم بإضافة ⁧div⁩ العنصر التالي.

<div class="navbar-collapse collapse">
...
</div>

استبدل هذا العنصر مع تعليمات Razor البرمجية التالية:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

تتضمن تعليمات Razor البرمجية السابقة ارتباطًا ⁧Claims⁩ بالعمل الذي ستقوم بإنشائه في الخطوة التالية.

الخطوة 5: أضف طريقة عرض المطالبات

لعرض مطالبات الرمز المميز للمعرف، من خلال ⁧⁩المجلد «/Views/Home»⁧⁩ إضافة طريقة العرض ⁧⁩Claims.cshtml.⁧⁩

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

في هذه الخطوة، يمكنك إضافة ⁧Claims⁩ الإجراء الذي يربط طريقة العرض ⁧⁩Claims.cshtml⁧⁩ بوحدة تحكم ⁧⁩الصفحة الرئيسية⁧⁩. ⁧يستخدم الإجراءClaims⁩السمة⁧Authorize⁩، التي تحد من الوصول إلى الإجراء الخاص بالمستخدمين المصادق عليهم.

في وحدة تحكم ⁧⁩/Controllers/HomeController.cs،⁧⁩ قم بإضافة الإجراء التالي:

[Authorize]
public IActionResult Claims()
{
    return View();
}

في بداية الفئة، أضف الإعلان بالربط using التالي:

using Microsoft.AspNetCore.Authorization;

الخطوة 6: أضف إعدادات التطبيق

يتم تخزين إعدادات موفر هوية Microsoft Azure Active Directory B2C في ملف⁧⁩appsettings.js⁧⁩. قم بتحرير ملف ⁧⁩appSettings.json⁧⁩ لإضافة الإعدادات التالية:

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

توصف المعلومات المطلوبة في ⁧⁩مقالة تكوين المصادقة في نموذج تطبيق ويب⁧⁩. استخدام الإعدادات التالية:

الخطوة 7: قم بتشغيل التطبيق الخاص بك

  1. إنشاء وتشغيل المشروع.
  2. انتقل إلى https://localhost:5001.
  3. اختر⁧⁩تسجيل الدخول/الدخول⁧⁩.
  4. أكمل عملية التسجيل أو تسجيل الدخول.

بعد المصادقة بنجاح، ترى اسم العرض في شريط التنقل. لعرض المطالبات التي تقوم Microsoft Azure Active Directory B2C بإرجاعها إلى التطبيق، اختر ⁧⁩TodoList⁧⁩.

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