Felhasználókat bejelentkező/kijelentkeztető webalkalmazás írása - Microsoft identity platform

Cikk
01/30/2024

Megtudhatja, hogyan adhat hozzá bejelentkezést a felhasználókat bejelentkező webalkalmazás kódjához. Ezután megtudhatja, hogyan hagyhatja, hogy kijelentkezjenek.

A bejelentkezés két részből áll:

A bejelentkezési gomb a HTML-oldalon
A bejelentkezési művelet a vezérlő mögötti kódban

A ASP.NET Core-ban Microsoft Identitásplatform alkalmazások esetén a Bejelentkezés gomb megjelenik Views\Shared\_LoginPartial.cshtml (MVC-alkalmazások esetén) vagy Pages\Shared\_LoginPartial.cshtm (Razor-alkalmazások esetén). Csak akkor jelenik meg, ha a felhasználó nincs hitelesítve. Ez azt jelzi, hogy akkor jelenik meg, ha a felhasználó még nem jelentkezett be vagy kijelentkezett. Éppen ellenkezőleg, a Kijelentkezés gomb akkor jelenik meg, ha a felhasználó már bejelentkezett. Vegye figyelembe, hogy a fiókvezérlő a Microsoft.Identity.Web.UI NuGet csomagban, a MicrosoftIdentity nevű területen van definiálva

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

A ASP.NET MVC-ben a Bejelentkezés gomb megjelenik a következőben: .a0> Csak akkor jelenik meg, ha a felhasználó nincs hitelesítve. Ez azt jelzi, hogy akkor jelenik meg, ha a felhasználó még nem jelentkezett be vagy kijelentkezett.

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

A Java rövid útmutatójában a bejelentkezési gomb a main/resources/templates/index.html fájlban található.

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

A Node.js rövid útmutatóban a bejelentkezési gomb kódja az index.hbs sablonfájlban található.

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

Ez a sablon az alkalmazás fő (index) útvonalán keresztül érhető el:

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

A Python rövid útmutatójában a bejelentkezési hivatkozás kódja login.html sablonfájlban található.

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

Amikor egy hitelesítés nélküli felhasználó felkeresi a kezdőlapot, a index app.py útvonala átirányítja a felhasználót az login útvonalra.

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

Az login útvonal meghatározza a megfelelőt auth_uri , és megjeleníti a login.html sablont.

@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` a vezérlő művelete

A ASP.NET a webalkalmazás Bejelentkezési gombjának kiválasztása aktiválja a SignIn műveletet a AccountController vezérlőn. A ASP.NET Core-sablonok korábbi verzióiban a Account vezérlő beágyazva lett a webalkalmazásba. Ez már nem így van, mert a vezérlő most már a Microsoft.Identity.Web.UI NuGet-csomag része. Részletekért tekintse meg a AccountController.cs .

Ez a vezérlő az Azure AD B2C-alkalmazásokat is kezeli.

A ASP.NET a bejelentkezés a SignIn() vezérlő metódusából aktiválódik (például AccountController.cs#L16-L23). Ez a módszer nem része a .NET-keretrendszer (ellentétben a ASP.NET Core-ban történtekkel). Az átirányítási URI javaslatát követően OpenID-bejelentkezési kihívást küld.

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

A Java-ban a kijelentkezés a Microsoft Identitásplatform logout végpont közvetlen meghívásával és az post_logout_redirect_uri érték megadásával kezelhető. További információ: 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

Amikor a felhasználó kiválasztja a bejelentkezési hivatkozást, amely elindítja az /auth/signin útvonalat, a bejelentkezési vezérlő átveszi a felhasználó hitelesítését Microsoft Identitásplatform.

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

Amikor a felhasználó kiválasztja a Bejelentkezési hivatkozást, a rendszer a Microsoft Identitásplatform engedélyezési végpontra irányítja őket.

A sikeres bejelentkezés átirányítja a felhasználót az auth_response útvonalra, amely befejezi a bejelentkezési folyamatot auth.complete_login, megjeleníti a hibákat, ha vannak ilyenek, és átirányítja a most hitelesített felhasználót a kezdőlapra.

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

Miután a felhasználó bejelentkezett az alkalmazásba, engedélyeznie kell a kijelentkezésüket.

Kijelentkezés

A webalkalmazásból való kijelentkezés több, mint a bejelentkezett fiók adatainak eltávolítása a webalkalmazás állapotából. A webalkalmazásnak át kell irányítania a felhasználót a Microsoft Identitásplatform logout végpontra a kijelentkezéshez.

Amikor a webalkalmazás átirányítja a felhasználót a logout végpontra, ez a végpont törli a felhasználó munkamenetét a böngészőből. Ha az alkalmazás nem a végpontra logout ment, a felhasználó újrahitelesíti az alkalmazást anélkül, hogy újra megírta volna a hitelesítő adatait. Ennek az az oka, hogy érvényes egyszeri bejelentkezési munkamenetet fognak létrehozni a Microsoft Identitásplatform.

További információ: A kijelentkezés kérésének küldése szakasz a Microsoft Identitásplatform és az OpenID Connect protokoll dokumentációjában.

Alkalmazásregisztráció

Az alkalmazásregisztráció során regisztrál egy előtérbeli bejelentkezési URL-címet. Az oktatóanyagban regisztrálta https://localhost:44321/signout-oidc magát a Hitelesítés lap Front-channel logout URL-mezőjében. További információ: A webApp alkalmazás regisztrálása.

Kijelentkezés gomb

A ASP.NET a kijelentkezés gombra kattintva a webalkalmazás aktiválja a SignOut műveletet a AccountController vezérlőn (lásd alább)

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

A ASP.NET MVC-ben a kijelentkezés gomb megjelenik a következőben Views\Shared\_LoginPartial.cshtml: . Csak hitelesített fiók esetén jelenik meg. Vagyis akkor jelenik meg, amikor a felhasználó korábban bejelentkezett.

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

A Java rövid útmutatóban a kijelentkezés gomb a main/resources/templates/auth_page.html fájlban található.

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

A Python rövid útmutatójában a kijelentkezés gomb a templates/index.html fájlban található.

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

`SignOut` a vezérlő művelete

A ASP.NET Core-sablonok korábbi verzióiban a Account vezérlő beágyazva lett a webalkalmazásba. Ez már nem így van, mert a vezérlő most már a Microsoft.Identity.Web.UI NuGet-csomag része. Részletekért tekintse meg a AccountController.cs .

Beállít egy OpenID-átirányítási URI-t /Account/SignedOut , hogy a rendszer visszahívja a vezérlőt, amikor a Microsoft Entra ID befejezte a kijelentkezéseket.
HívásokSignout(), amelyek lehetővé teszi, hogy az OpenID Connect köztes szoftver lépjen kapcsolatba a Microsoft Identitásplatform logout végponttal. A végpont ezután:
- Törli a munkamenet-cookie-t a böngészőből.
- Visszahívja a kijelentkezés utáni átirányítási URI-t. Alapértelmezés szerint a kijelentkezés utáni átirányítási URI megjeleníti a kijelentkezés utáni nézetoldalt SignedOut.cshtml.cs. Ez a lap a Microsoft.Identity.Web részeként is elérhető.

A ASP.NET a kijelentkezés a SignOut() vezérlő metódusából aktiválódik (például AccountController.cs#L25-L31). Ez a módszer nem része a .NET-keretrendszer, ellentétben azzal, ami a ASP.NET Core-ban történik. Őt:

OpenID-bejelentkezési kihívást küld.
Törli a gyorsítótárat.
Átirányítja a kívánt lapra.

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

Amikor a felhasználó kiválasztja a Kijelentkezés gombot, az alkalmazás elindítja az /auth/signout útvonalat, amely elpusztítja a munkamenetet, és átirányítja a böngészőt Microsoft Identitásplatform bejelentkezési végpontra.

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

Amikor a felhasználó a Kijelentkezés lehetőséget választja, az alkalmazás elindítja az logout útvonalat, amely átirányítja a böngészőt a Microsoft Identitásplatform bejelentkezési végpontra.

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

A végpont felé irányuló `logout` hívás elfogása

A kijelentkezés utáni URI lehetővé teszi az alkalmazások számára, hogy részt vegyenek a globális kijelentkezésben.

A ASP.NET Core OpenID Connect köztes szoftver lehetővé teszi az alkalmazás számára, hogy elfogja a Microsoft Identitásplatform logout végpontra irányuló hívást egy OpenID Connect nevű esemény megadásávalOnRedirectToIdentityProviderForSignOut. Ezt a Microsoft.Identity.Web automatikusan kezeli (amely törli a fiókokat abban az esetben, ha a webalkalmazás webes API-t hív)

A ASP.NET a köztes szoftverbe delegálva végrehajtja a kijelentkezést, és törli a munkamenet-cookie-t:

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

Ha többet szeretne megtudni a kijelentkezésről, olvassa el az OpenID Connectből elérhető protokolldokumentációt.

Következő lépések

További információ egy ASP.NET Core-webalkalmazás létrehozásával, amely bejelentkezik a felhasználókba az alábbi többrészes oktatóanyag-sorozatban
Microsoft Identitásplatform webalkalmazás-minták áttekintése

Megosztás a következőn keresztül:

Kijelentkezés

Alkalmazásregisztráció

Kijelentkezés gomb

`SignOut` a vezérlő művelete

A végpont felé irányuló `logout` hívás elfogása

Protokoll

Következő lépések

Visszajelzés

Visszajelzés

További források

Megosztás a következőn keresztül:

Felhasználókat bejelentkező webalkalmazás: Bejelentkezés és kijelentkezés

Bejelentkezés

Bejelentkezés gomb

SignIn a vezérlő művelete

Kijelentkezés

Alkalmazásregisztráció

Kijelentkezés gomb

SignOut a vezérlő művelete

A végpont felé irányuló logout hívás elfogása

Protokoll

Következő lépések

Visszajelzés

Visszajelzés

További források

`SignIn` a vezérlő művelete

`SignOut` a vezérlő művelete

A végpont felé irányuló `logout` hívás elfogása