Pisanie aplikacji internetowej, która loguje/wy loguje użytkowników - Microsoft identity platform

Artykuł
06/14/2024

Dowiedz się, jak dodać logowanie do kodu aplikacji internetowej, która loguje użytkowników. Następnie dowiedz się, jak je wylogować.

Logowanie składa się z dwóch części:

Przycisk logowania na stronie HTML
Akcja logowania w kodzie w kontrolerze

W ASP.NET Core w przypadku aplikacji Platforma tożsamości Microsoft przycisk Zaloguj jest uwidoczniony Views\Shared\_LoginPartial.cshtml (w przypadku aplikacji MVC) lub Pages\Shared\_LoginPartial.cshtm (w przypadku aplikacji Razor). Jest on wyświetlany tylko wtedy, gdy użytkownik nie jest uwierzytelniony. Oznacza to, że jest wyświetlany, gdy użytkownik jeszcze się nie zalogował lub nie wylogował. Wręcz przeciwnie, przycisk Wyloguj jest wyświetlany, gdy użytkownik jest już zalogowany. Należy pamiętać, że kontroler konta jest zdefiniowany w pakiecie NuGet Microsoft.Identity.Web.UI w obszarze o nazwie MicrosoftIdentity

<ul class="navbar-nav">
  @if (User.Identity.IsAuthenticated)
  {
    <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>

W ASP.NET MVC przycisk Zaloguj się jest uwidoczniony w pliku Views\Shared\_LoginPartial.cshtml. Jest on wyświetlany tylko wtedy, gdy użytkownik nie jest uwierzytelniony. Oznacza to, że jest wyświetlany, gdy użytkownik jeszcze się nie zalogował lub nie wylogował.

@if (Request.IsAuthenticated)
{
 // Code omitted code for clarity
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "SignIn", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

W przewodniku Szybki start języka Java przycisk logowania znajduje się w pliku main/resources/templates/index.html .

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>HomePage</title>
</head>
<body>
<h3>Home Page</h3>

<form action="/msal4jsample/secure/aad">
    <input type="submit" value="Login">
</form>

</body>
</html>

W Node.js przewodniku Szybki start kod przycisku logowania znajduje się w pliku szablonu index.hbs .

<p>Welcome to {{title}}</p>
<a href="/auth/signin">Sign in</a>

Ten szablon jest obsługiwany za pośrednictwem głównej (indeksu) trasy aplikacji:

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username,
    });
});

W przewodniku Szybki start języka Python kod linku logowania znajduje się w pliku szablonu login.html .

<ul><li><a href='{{ auth_uri }}'>Sign In</a></li></ul>

Gdy nieuwierzytelniony użytkownik odwiedza stronę główną, index trasa w app.py przekierowuje użytkownika do login trasy.

@app.route("/")
def index():
    if not (app.config["CLIENT_ID"] and app.config["CLIENT_SECRET"]):
        # This check is not strictly necessary.
        # You can remove this check from your production code.
        return render_template('config_error.html')
    if not auth.get_user():
        return redirect(url_for("login"))
    return render_template('index.html', user=auth.get_user(), version=identity.__version__)

Trasa login określa odpowiedni auth_uri i renderuje szablon login.html .

@app.route("/login")
def login():
    return render_template("login.html", version=identity.__version__, **auth.log_in(
        scopes=app_config.SCOPE, # Have user consent to scopes during log-in
        redirect_uri=url_for("auth_response", _external=True), # Optional. If present, this absolute URL must match your app's redirect_uri registered in Azure Portal
        ))

`SignIn` działanie kontrolera

W ASP.NET wybranie przycisku Zaloguj się w aplikacji internetowej powoduje wyzwolenie SignIn akcji na kontrolerze AccountController . W poprzednich wersjach szablonów Account ASP.NET Core kontroler został osadzony z aplikacją internetową. Tak już nie jest, ponieważ kontroler jest teraz częścią pakietu NuGet Microsoft.Identity.Web.UI . Aby uzyskać szczegółowe informacje, zobacz AccountController.cs .

Ten kontroler obsługuje również aplikacje usługi Azure AD B2C.

W ASP.NET logowanie jest wyzwalane z SignIn() metody na kontrolerze (na przykład AccountController.cs#L16-L23). Ta metoda nie jest częścią programu .NET Framework (w przeciwieństwie do tego, co dzieje się w ASP.NET Core). Wysyła ono wyzwanie logowania openID po zaproponowaniu identyfikatora URI przekierowania.

public void SignIn()
{
    // Send an OpenID Connect sign-in request.
    if (!Request.IsAuthenticated)
    {
        HttpContext.GetOwinContext().Authentication.Challenge(new AuthenticationProperties { RedirectUri = "/" }, OpenIdConnectAuthenticationDefaults.AuthenticationType);
    }
}

W środowisku Java wylogowywanie jest obsługiwane przez bezpośrednie wywołanie Platforma tożsamości Microsoft logout punktu końcowego i podanie post_logout_redirect_uri wartości. Aby uzyskać szczegółowe informacje, zobacz AuthPageController.java#L30-L48.

@Controller
public class AuthPageController {

    @Autowired
    AuthHelper authHelper;

    @RequestMapping("/msal4jsample")
    public String homepage(){
        return "index";
    }

    @RequestMapping("/msal4jsample/secure/aad")
    public ModelAndView securePage(HttpServletRequest httpRequest) throws ParseException {
        ModelAndView mav = new ModelAndView("auth_page");

        setAccountInfo(mav, httpRequest);

        return mav;
    }

    // More code omitted for simplicity

Gdy użytkownik wybierze link Zaloguj, który wyzwala trasę, kontroler logowania przejmuje /auth/signin się w celu uwierzytelnienia użytkownika przy użyciu Platforma tożsamości Microsoft.

login(options = {}) {
    return async (req, res, next) => {

        /**
         * MSAL Node library allows you to pass your custom state as state parameter in the Request object.
         * The state parameter can also be used to encode information of the app's state before redirect.
         * You can pass the user's state in the app, such as the page or view they were on, as input to this parameter.
         */
        const state = this.cryptoProvider.base64Encode(
            JSON.stringify({
                successRedirect: options.successRedirect || '/',
            })
        );

        const authCodeUrlRequestParams = {
            state: state,

            /**
             * By default, MSAL Node will add OIDC scopes to the auth code url request. For more information, visit:
             * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
             */
            scopes: options.scopes || [],
            redirectUri: options.redirectUri,
        };

        const authCodeRequestParams = {
            state: state,

            /**
             * By default, MSAL Node will add OIDC scopes to the auth code request. For more information, visit:
             * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
             */
            scopes: options.scopes || [],
            redirectUri: options.redirectUri,
        };

        /**
         * If the current msal configuration does not have cloudDiscoveryMetadata or authorityMetadata, we will 
         * make a request to the relevant endpoints to retrieve the metadata. This allows MSAL to avoid making 
         * metadata discovery calls, thereby improving performance of token acquisition process. For more, see:
         * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/performance.md
         */
        if (!this.msalConfig.auth.cloudDiscoveryMetadata || !this.msalConfig.auth.authorityMetadata) {

            const [cloudDiscoveryMetadata, authorityMetadata] = await Promise.all([
                this.getCloudDiscoveryMetadata(this.msalConfig.auth.authority),
                this.getAuthorityMetadata(this.msalConfig.auth.authority)
            ]);

            this.msalConfig.auth.cloudDiscoveryMetadata = JSON.stringify(cloudDiscoveryMetadata);
            this.msalConfig.auth.authorityMetadata = JSON.stringify(authorityMetadata);
        }

        const msalInstance = this.getMsalInstance(this.msalConfig);

        // trigger the first leg of auth code flow
        return this.redirectToAuthCodeUrl(
            authCodeUrlRequestParams,
            authCodeRequestParams,
            msalInstance
        )(req, res, next);
    };
}
redirectToAuthCodeUrl(authCodeUrlRequestParams, authCodeRequestParams, msalInstance) {
    return async (req, res, next) => {
        // Generate PKCE Codes before starting the authorization flow
        const { verifier, challenge } = await this.cryptoProvider.generatePkceCodes();

        // Set generated PKCE codes and method as session vars
        req.session.pkceCodes = {
            challengeMethod: 'S256',
            verifier: verifier,
            challenge: challenge,
        };

        /**
         * By manipulating the request objects below before each request, we can obtain
         * auth artifacts with desired claims. For more information, visit:
         * https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_node.html#authorizationurlrequest
         * https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_node.html#authorizationcoderequest
         **/
        req.session.authCodeUrlRequest = {
            ...authCodeUrlRequestParams,
            responseMode: msal.ResponseMode.FORM_POST, // recommended for confidential clients
            codeChallenge: req.session.pkceCodes.challenge,
            codeChallengeMethod: req.session.pkceCodes.challengeMethod,
        };

        req.session.authCodeRequest = {
            ...authCodeRequestParams,
            code: '',
        };

        try {
            const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
            res.redirect(authCodeUrlResponse);
        } catch (error) {
            next(error);
        }
    };
}

/**
 * Retrieves cloud discovery metadata from the /discovery/instance endpoint
 * @returns 
 */
async getCloudDiscoveryMetadata(authority) {
    const endpoint = 'https://login.microsoftonline.com/common/discovery/instance';

    try {
        const response = await axios.get(endpoint, {
            params: {
                'api-version': '1.1',
                'authorization_endpoint': `${authority}/oauth2/v2.0/authorize`
            }
        });

        return await response.data;
    } catch (error) {
        throw error;
    }
}

Gdy użytkownik wybierze link Zaloguj się, zostanie on przeniesiony do punktu końcowego autoryzacji Platforma tożsamości Microsoft.

Pomyślne zalogowanie przekierowuje użytkownika do auth_response trasy, która kończy proces logowania przy użyciu polecenia auth.complete_login, renderuje błędy, jeśli istnieje, i przekierowuje teraz uwierzytelnionego użytkownika do strony głównej.

@app.route(app_config.REDIRECT_PATH)
def auth_response():
    result = auth.complete_log_in(request.args)
    if "error" in result:
        return render_template("auth_error.html", result=result)
    return redirect(url_for("index"))

Po zalogowaniu się użytkownika do aplikacji należy włączyć ich wylogowanie.

Wylogowywanie

Wylogowywanie z aplikacji internetowej wymaga więcej niż usunięcia informacji o zalogowanym koncie ze stanu aplikacji internetowej. Aplikacja internetowa musi również przekierować użytkownika do punktu końcowego Platforma tożsamości Microsoftlogout, aby się wylogować.

Gdy aplikacja internetowa przekierowuje użytkownika do punktu końcowego logout , ten punkt końcowy wyczyści sesję użytkownika z przeglądarki. Jeśli aplikacja nie przejdzie do punktu końcowego logout , użytkownik ponownie uwierzytelni aplikację bez konieczności ponownego wprowadzania poświadczeń. Przyczyną jest to, że będą mieć prawidłową sesję logowania jednokrotnego z Platforma tożsamości Microsoft.

Aby dowiedzieć się więcej, zobacz sekcję Wysyłanie żądania wylogowania w Platforma tożsamości Microsoft i dokumentację protokołu OpenID Connect.

Rejestrowanie aplikacji

Podczas rejestracji aplikacji należy zarejestrować adres URL wylogowywania kanału frontonu. W naszym samouczku zarejestrowano https://localhost:44321/signout-oidc się w polu Adres URL wylogowywania kanału frontonu na stronie Uwierzytelnianie. Aby uzyskać szczegółowe informacje, zobacz Rejestrowanie aplikacji internetowej.

Przycisk Wyloguj

W ASP.NET wybranie przycisku Wyloguj w aplikacji internetowej powoduje wyzwolenie SignOut akcji na kontrolerze AccountController (patrz poniżej)

<ul class="navbar-nav">
  @if (User.Identity.IsAuthenticated)
  {
    <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>

W ASP.NET MVC przycisk wyloguj się jest uwidoczniony w pliku Views\Shared\_LoginPartial.cshtml. Jest on wyświetlany tylko wtedy, gdy istnieje uwierzytelnione konto. Oznacza to, że jest wyświetlany, gdy użytkownik wcześniej się zalogował.

@if (Request.IsAuthenticated)
{
    <text>
        <ul class="nav navbar-nav navbar-right">
            <li class="navbar-text">
                Hello, @User.Identity.Name!
            </li>
            <li>
                @Html.ActionLink("Sign out", "SignOut", "Account")
            </li>
        </ul>
    </text>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Sign in", "SignIn", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

W naszym przewodniku Szybki start dla języka Java przycisk wylogowywanie znajduje się w pliku main/resources/templates/auth_page.html.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<form action="/msal4jsample/sign_out">
    <input type="submit" value="Sign out">
</form>
...

{{#if isAuthenticated }}
<a href="/auth/signout">Sign out</a>

W przewodniku Szybki start języka Python przycisk wylogowywanie znajduje się w pliku templates/index.html .

<li><a href="/logout">Logout</a></li>

`SignOut` działanie kontrolera

W poprzednich wersjach szablonów Account ASP.NET Core kontroler został osadzony z aplikacją internetową. Tak już nie jest, ponieważ kontroler jest teraz częścią pakietu NuGet Microsoft.Identity.Web.UI . Aby uzyskać szczegółowe informacje, zobacz AccountController.cs .

Ustawia identyfikator URI przekierowania identyfikatora OpenID tak /Account/SignedOut , aby kontroler był wywoływany z powrotem, gdy identyfikator Entra firmy Microsoft zakończył wylogowywanie.
Wywołuje metodę Signout(), która umożliwia oprogramowanie pośredniczące OpenID Connect kontaktowanie się z punktem końcowym Platforma tożsamości Microsoftlogout. Następnie punkt końcowy:
- Czyści plik cookie sesji z przeglądarki.
- Wywołuje ponownie identyfikator URI przekierowania po wylogowaniu. Domyślnie identyfikator URI przekierowania po wylogowaniu wyświetla stronę widoku wylogowania SignedOut.cshtml.cs. Ta strona jest również udostępniana jako część Microsoft.Identity.Web.

W ASP.NET wylogowanie jest wyzwalane z SignOut() metody na kontrolerze (na przykład AccountController.cs#L25-L31). Ta metoda nie jest częścią programu .NET Framework, w przeciwieństwie do tego, co dzieje się w ASP.NET Core. Ono:

Wysyła wyzwanie wylogowania openID.
Czyści pamięć podręczną.
Przekierowuje do żądanej strony.

/// <summary>
/// Send an OpenID Connect sign-out request.
/// </summary>
public void SignOut()
{
 HttpContext.GetOwinContext()
            .Authentication
            .SignOut(CookieAuthenticationDefaults.AuthenticationType);
 Response.Redirect("/");
}

@RequestMapping("/msal4jsample/sign_out")
    public void signOut(HttpServletRequest httpRequest, HttpServletResponse response) throws IOException {

        httpRequest.getSession().invalidate();

        String endSessionEndpoint = "https://login.microsoftonline.com/common/oauth2/v2.0/logout";

        String redirectUrl = "http://localhost:8080/msal4jsample/";
        response.sendRedirect(endSessionEndpoint + "?post_logout_redirect_uri=" +
                URLEncoder.encode(redirectUrl, "UTF-8"));
    }

Gdy użytkownik wybierze przycisk Wyloguj, aplikacja wyzwoli /auth/signout trasę, która niszczy sesję i przekierowuje przeglądarkę do Platforma tożsamości Microsoft punktu końcowego wylogowania.

logout(options = {}) {
    return (req, res, next) => {

        /**
         * Construct a logout URI and redirect the user to end the
         * session with Azure AD. For more information, visit:
         * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
         */
        let logoutUri = `${this.msalConfig.auth.authority}/oauth2/v2.0/`;

        if (options.postLogoutRedirectUri) {
            logoutUri += `logout?post_logout_redirect_uri=${options.postLogoutRedirectUri}`;
        }

        req.session.destroy(() => {
            res.redirect(logoutUri);
        });
    }
}

Gdy użytkownik wybierze pozycję Wyloguj, aplikacja wyzwoli logout trasę, która przekierowuje przeglądarkę do punktu końcowego wylogowania Platforma tożsamości Microsoft.

@app.route("/logout")
def logout():
    return redirect(auth.log_out(url_for("index", _external=True)))

Przechwytywanie wywołania do punktu końcowego `logout`

Identyfikator URI po wylogowaniu umożliwia aplikacjom uczestnictwo w globalnym wylogowaniu.

Oprogramowanie pośredniczące ASP.NET Core OpenID Connect umożliwia aplikacji przechwycenie wywołania punktu końcowego Platforma tożsamości Microsoft logout przez podanie zdarzenia OpenID Connect o nazwie OnRedirectToIdentityProviderForSignOut. Jest to obsługiwane automatycznie przez microsoft.Identity.Web (co powoduje wyczyszczenie kont w przypadku, gdy aplikacja internetowa wywołuje internetowe interfejsy API)

W ASP.NET delegujesz do oprogramowania pośredniczącego, aby wykonać wylogowywanie, czyszcząc plik cookie sesji:

public class AccountController : Controller
{
 ...
 public void EndSession()
 {
  Request.GetOwinContext().Authentication.SignOut();
  Request.GetOwinContext().Authentication.SignOut(Microsoft.AspNet.Identity.DefaultAuthenticationTypes.ApplicationCookie);
  this.HttpContext.GetOwinContext().Authentication.SignOut(CookieAuthenticationDefaults.AuthenticationType);
 }
}

Protokół

Jeśli chcesz dowiedzieć się więcej na temat wylogowywanie, przeczytaj dokumentację protokołu dostępną w witrynie OpenID Connect.

Następne kroki

Dowiedz się więcej, tworząc aplikację internetową platformy ASP.NET Core, która loguje użytkowników w poniższej serii samouczków wieloczęściowych
Eksplorowanie przykładów aplikacji internetowej Platforma tożsamości Microsoft

Udostępnij za pośrednictwem

Wylogowywanie

Rejestrowanie aplikacji

Przycisk Wyloguj

`SignOut` działanie kontrolera

Przechwytywanie wywołania do punktu końcowego `logout`

Protokół

Następne kroki

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Aplikacja internetowa, która loguje użytkowników: logowanie i wylogowywanie

Logowanie

Przycisk Logowania

SignIn działanie kontrolera

Wylogowywanie

Rejestrowanie aplikacji

Przycisk Wyloguj

SignOut działanie kontrolera

Przechwytywanie wywołania do punktu końcowego logout

Protokół

Następne kroki

Opinia

Dodatkowe zasoby

`SignIn` działanie kontrolera

`SignOut` działanie kontrolera

Przechwytywanie wywołania do punktu końcowego `logout`