Een web-app schrijven waarmee gebruikers worden aangemeld/afgetekend - Microsoft identity platform

Artikel
2025-03-21

Van toepassing op: Groene cirkel met een wit vinkje. Werknemershuurders Witte cirkel met een grijs X-symbool. Externe huurders (meer informatie)

Informatie over het toevoegen van aanmelding aan de code voor uw web-app waarmee gebruikers worden aangemeld. Leer vervolgens hoe ze zich kunnen afmelden.

Aanmelden bestaat uit twee onderdelen:

De aanmeldingsknop op de HTML-pagina
De aanmeldingsactie in de code-behind in de controller

In ASP.NET Core, voor Microsoft Identity Platform-toepassingen, wordt de knop Aanmelden weergegeven in Views\Shared\_LoginPartial.cshtml (voor een MVC-app) of Pages\Shared\_LoginPartial.cshtm (voor een Razor-app). Deze wordt alleen weergegeven wanneer de gebruiker niet is geverifieerd. Dat wil gezegd, deze wordt weergegeven wanneer de gebruiker zich nog niet heeft aangemeld of zich heeft afgemeld. Integendeel, de knop Afmelden wordt weergegeven wanneer de gebruiker al is aangemeld. De accountcontroller is gedefinieerd in het Microsoft.Identity.Web.UI NuGet-pakket, in het gebied met de naam 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>

In ASP.NET MVC wordt de knop Aanmelden weergegeven in Views\Shared\_LoginPartial.cshtml. Deze wordt alleen weergegeven wanneer de gebruiker niet is geverifieerd. Dat wil gezegd, deze wordt weergegeven wanneer de gebruiker zich nog niet heeft aangemeld of zich heeft afgemeld.

@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>
}

In de Java-quickstart bevindt de aanmeldingsknop zich in het main/resources/templates/index.html-bestand .

<!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>

In de quickstart Node.js bevindt de code voor de aanmeldingsknop zich in het sjabloonbestand index.hbs .

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

Deze sjabloon wordt geleverd via de hoofdroute (index) van de app:

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,
    });
});

In de Python-quickstart bevindt de code voor de aanmeldingskoppeling zich in login.html sjabloonbestand.

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

Wanneer een niet-geverifieerde gebruiker de startpagina bezoekt, leidt de index route in app.py de gebruiker om naar de login route.

@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__)

De login route bepaalt de juiste auth_uri en geeft de login.html sjabloon weer.

@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` actie van de controller

Als u in ASP.NET de knop Aanmelden in de web-app selecteert, wordt de SignIn actie op de AccountController controller geactiveerd. In eerdere versies van de ASP.NET Core-sjablonen is de Account controller ingesloten met de web-app. Dat is niet meer het geval omdat de controller nu deel uitmaakt van het NuGet-pakket Microsoft.Identity.Web.UI . Zie AccountController.cs voor meer informatie.

Deze controller verwerkt ook de Azure AD B2C-toepassingen.

In ASP.NET wordt aanmelding geactiveerd vanuit de SignIn() methode op een controller (bijvoorbeeld AccountController.cs#L16-L23). Deze methode maakt geen deel uit van .NET Framework (in tegenstelling tot wat er gebeurt in ASP.NET Core). Er wordt een OpenID-aanmeldingsvraag verzonden nadat een omleidings-URI is voorgesteld.

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

In Java wordt afmelden afgehandeld door het Microsoft Identity Platform rechtstreeks logout eindpunt aan te roepen en de post_logout_redirect_uri waarde op te geven. Zie AuthPageController.java#L30-L48 voor meer informatie.

@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

Wanneer de gebruiker de Inloggen koppeling selecteert, die de /auth/signin route activeert, neemt de aanmeldingscontroller het proces over om de gebruiker te authenticeren met het Microsoft Identity Platform.

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;
    }
}

Wanneer de gebruiker de aanmeldingskoppeling selecteert, wordt deze naar het autorisatie-eindpunt van het Microsoft Identity Platform gebracht.

Een geslaagde aanmelding leidt de gebruiker om naar de auth_response route, die het aanmeldingsproces voltooit met behulp auth.complete_loginvan, geeft fouten weer indien aanwezig en leidt de nu geverifieerde gebruiker om naar de startpagina.

@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"))

Nadat de gebruiker zich heeft aangemeld bij uw app, wilt u hen in staat stellen zich af te melden.

Afmelden

Afmelden bij een web-app omvat meer dan het verwijderen van de informatie over het aangemelde account uit de status van de web-app. De web-app moet de gebruiker ook omleiden naar het Eindpunt van het Microsoft Identity Platform logout om zich af te melden.

Wanneer uw web-app de gebruiker naar het logout-eindpunt stuurt, wist dit eindpunt de sessie van de gebruiker in de browser. Als uw app niet naar het logout-eindpunt is gegaan, kan de gebruiker zich opnieuw verifiëren bij uw app zonder de referenties opnieuw in te voeren. De reden hiervoor is dat ze een geldige sessie voor eenmalige aanmelding hebben met het Microsoft Identity Platform.

Zie de sectie Een afmeldingsaanvraag verzenden in het Microsoft Identity Platform en het OpenID Connect-protocol documentatie voor meer informatie.

Applicatieregistratie

Tijdens de registratie van de toepassing registreert u een afmeldings-URL voor front-channel. In onze zelfstudie registreerde u https://localhost:44321/signout-oidc in het Front-channel afmeldings-URL veld op de pagina Authenticatie. Zie De webApp-app registreren voor meer informatie.

Afmeldenknop

Als u in ASP.NET de knop Afmelden in de web-app selecteert, wordt de SignOut actie op de AccountController controller geactiveerd (zie hieronder)

<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>

In ASP.NET MVC wordt de knop Afmelden weergegeven in Views\Shared\_LoginPartial.cshtml. Deze wordt alleen weergegeven wanneer er een geverifieerd account is. Dat wil gezegd, het wordt weergegeven wanneer de gebruiker zich eerder heeft aangemeld.

@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>
}

In onze Java-quickstart bevindt de knop Afmelden zich in het bestand 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>

In de Python-quickstart bevindt de knop Afmelden zich in het bestand sjablonen/index.html.

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

`SignOut` actie van de controller

In eerdere versies van de ASP.NET Core-sjablonen is de Account controller ingesloten met de web-app. Dat is niet meer het geval omdat de controller nu deel uitmaakt van het NuGet-pakket Microsoft.Identity.Web.UI . Zie AccountController.cs voor meer informatie.

Hiermee stelt u een OpenID-omleidings-URI in op /Account/SignedOut zodat de controller wordt teruggeroepen wanneer de Microsoft Entra-id de afmelding heeft voltooid.
Aanroepen Signout(), waarmee de OpenID Connect-middleware contact kan opnemen met het Microsoft Identity Platform-eindpunt logout . Het eindpunt is dan:
- Hiermee wist u de sessiecookie uit de browser.
- Roept de omleidings-URI na afmelding terug. De omleidings-URI na afmelding geeft standaard de pagina voor afgemelde weergave weer SignedOut.cshtml.cs. Deze pagina wordt ook geleverd als onderdeel van Microsoft.Identity.Web.

In ASP.NET wordt afmelden geactiveerd vanuit de SignOut() methode op een controller (bijvoorbeeld AccountController.cs#L25-L31). Deze methode maakt geen deel uit van .NET Framework, in tegenstelling tot wat er in ASP.NET Core gebeurt. Het:

Hiermee wordt een OpenID-afmeldingsuitdaging verzonden.
Hiermee wordt de cache gewist.
Wordt omgeleid naar de gewenste pagina.

/// <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"));
    }

Wanneer de gebruiker de knop Afmelden selecteert, activeert de app de /auth/signout route, waardoor de sessie wordt vernietigd en de browser wordt omgeleid naar het afmeldingseindpunt van het Microsoft Identity Platform.

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);
        });
    }
}

Wanneer de gebruiker Afmeldenselecteert, activeert de app de logout route, waarmee de browser wordt omgeleid naar het afmeldingseindpunt van het Microsoft Identity Platform.

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

De aanroep naar het `logout` eindpunt onderscheppen

Met de afmeldings-URI kunnen toepassingen deelnemen aan de algemene afmelding.

Met de ASP.NET Core OpenID Connect middleware kan uw app de aanroep naar het Microsoft Identity Platform-eindpunt logout onderscheppen door een OpenID Connect-gebeurtenis met de naam OnRedirectToIdentityProviderForSignOutop te geven. Dit wordt automatisch afgehandeld door Microsoft.Identity.Web (waarmee accounts worden gewist in het geval dat uw web-app web-API's aanroept).

In ASP.NET delegeert u aan de middleware om het afmelden uit te voeren en de sessiecookie te wissen.

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);
 }
}

Protocol

Als u meer wilt weten over afmelden, leest u de protocoldocumentatie die beschikbaar is via OpenID Connect.

Volgende stappen

Meer te weten komen door een ASP.NET Core-web-app te bouwen waarmee gebruikers worden aangemeld in de volgende meerdelige reeks van zelfstudies
Voorbeelden van web-apps van Microsoft Identity Platform verkennen

Delen via

Web-app waarmee gebruikers worden aangemeld: Aanmelden en afmelden

Aanmelden

Aanmeldingsknop

SignIn actie van de controller

Afmelden

Applicatieregistratie

Afmeldenknop

SignOut actie van de controller

De aanroep naar het logout eindpunt onderscheppen

Protocol

Volgende stappen

Feedback

Aanvullende resources

`SignIn` actie van de controller

`SignOut` actie van de controller

De aanroep naar het `logout` eindpunt onderscheppen