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

Artikel
10/24/2023

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. Houd er rekening mee dat de accountcontroller is gedefinieerd in het NuGet-pakket Microsoft.Identity.Web.UI , 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, wordt de index route in app.py de gebruiker omgeleid 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-eindpunt logout rechtstreeks 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 aanmeldingskoppeling selecteert, die de /auth/signin route activeert, neemt de aanmeldingscontroller de gebruiker over om de gebruiker te verifiëren 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, kunt u zich afmelden.

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 omleidt naar het logout eindpunt, wist dit eindpunt de sessie van de gebruiker vanuit de browser. Als uw app niet naar het logout eindpunt is gegaan, wordt de gebruiker opnieuw geverifieerd 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 de documentatie van het OpenID-Verbinding maken-protocol voor meer informatie.

Toepassingsregistratie

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

Knop Afmelden

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 afmeldingsknop 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 afmeldingsknop zich in het main/resources/templates/auth_page.html-bestand.

<!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 afmeldingsknop zich in het templates/index.html-bestand .

<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 /Account/SignedOut in zodat de controller wordt teruggeroepen wanneer de Microsoft Entra-id de afmelding heeft voltooid.
AanroepenSignout(), waarmee de OpenID Verbinding maken middleware contact kan opnemen met het Microsoft Identity Platform-eindpuntlogout. Het eindpunt vervolgens:
- Hiermee wist u de sessiecooky 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. Met deze methode:

Hiermee wordt een OpenID-afmeldingsvraag 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 Afmelden selecteert, 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 Verbinding maken middleware kan uw app de aanroep naar het Microsoft Identity Platform-eindpunt logout onderscheppen door een OpenID-Verbinding maken gebeurtenis met de naam OnRedirectToIdentityProviderForSignOutop te geven. Dit wordt automatisch afgehandeld door Microsoft.Identity.Web (waarmee accounts worden gewist in het geval waarin uw web-app web-API's aanroept)

In ASP.NET delegeert u delegeren aan de middleware om de afmelding uit te voeren, waarbij u de sessiecookies wist:

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 Verbinding maken.

Volgende stappen

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

Share via

Afmelden

Toepassingsregistratie

Knop Afmelden

`SignOut` actie van de controller

De aanroep naar het `logout` eindpunt onderscheppen

Protocol

Volgende stappen

Aanvullende resources

Share via

Web-app waarmee gebruikers worden aangemeld: aanmelden en afmelden

Aanmelden

Aanmeldingsknop

SignIn actie van de controller

Afmelden

Toepassingsregistratie

Knop Afmelden

SignOut actie van de controller

De aanroep naar het logout eindpunt onderscheppen

Protocol

Volgende stappen

Aanvullende resources

`SignIn` actie van de controller

`SignOut` actie van de controller

De aanroep naar het `logout` eindpunt onderscheppen