Tutorial: Menambahkan alur masuk dan keluar ke aplikasi satu halaman JavaScript (SPA) - Microsoft identity platform

2025-03-14

Berlaku untuk: Lingkaran hijau dengan simbol tanda centang putih. Penyewa tenaga kerja Penyewa eksternal (pelajari selengkapnya)

Dalam tutorial ini Anda akan mengonfigurasi aplikasi halaman tunggal (SPA) JavaScript untuk autentikasi. Di bagian 1 dari seri ini, Anda membuat JavaScript SPA dan menyiapkannya untuk autentikasi. Dalam tutorial ini, Anda akan mempelajari cara menambahkan alur autentikasi dengan menambahkan komponen Microsoft Authentication Library (MSAL) ke aplikasi Anda dan membangun antarmuka pengguna (UI) responsif untuk aplikasi Anda.

Dalam tutorial ini;

Menambahkan kode ke auth.js untuk menangani alur autentikasi
Membangun antarmuka pengguna untuk aplikasi

Prasyarat

Tutorial: Siapkan aplikasi satu halaman JavaScript untuk autentikasi.

Menambahkan kode ke file pengalihan

Alur autentikasi adalah serangkaian langkah yang dilakukan aplikasi untuk mengautentikasi pengguna. Auth.js berisi fungsi yang digunakan untuk menangani alur autentikasi, termasuk masuk dan keluar menggunakan metode pengalihan atau popup.

Buka publik/auth.js dan tambahkan kode berikut:

// Browser check variables: If you support IE, our recommendation is to sign-in using Redirect APIs. If you are testing using Edge InPrivate mode, please add "isEdge" to the if check.
const ua = window.navigator.userAgent;
const msie = ua.indexOf("MSIE ");
const msie11 = ua.indexOf("Trident/");
const msedge = ua.indexOf("Edge/");
const isIE = msie > 0 || msie11 > 0;
const isEdge = msedge > 0;

let signInType;
let accountId = "";

// myMSALObj instance - configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

myMSALObj.initialize().then(() => {
    // Redirect: once login is successful and redirects with tokens, call Graph API
    myMSALObj.handleRedirectPromise().then(handleResponse).catch(err => {
        console.error(err);
    });
})

function selectAccount() {

    /**
    * See here for more info on account retrieval: 
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
    */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (!currentAccounts) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username
        showWelcomeMessage(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(resp) {
    if (resp !== null) {
        accountId = resp.account.homeAccountId;
        myMSALObj.setActiveAccount(resp.account);
        showWelcomeMessage(resp.account);
    } else {
            selectAccount();
        } 
    }

async function signIn(method) {
    signInType = isIE ? "redirect" : method;
    if (signInType === "popup") {
        return myMSALObj.loginPopup({
            ...loginRequest,
            redirectUri: "/redirect"
        }).then(handleResponse).catch(function (error) {
            console.log(error);
        });
    } else if (signInType === "redirect") {
        return myMSALObj.loginRedirect(loginRequest)
    }
}

function signOut(interactionType) {
    const logoutRequest = {
        account: myMSALObj.getAccountByHomeId(accountId)
    };

    if (interactionType === "popup") {
        myMSALObj.logoutPopup(logoutRequest).then(() => {
            window.location.reload();
        });
    } else {
        myMSALObj.logoutRedirect(logoutRequest);
    }
}

// This function can be removed if you do not need to support IE
async function getTokenRedirect(request, account) {
    return await myMSALObj.acquireTokenSilent(request).catch(async (error) => {
        console.log("silent token acquisition fails.");
        if (error instanceof msal.InteractionRequiredAuthError) {
            // fallback to interaction when silent call fails
            console.log("acquiring token using redirect");
            myMSALObj.acquireTokenRedirect(request);
        } else {
            console.error(error);
        }
    });
}

Simpan berkasnya.

Membangun antarmuka pengguna untuk aplikasi

Ketika otorisasi telah dikonfigurasi, UI dapat dibuat untuk berinteraksi dengan aplikasi saat proyek dijalankan. Bootstrap digunakan untuk membuat UI responsif yang berisi tombol Masuk dan tombol Keluar. UI juga berisi tabel yang menampilkan klaim dari token, yang akan ditambahkan nanti dalam tutorial.

Menambahkan kode ke file index.html

Halaman utama SPA, index.html, adalah halaman pertama yang dimuat saat aplikasi dimulai. Ini juga merupakan halaman yang dimuat saat pengguna memilih tombol Keluar. Halaman berisi bilah navigasi, pesan selamat datang dengan email pengguna dan tabel yang menampilkan klaim dari token.

Buka publik/index.html dan tambahkan cuplikan kode berikut:

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>Microsoft identity platform</title>
     <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
     <link rel="stylesheet" href="./styles.css">

     <!-- adding Bootstrap 5 for UI components  -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <!-- msal.min.js can be used in the place of msal-browser.js -->
     <script src="/msal-browser.min.js"></script>
 </head>

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap 5 Navbar</title>
 <!-- Bootstrap 5 CSS -->
 <link 
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
     rel="stylesheet" 
     integrity="sha384-Zenh87qX5JnK2Rl3l94faQlfdS3b8SpxyDkgOn+Y5Qu3og6JpNZnN9LfX9k8wAI5" 
     crossorigin="anonymous">
 </head>

 <body>
 <!-- Navbar -->
 <nav class="navbar navbar-expand-sm navbar-dark bg-primary navbarStyle">
     <a class="navbar-brand" href="/">Microsoft identity platform</a>

     <div class="ms-auto d-flex align-items-center">
     <!-- Dropdown group (Bootstrap 5 uses dropstart instead of dropleft) -->
     <div class="btn-group dropstart">
         <!-- Toggle button for dropdown -->
         <button
         id="signIn"
         type="button"
         class="btn btn-primary dropdown-toggle"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         >
         Sign In
         </button>

         <!-- Dropdown menu -->
         <div class="dropdown-menu">
         <button class="dropdown-item" id="popup" onclick="signIn(this.id)">
             Sign in using Popup
         </button>
         <button class="dropdown-item" id="redirect" onclick="signIn(this.id)">
             Sign in using Redirect
         </button>
         </div>
     </div>

     <!-- Sign Out button -->
     <button class="btn btn-secondary ms-2" id="signOut" onclick="signOut()">
         Sign Out
     </button>
     </div>
 </nav>


 <br />
 <div class="container">
     <div class="row">
     <h5 id="title-div" class="card-header text-center">
         JavaScript single-page application secured with MSAL.js
     </h5>
     <br />
     <h5 id="welcome-div" class="card-header text-center d-none"></h5>

     <table class="table table-striped table-bordered d-none" id="table-div">
         <thead>
         <tr>
             <th>Claim Type</th>
             <th>Value</th>
             <th>Description</th>
         </tr>
         </thead>
         <tbody id="table-body-div"></tbody>
     </table>
     </div>
 </div>

 <script 
     src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
     integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
     crossorigin="anonymous">
 </script>

 <!-- Bootstrap 5 JS bundle (includes Popper) -->
 <script 
     src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" 
     integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" 
     crossorigin="anonymous">
 </script>

 <!-- Your custom scripts -->
 <script type="text/javascript" src="./authConfig.js"></script>
 <script type="text/javascript" src="./ui.js"></script>
 <script type="text/javascript" src="./claimUtils.js"></script>
 <script type="text/javascript" src="./auth.js"></script>
 </body>
 </html>

Simpan berkasnya.

Menambahkan kode ke file ui.js

Untuk membuat aplikasi Anda interaktif, file ui.js digunakan untuk menangani elemen UI aplikasi. File berisi fungsi yang digunakan untuk memperbarui nama pengguna saat mereka masuk dan memperbarui tabel dengan klaim dari token.

Buka publik/ui.js dan tambahkan cuplikan kode berikut:

// Select DOM elements to work with
const signInButton = document.getElementById('signIn');
const signOutButton = document.getElementById('signOut');
const titleDiv = document.getElementById('title-div');
const welcomeDiv = document.getElementById('welcome-div');
const tableDiv = document.getElementById('table-div');
const tableBody = document.getElementById('table-body-div');

function showWelcomeMessage(account) {
    signInButton.classList.add('d-none');
    signOutButton.classList.remove('d-none');
    titleDiv.classList.add('d-none');
    welcomeDiv.classList.remove('d-none');
    welcomeDiv.innerHTML = `Welcome ${account.username}!`;
    updateTable(account);
};

function updateTable(account) {
    tableDiv.classList.remove('d-none');

    const tokenClaims = createClaimsTable(account.idTokenClaims);

    Object.keys(tokenClaims).forEach((key) => {
        let row = tableBody.insertRow(0);
        let cell1 = row.insertCell(0);
        let cell2 = row.insertCell(1);
        let cell3 = row.insertCell(2);
        cell1.innerHTML = tokenClaims[key][0];
        cell2.innerHTML = tokenClaims[key][1];
        cell3.innerHTML = tokenClaims[key][2];
    });
};

Simpan berkasnya.

Menambahkan kode ke file signout.html

File signout.html digunakan untuk menampilkan pesan kepada pengguna saat mereka keluar dari aplikasi.

Buka publik/signout.html dan tambahkan cuplikan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Entra ID | JavaScript SPA</title>
    <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">

    <!-- adding Bootstrap 4 for UI components  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div class="jumbotron" style="margin: 10%">
        <h1>Goodbye!</h1>
        <p>You have signed out and your cache has been cleared.</p>
        <a class="btn btn-primary" href="/" role="button">Take me back</a>
    </div>
</body>
</html>

Simpan berkasnya.

Menambahkan gaya ke aplikasi

Terakhir, tambahkan beberapa gaya ke aplikasi untuk membuatnya terlihat lebih menarik. Gaya ditambahkan ke file styles.css dan dapat disesuaikan sesuai dengan kebutuhan Anda.

Buka publik/styles.css dan tambahkan cuplikan kode berikut:

.navbarStyle {
    padding: .5rem 1rem !important;
}

.table-responsive-ms {
    max-height: 39rem !important;
    padding-left: 10%;
    padding-right: 10%;
}

Simpan berkasnya.

Langkah berikutnya

Log masuk dan log keluar dari SPA JS Anda

Bagikan melalui

Tutorial: Menambahkan alur masuk dan keluar ke aplikasi satu halaman JavaScript