Menulis aplikasi web yang memasukkan/mengeluarkan pengguna - Microsoft Entra

Artikel
07/22/2022
9 menit untuk membaca

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>

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)
{
 // 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, tidak ada tombol masuk. Kode di belakang meminta pengguna untuk masuk secara otomatis saat mencapai akar aplikasi web. Lihat app.py#L14-L18.

@app.route("/")
def index():
    if not session.get("user"):
        return redirect(url_for("login"))
    return render_template('index.html', user=session["user"])

`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, pengontrol Account 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, rincian keluar dipicu dari metode SignOut() pada pengontrol (contohnya, AccountController.cs#L16-L23). Metode ini bukan bagian dari kerangka kerja ASP.NET (bertentangan dengan apa yang terjadi dalam 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.

async function redirectToAuthCodeUrl(req, res, next, authCodeUrlRequestParams, authCodeRequestParams) {

    // Generate PKCE Codes before starting the authorization flow
    const { verifier, challenge } = await 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 = {
        redirectUri: REDIRECT_URI,
        responseMode: 'form_post', // recommended for confidential clients
        codeChallenge: req.session.pkceCodes.challenge,
        codeChallengeMethod: req.session.pkceCodes.challengeMethod,
        ...authCodeUrlRequestParams,
    };

    req.session.authCodeRequest = {
        redirectUri: REDIRECT_URI,
        code: "",
        ...authCodeRequestParams,
    };

    // Get url to sign user in and consent to scopes needed for application
    try {
        const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
        res.redirect(authCodeUrlResponse);
    } catch (error) {
        next(error);
    }
};

router.get('/signin', async function (req, res, next) {

    // create a GUID for crsf
    req.session.csrfToken = cryptoProvider.createNewGuid();

    /**
     * The 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 = cryptoProvider.base64Encode(
        JSON.stringify({
            csrfToken: req.session.csrfToken,
            redirectTo: '/'
        })
    );

    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: [],
    };

    const authCodeRequestParams = {

        /**
         * 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: [],
    };

    // trigger the first leg of auth code flow
    return redirectToAuthCodeUrl(req, res, next, authCodeUrlRequestParams, authCodeRequestParams)
});
router.post('/redirect', async function (req, res, next) {
    if (req.body.state) {
        const state = JSON.parse(cryptoProvider.base64Decode(req.body.state));

        // check if csrfToken matches
        if (state.csrfToken === req.session.csrfToken) {
            req.session.authCodeRequest.code = req.body.code; // authZ code
            req.session.authCodeRequest.codeVerifier = req.session.pkceCodes.verifier // PKCE Code Verifier

            try {
                const tokenResponse = await msalInstance.acquireTokenByCode(req.session.authCodeRequest);
                req.session.accessToken = tokenResponse.accessToken;
                req.session.idToken = tokenResponse.idToken;
                req.session.account = tokenResponse.account;
                req.session.isAuthenticated = true;

                res.redirect(state.redirectTo);
            } catch (error) {
                next(error);
            }
        } else {
            next(new Error('csrf token does not match'));
        }
    } else {
        next(new Error('state is missing'));
    }
});

Tidak seperti platform lain, Python MSAL mengurus akses masuk pengguna dari halaman masuk. Lihat app.py#L20-L28.

@app.route("/login")
def login():
    session["state"] = str(uuid.uuid4())
    auth_url = _build_msal_app().get_authorization_request_url(
        app_config.SCOPE,  # Technically we can use an empty list [] to just sign in
                           # Here we choose to also collect user consent up front
        state=session["state"],
        redirect_uri=url_for("authorized", _external=True))
    return "<a href='%s'>Login with Microsoft Identity</a>" % auth_url

Metode _build_msal_app() didefinisikan dalam app.py#L81-L88 sebagai berikut:

def _load_cache():
    cache = msal.SerializableTokenCache()
    if session.get("token_cache"):
        cache.deserialize(session["token_cache"])
    return cache

def _save_cache(cache):
    if cache.has_state_changed:
        session["token_cache"] = cache.serialize()

def _build_msal_app(cache=None):
    return msal.ConfidentialClientApplication(
        app_config.CLIENT_ID, authority=app_config.AUTHORITY,
        client_credential=app_config.CLIENT_SECRET, token_cache=cache)

def _get_token_from_cache(scope=None):
    cache = _load_cache()  # This web app maintains one cache per session
    cca = _build_msal_app(cache)
    accounts = cca.get_accounts()
    if accounts:  # So all accounts belong to the current signed-in user
        result = cca.acquire_token_silent(scope, account=accounts[0])
        _save_cache(cache)
        return result

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>

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

Dalam mulai cepat Python, tombol keluar terletak di template/index.html #L10.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Microsoft Identity Python web app</h1>
    Welcome {{ user.get("name") }}!
    <li><a href='/graphcall'>Call Microsoft Graph API</a></li>
    <li><a href="/logout">Logout</a></li>
</body>
</html>

`SignOut` aksi pengontrol

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

Menentukan URI pengalihan OpenID ke /Account/SignedOut agar pengontrol dipanggil kembali ketika Microsoft Azure AD telah menyelesaikan proses 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 kerangka kerja ASP.NET, bertentangan dengan apa yang terjadi dalam ASP.NET Core. 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 /signout, yang merusak sesi dan mengalihkan browser ke titik akhir keluar dari platform identitas Microsoft.

router.get('/signout', function (req, res) {
    /**
     * 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
     */
    const logoutUri = `${msalConfig.auth.authority}/oauth2/v2.0/logout?post_logout_redirect_uri=${POST_LOGOUT_REDIRECT_URI}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
});

Kode yang mengeluarkan pengguna berada di aplikasi.py #L46-L52.

@app.route("/logout")
def logout():
    session.clear()  # Wipe out the user and the token cache from the session
    return redirect(  # Also need to log out from the Microsoft Identity platform
        "https://login.microsoftonline.com/common/oauth2/v2.0/logout"
        "?post_logout_redirect_uri=" + 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 sign-out, baca dokumentasi protokol yang tersedia dari Open ID Connect.

Langkah berikutnya

Beralih ke artikel berikutnya dalam skenario ini, Beralih ke produksi.

Aplikasi web yang memasukkan pengguna: Masuk dan keluar

Masuk

Tombol Masuk

SignIn aksi pengontrol