Bagikan melalui

Tutorial: Menambahkan masuk ke aplikasi

  • Artikel

Dalam tutorial sebelumnya, proyek ASP.NET Core dibuat dan dikonfigurasi untuk autentikasi. Tutorial ini akan menginstal paket yang diperlukan dan menambahkan kode yang mengimplementasikan autentikasi ke pengalaman masuk dan keluar.

Dalam tutorial ini:

  • Mengidentifikasi dan menginstal paket NuGet yang diperlukan untuk autentikasi
  • Menerapkan autentikasi dalam kode
  • Menambahkan pengalaman masuk dan keluar

Prasyarat

Menginstal paket identitas

Paket NuGet terkait identitas harus diinstal dalam proyek agar autentikasi pengguna diaktifkan.

  1. Di menu atas Visual Studio, pilih Alat > NuGet Package Manager > Kelola Paket NuGet untuk Solusi.
  2. Dengan tab Telusuri dipilih, cari dan pilih Microsoft.Identity.Web.UI. Pilih kotak centang Proyek , lalu pilih Instal.
  3. Ulangi ini untuk Microsoft.Identity.Web.Diagnostics dan Microsoft.Identity.Web.DownstreamApi.

Menerapkan autentikasi dan memperoleh token

  1. Buka Program.cs dan ganti seluruh konten file dengan cuplikan berikut:

    // <ms_docref_import_types>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
// </ms_docref_import_types>

// <ms_docref_add_msal>
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');


builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
    .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
        .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
        .AddInMemoryTokenCaches();
// </ms_docref_add_msal>

// <ms_docref_add_default_controller_for_sign-in-out>
builder.Services.AddRazorPages().AddMvcOptions(options =>
    {
        var policy = new AuthorizationPolicyBuilder()
                      .RequireAuthenticatedUser()
                      .Build();
        options.Filters.Add(new AuthorizeFilter(policy));
    }).AddMicrosoftIdentityUI();
// </ms_docref_add_default_controller_for_sign-in-out>

// <ms_docref_enable_authz_capabilities>
WebApplication app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();
// </ms_docref_enable_authz_capabilities>

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

app.UseRouting();

app.MapRazorPages();
app.MapControllers();

app.Run();

Menambahkan pengalaman masuk dan keluar

Setelah menginstal paket NuGet dan menambahkan kode yang diperlukan untuk autentikasi, tambahkan pengalaman masuk dan keluar.

Membuat file _LoginPartial.cshtml

  1. Perluas Halaman, klik kanan Bersama, lalu pilih Tambahkan > halaman Razor.
  2. Pilih Halaman Razor - Kosong, lalu pilih Tambahkan.
  3. Masukkan _LoginPartial.cshtml untuk nama tersebut, lalu pilih Tambahkan.

Mengedit file _LoginPartial.cshtml

  1. Buka _LoginPartial.cshtml dan tambahkan kode berikut untuk menambahkan pengalaman masuk dan keluar:

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

  2. Buka _Layout.cshtml dan tambahkan referensi untuk _LoginPartial dibuat di langkah sebelumnya. Baris tunggal ini harus ditempatkan antara </ul> dan </div>:

        </ul>
    <partial name="_LoginPartial" />
</div>

Langkah berikutnya

Tutorial: Memanggil API dan menampilkan hasil