Udostępnij za pośrednictwem

Samouczek: dodawanie logowania i wylogowywanie do aplikacji internetowej platformy ASP.NET Core dla dzierżawy zewnętrznej

  • Artykuł

Ten samouczek jest ostatnią częścią serii, która demonstruje tworzenie aplikacji internetowej ASP.NET Core i przygotowanie jej do uwierzytelniania przy użyciu centrum administracyjnego firmy Microsoft Entra. W części 2 tej serii utworzono projekt ASP.NET Core w programie Visual Studio Code i skonfigurowano go do uwierzytelniania. W tym ostatnim kroku dodasz środowiska logowania i wylogowania oraz logowania i wylogowania się z aplikacji.

W tym samouczku wykonasz następujące instrukcje:

  • Dodawanie środowisk logowania i wylogowywanie
  • Dodawanie kodu w celu wyświetlenia oświadczeń tokenu identyfikatora
  • Zaloguj się i wyloguj się z aplikacji przy użyciu przepływu użytkownika

Wymagania wstępne

Dodawanie środowiska logowania i wylogowywanie

Po zainstalowaniu pakietów NuGet i dodaniu niezbędnego kodu do uwierzytelniania musimy dodać środowiska logowania i wylogowania. Kod odczytuje oświadczenia tokenu identyfikatora, aby sprawdzić, czy użytkownik jest uwierzytelniony i używa User.Claims go do wyodrębnienia oświadczeń tokenu identyfikatora.

  1. W środowisku IDE przejdź do obszaru Views/Shared i utwórz nowy plik o nazwie _LoginPartial.cshtml.

  2. Otwórz plik _LoginPartial.cshtml i dodaj następujący kod, aby dodać środowisko logowania i wylogowania.

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity is not null && User.Identity.IsAuthenticated)
{
        <li class="nav-item">
            <span class="nav-link text-dark">Hello @User.Claims.First(c => c.Type == "preferred_username").Value!</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>

  3. Następnie dodaj odwołanie do _LoginPartial pliku Layout.cshtml znajdującego się w tym samym folderze. Zaleca się umieszczenie tego elementu po navbar-collapse klasie, jak pokazano w poniższym fragmencie kodu:

    <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <partial name="_LoginPartial" />
</div>

Wyświetlanie oświadczeń tokenu identyfikatora

Aplikacja internetowa jest teraz skonfigurowana do logowania użytkowników przy użyciu Platforma tożsamości Microsoft. Następnym krokiem jest dodanie kodu, który umożliwia nam wyświetlanie oświadczeń tokenu identyfikatora. Aplikacja sprawdzi, czy użytkownik jest uwierzytelniony przy użyciu elementu User.Identity.IsAuthenticated, i wyświetla listę oświadczeń tokenu identyfikatora, wykonując pętlę przez każdy element w User.Claimselemencie , zwracając ich Type i Value.

  1. Otwórz plik Views/Home/Index.cshtml i zastąp zawartość pliku następującym fragmentem kodu:

    @{
ViewData["Title"] = "Home Page";
}

<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        text-align: justify;
        padding: 8px;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
</style>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>

    @if (@User.Identity is not null && @User.Identity.IsAuthenticated)
    {
        <p>You are signed in! Below are the claims in your ID token. For more information, visit: <a href="https://learn.microsoft.com/azure/active-directory/develop/id-tokens">Microsoft identity platform ID tokens</a></p>
        <table>
            <tbody>

                @foreach (var item in @User.Claims)
                {
                    <tr>
                        <td>@item.Type</td>
                        <td>@item.Value</td>
                    </tr>
                }
            </tbody>
        </table>
    }

    <br />
    <p>Learn about <a href="https://learn.microsoft.com/azure/active-directory/develop/v2-overview">building web apps with Microsoft identity platform</a>.</p>
</div>

Logowanie do aplikacji

  1. Uruchom aplikację, wpisując następujące polecenie w terminalu, aby uruchomić https profil w pliku uruchamiania Ustawienia.json.

    dotnet run --launch-profile https

  2. Otwórz nową prywatną przeglądarkę i wprowadź identyfikator URI aplikacji w przeglądarce, w tym przypadku https://localhost:7274.

  3. Aby przetestować skonfigurowany wcześniej przepływ użytkownika rejestracji, wybierz pozycję Nie masz konta? Utwórz jeden.

  4. W oknie Tworzenie konta wprowadź adres e-mail zarejestrowany w dzierżawie zewnętrznej, który uruchomi przepływ rejestracji jako użytkownik aplikacji.

  5. Po wprowadzeniu jednorazowego kodu dostępu z dzierżawy zewnętrznej wprowadź nowe hasło i więcej szczegółów konta, ten przepływ rejestracji zostanie ukończony.

    1. Jeśli zostanie wyświetlone okno z monitem o zalogowanie się, wybierz pozycję Tak lub Nie.

  6. Strona powitalna ASP.NET Core zostanie wyświetlona w przeglądarce, jak pokazano na poniższym zrzucie ekranu:

    Zrzut ekranu przedstawiający logowanie się do aplikacji internetowej ASP.NET Core.

Wyloguj się z aplikacji

  1. Aby wylogować się z aplikacji, wybierz pozycję Wyloguj się na pasku nawigacyjnym.
  2. Zostanie wyświetlone okno z prośbą o wylogowanie się z konta.
  3. Po pomyślnym wylogowaniu zostanie wyświetlone końcowe okno z poradą, aby zamknąć wszystkie okna przeglądarki.

Zobacz też