Menulis aplikasi web yang memasukkan/mengeluarkan pengguna - Microsoft identity platform

Artikel
06/14/2024

Pelajari cara menambahkan rincian masuk ke kode untuk aplikasi web Anda yang memasukkan pengguna. Lalu, pelajari cara membuat pengguna keluar.

Rincian masuk terdiri dari dua bagian:

Tombol masuk di halaman HTML
Tindakan masuk dalam kode di belakang di pengontrol

Di Inti ASP.NET, untuk aplikasi platform identitas Microsoft, tombol Masuk diekspos di Views\Shared\_LoginPartial.cshtml (untuk aplikasi MVC) atau Pages\Shared\_LoginPartial.cshtm (untuk aplikasi Razor). Ini hanya ditampilkan ketika pengguna tidak diautentikasi. Artinya, itu ditampilkan ketika pengguna belum masuk atau sudah keluar. Sebaliknya, tombolKeluar ditampilkan saat pengguna sudah masuk. Perhatikan bahwa pengontrol Akun didefinisikan dalam paket NuGet Microsoft.Identity.Web.UI, di Area bernama 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>

Di ASP.NET MVC, tombol Masuk diekspos di Views\Shared\_LoginPartial.cshtml. Ini hanya ditampilkan ketika pengguna tidak diautentikasi. Artinya, itu ditampilkan ketika pengguna belum masuk atau telah keluar.

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

Dalam mulai cepat Java, tombol masuk terletak di file 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>

Dalam mulai cepat Node.js, kode untuk tombol masuk terletak di file templat index.hbs.

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

Templat ini disajikan melalui rute utama (indeks) aplikasi:

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

Dalam mulai cepat Python, kode untuk tautan masuk terletak di file templat login.html .

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

Saat pengguna yang tidak diautentikasi mengunjungi halaman beranda, index rute di app.py mengalihkan pengguna ke login rute.

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

Rute login mencari tahu yang sesuai auth_uri dan merender templat 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` aksi pengontrol

Di ASP.NET, memilih tombol Masuk di aplikasi web memicu tindakan SignIn pada pengontrol AccountController. Dalam versi templat ASP.NET Core sebelumnya, Account pengontrol disematkan dengan aplikasi web. Itu sudah berubah, karena pengontrol sekarang menjadi bagian dari paket NuGet Microsoft.Identity.Web.UI. Lihat AccountController.cs untuk detail.

Pengontrol ini juga menangani aplikasi Microsoft Azure AD B2C.

Dalam ASP.NET, masuk dipicu dari SignIn() metode pada pengontrol (misalnya, AccountController.cs#L16-L23). Metode ini bukan bagian dari .NET Framework (bertentangan dengan apa yang terjadi di ASP.NET Core). Ini mengirimkan tantangan masuk OpenID setelah mengusulkan URI pengalihan.

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

Dalam Java, rincian keluar ditangani dengan memanggil titik akhir logout platform identitas Microsoft secara langsung dan memberikan nilai post_logout_redirect_uri. Untuk detailnya, lihat 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

Saat pengguna memilih tautan Masuk, yang memicu rute /auth/signin, pengontrol masuk mengambil alih untuk mengautentikasi pengguna dengan platform identitas Microsoft.

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

Saat pengguna memilih tautan Masuk, mereka dibawa ke titik akhir otorisasi platform identitas Microsoft.

Rincian masuk yang berhasil mengalihkan pengguna ke auth_response rute, yang menyelesaikan proses masuk menggunakan auth.complete_login, merender kesalahan jika ada, dan mengalihkan pengguna yang sekarang diautentikasi ke halaman beranda.

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

Setelah pengguna masuk ke aplikasi, Anda harus mengaktifkannya untuk keluar.

Keluar

Keluar dari aplikasi web membutuhkan lebih dari menghapus informasi tentang akun yang masuk dari status aplikasi web. Aplikasi web juga harus mengalihkan pengguna ke titik akhir logout platform identitas Microsoft untuk keluar.

Saat aplikasi web Anda mengalihkan pengguna ke titik akhir logout, titik akhir ini akan menghapus sesi pengguna dari browser. Jika aplikasi Anda tidak masuk ke titik akhir logout, pengguna akan mengautentikasi ulang aplikasi Anda tanpa memasukkan kredensial mereka lagi. Alasannya adalah bahwa mereka akan memiliki sesi masuk tunggal yang valid dengan platform identitas Microsoft.

Untuk mempelajari selengkapnya, lihat bagian Kirim permintaan keluar di platform identitas Microsoft dan dokumentasi protokol OpenID Connect.

Pendaftaran aplikasi

Selama pendaftaran aplikasi, Anda mendaftarkan URL keluar saluran depan. Dalam tutorial kami, Anda mendaftarkan https://localhost:44321/signout-oidc di bidang URL keluar saluran depan pada halaman Autentikasi. Untuk detailnya, lihat Mendaftarkan aplikasi webApp.

Tombol keluar

Dalam ASP.NET, memilih tombol Masuk di aplikasi web memicu tindakan SignOut pada pengontrol AccountController (lihat di bawah ini)

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

Dalam MVC ASP.NET, tombol keluar diekspos di Views\Shared\_LoginPartial.cshtml. Ini hanya ditampilkan ketika ada akun yang diautentikasi. Artinya, itu ditampilkan ketika pengguna telah masuk sebelumnya.

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

Dalam mulai cepat Java kami, tombol keluar terletak di file main/resources/templates/index.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>

Di mulai cepat Python, tombol keluar terletak di file templates/index.html .

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

`SignOut` aksi pengontrol

Dalam versi templat ASP.NET Core sebelumnya, Account pengontrol disematkan dengan aplikasi web. Itu sudah berubah, karena pengontrol sekarang menjadi bagian dari paket NuGet Microsoft.Identity.Web.UI. Lihat AccountController.cs untuk detail.

Mengatur URI pengalihan OpenID ke /Account/SignedOut sehingga pengontrol dipanggil kembali ketika MICROSOFT Entra ID telah menyelesaikan keluar.
Memanggil Signout(), yang memungkinkan middleware OpenID Connect memanggil titik akhir logout platform identitas Microsoft. Titik akhir kemudian:
- Menghapus cookie sesi dari browser.
- Memanggil kembali URI pengalihan setelah keluar. Secara default, URI pengalihan setelah keluar menampilkan halaman tampilan sudah keluar SignedOut.cshtml.cs. Halaman ini juga disediakan sebagai bagian dari Microsoft.Identity.Web.

Dalam ASP.NET, rincian keluar dipicu dari metode SignOut() pada pengontrol (contohnya, AccountController.cs#L25-L31). Metode ini bukan bagian dari .NET Framework, bertentangan dengan apa yang terjadi di ASP.NET Core. Hal itu:

Mengirim tantangan keluar OpenID.
Menghapus cache.
Mengalihkan ke halaman yang diinginkan.

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

Saat pengguna memilih tombol Keluar, aplikasi memicu rute /auth/signout, yang merusak sesi dan mengalihkan browser ke titik akhir keluar dari platform identitas Microsoft.

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

Saat pengguna memilih Keluar, aplikasi memicu logout rute, yang mengalihkan browser ke titik akhir keluar platform identitas Microsoft.

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

Mencegat panggilan ke titik akhir `logout`

URI setelah keluar memungkinkan aplikasi untuk berpartisipasi dalam sign-out global.

Middleware OpenID Connect ASP.NET Core memungkinkan aplikasi Anda untuk mencegat panggilan ke titik akhir logout platform identitas Microsoft dengan memberikan peristiwa OpenID Connect bernama OnRedirectToIdentityProviderForSignOut. Ini ditangani secara otomatis oleh Microsoft.Identity.Web (yang menghapus akun dalam kasus saat aplikasi web Anda memanggil api web)

Di ASP.NET, Anda mendelegasikan ke middleware untuk menjalankan rincian keluar, menghapus cookie sesi:

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

Jika Anda ingin mempelajari selengkapnya tentang keluar, baca dokumentasi protokol yang tersedia dari OpenID Connect.

Langkah berikutnya

Pelajari selengkapnya dengan membangun aplikasi web ASP.NET Core yang memasukkan pengguna dalam seri tutorial multi-bagian berikut
Menjelajahi sampel aplikasi web platform identitas Microsoft

Bagikan melalui

Keluar

Pendaftaran aplikasi

Tombol keluar

`SignOut` aksi pengontrol

Mencegat panggilan ke titik akhir `logout`

Protokol

Langkah berikutnya

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Aplikasi web yang memasukkan pengguna: Masuk dan keluar

Masuk

Tombol Masuk

SignIn aksi pengontrol

Keluar

Pendaftaran aplikasi

Tombol keluar

SignOut aksi pengontrol

Mencegat panggilan ke titik akhir logout

Protokol

Langkah berikutnya

Saran dan Komentar

Sumber Daya Tambahan:

`SignIn` aksi pengontrol

`SignOut` aksi pengontrol

Mencegat panggilan ke titik akhir `logout`