Napsání webové aplikace, která se přihlásí nebo odhlásí uživatele - Microsoft identity platform

Článek
10/24/2023

Zjistěte, jak přidat přihlášení do kódu webové aplikace, který přihlašuje uživatele. Potom se naučíte, jak je nechat odhlásit.

Přihlášení se skládá ze dvou částí:

Tlačítko pro přihlášení na stránce HTML
Přihlašovací akce v kódu v kontroleru

V ASP.NET Core se pro aplikace Microsoft Identity Platform zobrazí Views\Shared\_LoginPartial.cshtml tlačítko Přihlásit se (pro aplikaci MVC) nebo Pages\Shared\_LoginPartial.cshtm (pro aplikaci Razor). Zobrazí se jenom v případech, kdy uživatel není ověřený. To znamená, že se zobrazí, když se uživatel ještě nepřihlásil nebo se odhlásil. Naopak se tlačítko Odhlásit se zobrazí, když je uživatel již přihlášen. Všimněte si, že řadič účtu je definován v balíčku NuGet Microsoft.Identity.Web.UI v oblasti s názvem 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>

V ASP.NET MVC je tlačítko Přihlásit se vystaveno v Views\Shared\_LoginPartial.cshtml. Zobrazí se jenom v případech, kdy uživatel není ověřený. To znamená, že se zobrazí, když se uživatel ještě nepřihlásil nebo se odhlásil.

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

V rychlém startu v Javě se tlačítko pro přihlášení nachází v souboru 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>

V Node.js rychlém startu se kód pro tlačítko pro přihlášení nachází v souboru šablony index.hbs .

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

Tato šablona se obsluhuje prostřednictvím hlavní trasy (indexu) aplikace:

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

V rychlém startu v Pythonu se kód pro odkaz pro přihlášení nachází v souboru šablony login.html .

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

Když neověřený uživatel navštíví domovskou stránku, index trasa v app.py přesměruje uživatele na trasu login .

@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 vyčíslí odpovídající auth_uri šablonu login.html a vykreslí ji.

@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` akce kontroleru

Když v ASP.NET vyberete tlačítko Přihlásit se ve webové aplikaci, aktivuje se SignIn akce na AccountController kontroleru. V předchozích verzích šablon Account ASP.NET Core byl kontroler vložen do webové aplikace. Už to tak není, protože kontroler je teď součástí balíčku NuGet Microsoft.Identity.Web.UI . Podrobnosti najdete v AccountController.cs .

Tento kontroler také zpracovává aplikace Azure AD B2C.

V ASP.NET se přihlášení aktivuje z SignIn() metody na kontroleru (například AccountController.cs#L16-L23). Tato metoda není součástí rozhraní .NET Framework (na rozdíl od toho, co se stane v ASP.NET Core). Po zadání identifikátoru URI přesměrování odešle výzvu pro přihlášení OpenID.

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

V Javě se odhlašování zpracovává voláním koncového bodu Microsoft Identity Platform logout přímo a zadáním post_logout_redirect_uri hodnoty. Podrobnosti najdete v tématu 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

Když uživatel vybere odkaz Pro přihlášení , který spustí trasu /auth/signin , kontroler přihlášení převezme ověření uživatele pomocí platformy 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;
    }
}

Když uživatel vybere odkaz Pro přihlášení , přenese se do koncového bodu autorizace Microsoft Identity Platform.

Úspěšné přihlášení přesměruje uživatele na trasu auth_response , která dokončí proces přihlašování pomocí auth.complete_login, vykreslí chyby, pokud existuje, a přesměruje nyní ověřeného uživatele na domovskou stránku.

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

Jakmile se uživatel přihlásí k aplikaci, budete ho chtít povolit, aby se odhlásil.

Odhlášení

Odhlášení z webové aplikace zahrnuje víc než odebrání informací o přihlášeném účtu ze stavu webové aplikace. Webová aplikace musí uživatele také přesměrovat na koncový bod Microsoft Identity Platform logout , aby se odhlasil.

Když vaše webová aplikace přesměruje uživatele na logout koncový bod, tento koncový bod vymaže relaci uživatele z prohlížeče. Pokud vaše aplikace nepřešla do koncového logout bodu, uživatel se k aplikaci znovu připojí, aniž by znovu zadal své přihlašovací údaje. Důvodem je, že budou mít platnou relaci jednotného přihlašování s platformou Microsoft Identity Platform.

Další informace najdete v části Odeslání žádosti o odhlášení na platformě Microsoft Identity Platform a dokumentaci k protokolu OpenID Připojení.

Registrace aplikace

Během registrace aplikace zaregistrujete adresu URL odhlášení front-channel. V našem kurzu jste se zaregistrovali https://localhost:44321/signout-oidc v poli Adresa URL pro odhlášení front-channel na stránce Ověřování. Podrobnosti najdete v tématu Registrace webové aplikace.

Tlačítko Odhlásit se

Když v ASP.NET vyberete tlačítko Odhlásit se ve webové aplikaci, aktivuje SignOut se akce na AccountController kontroleru (viz níže).

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

V ASP.NET MVC se tlačítko pro odhlášení zobrazí v Views\Shared\_LoginPartial.cshtmlsouboru . Zobrazí se jenom v případech, kdy je ověřený účet. To znamená, že se zobrazí, když se uživatel dříve přihlásil.

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

V našem rychlém startu v Javě se tlačítko pro odhlášení nachází v souboru 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>

V rychlém startu v Pythonu se tlačítko pro odhlášení nachází v souboru templates/index.html .

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

`SignOut` akce kontroleru

V předchozích verzích šablon Account ASP.NET Core byl kontroler vložen do webové aplikace. Už to tak není, protože kontroler je teď součástí balíčku NuGet Microsoft.Identity.Web.UI . Podrobnosti najdete v AccountController.cs .

Nastaví identifikátor URI přesměrování OpenID tak /Account/SignedOut , aby se kontroler volal zpět, když id Microsoft Entra dokončilo odhlášení.
Volání Signout(), která umožňuje OpenID Připojení middleware kontaktovat koncový bod Microsoft Identity Platformlogout. Koncový bod pak:
- Vymaže soubor cookie relace z prohlížeče.
- Volá zpět identifikátor URI přesměrování po odhlášení. Ve výchozím nastavení identifikátor URI přesměrování po odhlášení zobrazuje stránku zobrazení odhlášení SignedOut.cshtml.cs. Tato stránka se také poskytuje jako součást microsoft.Identity.Web.

V ASP.NET se odhlásí z SignOut() metody na kontroleru (například AccountController.cs#L25-L31). Tato metoda není součástí rozhraní .NET Framework, na rozdíl od toho, co se děje v ASP.NET Core. Je to:

Odešle výzvu k odhlášení OpenID.
Vymaže mezipaměť.
Přesměruje se na požadovanou stránku.

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

Když uživatel vybere tlačítko Odhlásit se, aplikace spustí trasu /auth/signout , která zničí relaci a přesměruje prohlížeč na koncový bod odhlášení od 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);
        });
    }
}

Když uživatel vybere Odhlášení, aplikace spustí trasu logout , která přesměruje prohlížeč do koncového bodu odhlášení z platformy Microsoft Identity Platform.

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

Zachycení volání koncového `logout` bodu

Identifikátor URI po odhlášení umožňuje aplikacím účastnit se globálního odhlášení.

Middleware ASP.NET Core OpenID Připojení umožňuje vaší aplikaci zachytit volání koncového bodu platformy Microsoft Identity Platform logout poskytnutím události OpenID Připojení s názvem OnRedirectToIdentityProviderForSignOut. Tento problém automaticky zpracovává Microsoft.Identity.Web (který vymaže účty v případě, že webová aplikace volá webové rozhraní API)

V ASP.NET delegujete do middlewaru spuštění odhlášení a vymažete soubor cookie relace:

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

Protokol

Pokud chcete získat další informace o odhlášení, přečtěte si dokumentaci k protokolu, která je k dispozici v Připojení OpenID.

Další kroky

Další informace o vytvoření webové aplikace ASP.NET Core, která přihlašuje uživatele v následující sérii kurzů s více částmi
Prozkoumání ukázek webových aplikací Microsoft Identity Platform

Webová aplikace, která přihlašuje uživatele: Přihlášení a odhlášení

Přihlášení

Tlačítko Pro přihlášení

SignIn akce kontroleru