Kullanıcıların oturumunu açıp kapatan bir web uygulaması yazma - Microsoft identity platform

Makale
10/24/2023

Kullanıcıların oturum açtığı web uygulamanızın koduna nasıl oturum açacağınızı öğrenin. Ardından, oturumu kapatmalarına nasıl izin vereceğinizi öğrenin.

Oturum açma iki bölümden oluşur:

HTML sayfasındaki oturum açma düğmesi
Denetleyicideki arka planda kodda oturum açma eylemi

ASP.NET Core'da, Microsoft kimlik platformu uygulamalar için Oturum aç düğmesi (Views\Shared\_LoginPartial.cshtmlMVC uygulaması için) veya Pages\Shared\_LoginPartial.cshtm (Razor uygulaması için) kullanıma sunulur. Yalnızca kullanıcının kimliği doğrulanmamışsa görüntülenir. Başka bir ifadeyle, kullanıcı henüz oturum açmadığında veya oturumu kapatmadığında görüntülenir. Tam tersine, kullanıcı zaten oturum açtığında Oturumu kapat düğmesi görüntülenir. Hesap denetleyicisinin Microsoft.Identity.Web.UI NuGet paketinde MicrosoftIdentity adlı Alanda tanımlandığını unutmayın

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

ASP.NET MVC'de Oturum aç düğmesi içinde Views\Shared\_LoginPartial.cshtmlgörünür. Yalnızca kullanıcının kimliği doğrulanmamışsa görüntülenir. Başka bir ifadeyle, kullanıcı henüz oturum açmadığında veya oturumu kapatmadığında görüntülenir.

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

Java hızlı başlangıcında oturum açma düğmesi main/resources/templates/index.html dosyasında bulunur.

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

Node.js hızlı başlangıçta, oturum açma düğmesinin kodu index.hbs şablon dosyasında bulunur.

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

Bu şablon, uygulamanın ana (dizin) yolu üzerinden sunulur:

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

Python hızlı başlangıcında, oturum açma bağlantısının kodu login.html şablon dosyasında bulunur.

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

Kimliği doğrulanmamış bir kullanıcı giriş sayfasını ziyaret ettiğinde, index app.py içindeki yol kullanıcıyı login yola yönlendirir.

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

Yol login uygun auth_uri olanını bulup login.html şablonunu işler.

@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` denetleyicinin eylemi

ASP.NET'da, web uygulamasında Oturum aç düğmesinin seçilmesi denetleyicideki SignInAccountController eylemi tetikler. ASP.NET Core şablonlarının önceki sürümlerinde denetleyici Account web uygulamasıyla eklenmişti. Denetleyici artık Microsoft.Identity.Web.UI NuGet paketinin bir parçası olduğundan bu durum geçerli değildir. Ayrıntılar için bkz . AccountController.cs .

Bu denetleyici, Azure AD B2C uygulamalarını da işler.

ASP.NET'da, bir denetleyicideki SignIn() yöntemden oturum açma tetikleniyor (örneğin, AccountController.cs#L16-L23). Bu yöntem .NET Framework'ün bir parçası değildir (ASP.NET Core'da gerçekleşenlerin aksine). Yeniden yönlendirme URI'sini önerdikten sonra bir OpenID oturum açma sınaması gönderir.

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

Java'da oturum kapatma işlemi, Microsoft kimlik platformu logout uç noktasını doğrudan çağırarak ve değeri sağlayarak post_logout_redirect_uri işlenir. Ayrıntılar için bkz . 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

Kullanıcı, yolu tetikleyen /auth/signin Oturum aç bağlantısını seçtiğinde, oturum açma denetleyicisi kullanıcının kimliğini doğrulamak için Microsoft kimlik platformu devralır.

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

Kullanıcı Oturum aç bağlantısını seçtiğinde Microsoft kimlik platformu yetkilendirme uç noktasına getirilir.

Başarılı bir oturum açma, kullanıcıyı auth_response kullanarak oturum açma işlemini auth.complete_logintamamlayan yola yönlendirir, varsa hataları işler ve kimliği doğrulanmış olan kullanıcıyı giriş sayfasına yönlendirir.

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

Kullanıcı uygulamanızda oturum açtıktan sonra oturumu kapatmasını sağlamak istersiniz.

Oturumu kapatma

Bir web uygulamasında oturumu kapatma işlemi, oturum açmış hesap hakkındaki bilgilerin web uygulamasının durumundan kaldırılmasından daha fazlasını içerir. Web uygulamasının oturumu kapatmak için kullanıcıyı Microsoft kimlik platformu logout uç noktasına da yönlendirmesi gerekir.

Web uygulamanız kullanıcıyı logout uç noktaya yeniden yönlendirdiğinde, bu uç nokta kullanıcının oturumunu tarayıcıdan temizler. Uygulamanız uç noktaya gitmediyse logout , kullanıcı kimlik bilgilerini yeniden girmeden uygulamanıza yeniden kimlik doğrulaması gerçekleştirir. Bunun nedeni, Microsoft kimlik platformu ile geçerli bir çoklu oturum açma oturumuna sahip olmalarıdır.

Daha fazla bilgi edinmek için Microsoft kimlik platformu ve OpenID Connect protokolü belgelerindeki Oturum kapatma isteği gönderme bölümüne bakın.

Uygulama kaydı

Uygulama kaydı sırasında bir ön kanal oturumu kapatma URL'si kaydedersiniz. Öğreticimizde, Kimlik Doğrulaması sayfasındaki Ön kanal oturumu kapatma URL'sialanına kaydolusunuz https://localhost:44321/signout-oidc. Ayrıntılar için bkz . WebApp uygulamasını kaydetme.

Oturumu kapat düğmesi

ASP.NET'de, web uygulamasında Oturumu kapat düğmesinin seçilmesi denetleyicide AccountController eylemi tetikler SignOut (aşağıya bakın)

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

ASP.NET MVC'de oturum kapatma düğmesi içinde Views\Shared\_LoginPartial.cshtmlgörünür. Yalnızca kimliği doğrulanmış bir hesap olduğunda görüntülenir. Başka bir ifadeyle, kullanıcı daha önce oturum açtığında görüntülenir.

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

Java hızlı başlangıcımızda oturum kapatma düğmesi main/resources/templates/auth_page.html dosyasında bulunur.

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

Python hızlı başlangıcında, oturum kapatma düğmesi templates/index.html dosyasında bulunur.

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

`SignOut` denetleyicinin eylemi

ASP.NET Core şablonlarının önceki sürümlerinde denetleyici Account web uygulamasıyla eklenmişti. Denetleyici artık Microsoft.Identity.Web.UI NuGet paketinin bir parçası olduğundan bu durum geçerli değildir. Ayrıntılar için bkz . AccountController.cs .

Microsoft Entra Id oturum kapatma işlemini tamamladığında denetleyicinin geri çağrılması için /Account/SignedOut bir OpenID yeniden yönlendirme URI'si ayarlar.
ÇağrılarıSignout(), OpenID Connect ara yazılımının Microsoft kimlik platformu logout uç noktasıyla iletişim kurmasını sağlar. Ardından uç nokta:
- Oturum tanımlama bilgisini tarayıcıdan temizler.
- Çıkış sonrası yeniden yönlendirme URI'sini geri çağırır. Varsayılan olarak, oturum kapatma sonrası yeniden yönlendirme URI'sinde oturum kapatılan görünüm sayfası SignedOut.cshtml.cs görüntülenir. Bu sayfa, Microsoft.Identity.Web'in bir parçası olarak da sağlanır.

ASP.NET oturumu kapatma işlemi bir denetleyicideki SignOut() yöntemden tetikleniyor (örneğin, AccountController.cs#L25-L31). Bu yöntem, ASP.NET Core'da gerçekleşenlerin aksine .NET Framework'ün bir parçası değildir. O:

OpenID oturumu kapatma sınaması gönderir.
Önbelleği temizler.
İstenildiği sayfaya yönlendirir.

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

Kullanıcı Oturumu kapat düğmesini seçtiğinde, uygulama oturumu yok eden ve tarayıcıyı /auth/signout Microsoft kimlik platformu oturumu kapatma uç noktasına yönlendiren yolu tetikler.

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

Kullanıcı Oturumu Kapat'ı seçtiğinde, uygulama tarayıcıyı logout Microsoft kimlik platformu oturumu kapatma uç noktasına yönlendiren yolu tetikler.

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

Uç noktaya yapılan çağrıya müdahale etme `logout`

Oturum kapatma sonrası URI'sı, uygulamaların genel oturum kapatmaya katılmasını sağlar.

ASP.NET Core OpenID Connect ara yazılımı, uygulamanızın adlı OnRedirectToIdentityProviderForSignOutbir OpenID Connect olayı sağlayarak Microsoft kimlik platformu logout uç noktasına yapılan çağrıyı kesmesini sağlar. Bu, Microsoft.Identity.Web tarafından otomatik olarak işlenir (web uygulamanızın web API'lerini çağırması durumunda hesapları temizler)

ASP.NET oturum kapatma işlemini yürütmek için ara yazılıma temsilci olarak oturum tanımlama bilgisini temizlersiniz:

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

Oturumu kapatma hakkında daha fazla bilgi edinmek istiyorsanız OpenID Connect'ten edinebileceğiniz protokol belgelerini okuyun.

Sonraki adımlar

Aşağıdaki çok bölümlü öğretici serisinde kullanıcıların oturumunu kuran bir ASP.NET Core web uygulaması oluşturarak daha fazla bilgi edinin
Microsoft kimlik platformu web uygulaması örneklerini keşfetme

Aracılığıyla paylaş

Oturumu kapatma

Uygulama kaydı

Oturumu kapat düğmesi

`SignOut` denetleyicinin eylemi

Uç noktaya yapılan çağrıya müdahale etme `logout`

Protokol

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Kullanıcılarda oturum açma web uygulaması: Oturum açma ve oturumu kapatma

Oturum açma

Oturum açma düğmesi

SignIn denetleyicinin eylemi

Oturumu kapatma

Uygulama kaydı

Oturumu kapat düğmesi

SignOut denetleyicinin eylemi

Uç noktaya yapılan çağrıya müdahale etme logout

Protokol

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar

`SignIn` denetleyicinin eylemi

`SignOut` denetleyicinin eylemi

Uç noktaya yapılan çağrıya müdahale etme `logout`