Skriva en webbapp som loggar in/ut användare - Microsoft identity platform

Artikel
10/24/2023

Lär dig hur du lägger till inloggning i koden för din webbapp som loggar in användare. Lär dig sedan hur du låter dem logga ut.

Inloggningen består av två delar:

Inloggningsknappen på HTML-sidan
Inloggningsåtgärden i koden bakom i kontrollanten

I ASP.NET Core, för Microsofts identitetsplattform program, visas knappen Logga in i Views\Shared\_LoginPartial.cshtml (för en MVC-app) eller Pages\Shared\_LoginPartial.cshtm (för en Razor-app). Den visas bara när användaren inte autentiseras. Den visas alltså när användaren ännu inte har loggat in eller har loggat ut. Tvärtom visas knappen Logga ut när användaren redan är inloggad. Observera att kontokontrollanten definieras i NuGet-paketet Microsoft.Identity.Web.UI i området med namnet 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>

I ASP.NET MVC visas knappen Logga in iViews\Shared\_LoginPartial.cshtml. Den visas bara när användaren inte autentiseras. Den visas alltså när användaren ännu inte har loggat in eller har loggat ut.

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

I Java-snabbstarten finns inloggningsknappen i filen 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>

I snabbstarten Node.js finns koden för inloggningsknappen i mallfilen index.hbs .

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

Den här mallen hanteras via appens huvudväg (index):

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

I Python-snabbstarten finns koden för inloggningslänken i login.html mallfil.

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

När en oautentiserad användare besöker startsidan index omdirigerar vägen i app.py användaren till login vägen.

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

Vägen login räknar ut lämpligt auth_uri och återger mallen 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` kontrollantens åtgärd

I ASP.NET utlöser du åtgärden på kontrollanten genom att välja knappen Logga in i webbappen SignInAccountController . I tidigare versioner av ASP.NET Core-mallarna inbäddades kontrollanten Account med webbappen. Så är inte längre fallet eftersom kontrollanten nu är en del av NuGet-paketet Microsoft.Identity.Web.UI . Mer information finns i AccountController.cs .

Den här kontrollanten hanterar även Azure AD B2C-program.

I ASP.NET utlöses inloggningen SignIn() från metoden på en kontrollant (till exempel AccountController.cs#L16-L23). Den här metoden är inte en del av .NET Framework (i motsats till vad som händer i ASP.NET Core). Den skickar en OpenID-inloggningsutmaning efter att ha föreslagit en omdirigerings-URI.

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

I Java hanteras utloggningen genom att anropa Microsofts identitetsplattform logout slutpunkten direkt och ange post_logout_redirect_uri värdet. Mer information finns i 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

När användaren väljer länken Logga in, som utlöser /auth/signin vägen, tar inloggningskontrollanten över för att autentisera användaren med Microsofts identitetsplattform.

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

När användaren väljer länken Logga in förs de till Microsofts identitetsplattform-auktoriseringsslutpunkten.

En lyckad inloggning omdirigerar användaren till auth_response vägen, som slutför inloggningsprocessen med hjälp av auth.complete_login, återger eventuella fel och omdirigerar den nu autentiserade användaren till startsidan.

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

När användaren har loggat in på din app vill du aktivera dem för att logga ut.

Logga ut

Att logga ut från en webbapp innebär mer än att ta bort information om det inloggade kontot från webbappens tillstånd. Webbappen måste också omdirigera användaren till Microsofts identitetsplattform logout slutpunkten för att logga ut.

När webbappen omdirigerar användaren till logout slutpunkten rensar den här slutpunkten användarens session från webbläsaren. Om appen inte gick till logout slutpunkten autentiseras användaren igen till din app utan att ange sina autentiseringsuppgifter igen. Anledningen är att de har en giltig session för enkel inloggning med Microsofts identitetsplattform.

Mer information finns i avsnittet Skicka en utloggningsbegäran i dokumentationen Microsofts identitetsplattform och OpenID Anslut protocol.

Programregistrering

Under programregistreringen registrerar du en url för utloggning på frontkanalen. I vår självstudie har du registrerat https://localhost:44321/signout-oidc dig i fältet Url för utloggning i Front-channel på sidan Autentisering . Mer information finns i Registrera webApp-appen.

Knappen Logga ut

Om du väljer knappen Logga ut i webbappen i ASP.NET utlöses SignOut åtgärden på kontrollanten AccountController (se nedan)

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

I ASP.NET MVC exponeras utloggningsknappen i Views\Shared\_LoginPartial.cshtml. Den visas bara när det finns ett autentiserat konto. Det vill: den visas när användaren tidigare har loggat in.

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

I vår Java-snabbstart finns utloggningsknappen i filen 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>

I Python-snabbstarten finns utloggningsknappen i filen templates/index.html .

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

`SignOut` kontrollantens åtgärd

I tidigare versioner av ASP.NET Core-mallarna inbäddades kontrollanten Account med webbappen. Så är inte längre fallet eftersom kontrollanten nu är en del av NuGet-paketet Microsoft.Identity.Web.UI . Mer information finns i AccountController.cs .

Anger en OpenID-omdirigerings-URI till /Account/SignedOut så att kontrollanten anropas tillbaka när Microsoft Entra-ID:t har slutfört utloggningen.
Anropar Signout(), vilket gör att OpenID-Anslut mellanprogram kan kontakta Microsofts identitetsplattform logout slutpunkten. Slutpunkten:
- Rensar sessionscookien från webbläsaren.
- Anropar omdirigerings-URI:n efter utloggningen. Som standard visar omdirigerings-URI:n efter utloggningen den utloggade vysidan SignedOut.cshtml.cs. Den här sidan tillhandahålls också som en del av Microsoft.Identity.Web.

I ASP.NET utlöses utloggning från SignOut() -metoden på en kontrollant (till exempel AccountController.cs#L25-L31). Den här metoden är inte en del av .NET Framework, i motsats till vad som händer i ASP.NET Core. Det:

Skickar en OpenID-utloggningsutmaning.
Rensar cacheminnet.
Omdirigerar till den sida som den vill ha.

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

När användaren väljer knappen Logga ut utlöser /auth/signout appen vägen, vilket förstör sessionen och omdirigerar webbläsaren till Microsofts identitetsplattform utloggningsslutpunkt.

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

När användaren väljer Utloggning utlöser logout appen vägen, som omdirigerar webbläsaren till Microsofts identitetsplattform utloggningsslutpunkt.

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

Fånga upp anropet `logout` till slutpunkten

URI:n efter utloggningen gör det möjligt för program att delta i den globala utloggningen.

Med ASP.NET Core OpenID Anslut mellanprogram kan appen fånga upp anropet till Microsofts identitetsplattform logout slutpunkten genom att tillhandahålla en OpenID-Anslut händelse med namnet OnRedirectToIdentityProviderForSignOut. Detta hanteras automatiskt av Microsoft.Identity.Web (som rensar konton om webbappen anropar webb-API:er)

I ASP.NET delegerar du till mellanprogrammet för att köra utloggningen och rensar sessionscookien:

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

Protokoll

Om du vill veta mer om utloggning läser du protokolldokumentationen som är tillgänglig från OpenID Anslut.

Nästa steg

Läs mer genom att skapa en ASP.NET Core-webbapp som loggar in användare i följande självstudieserie i flera delar
Utforska Microsofts identitetsplattform webbappexempel

Share via

Logga ut

Programregistrering

Knappen Logga ut

`SignOut` kontrollantens åtgärd

Fånga upp anropet `logout` till slutpunkten

Protokoll

Nästa steg

Ytterligare resurser

Share via

Webbapp som loggar in användare: Logga in och logga ut

Logga in

Knappen Logga in

SignIn kontrollantens åtgärd

Logga ut

Programregistrering

Knappen Logga ut

SignOut kontrollantens åtgärd

Fånga upp anropet logout till slutpunkten

Protokoll

Nästa steg

Ytterligare resurser

`SignIn` kontrollantens åtgärd

`SignOut` kontrollantens åtgärd

Fånga upp anropet `logout` till slutpunkten