Samouczek: obsługa przepływów uwierzytelniania w vanilla JavaScript SPA

Artykuł
09/25/2024

Ten samouczek jest częścią 3 serii, która demonstruje tworzenie aplikacji jednostronicowej (SPA) Vanilla JavaScript (JS) i przygotowanie jej do uwierzytelniania. W części 2 tej serii utworzono Vanilla JS SPA i przygotowano go do uwierzytelniania z dzierżawą zewnętrzną. Z tego samouczka dowiesz się, jak obsługiwać przepływy uwierzytelniania w aplikacji, dodając składniki biblioteki Microsoft Authentication Library (MSAL).

W tym samouczku;

Konfigurowanie ustawień aplikacji
Dodawanie kodu do authRedirect.js w celu obsługi przepływu uwierzytelniania
Dodawanie kodu do authPopup.js w celu obsługi przepływu uwierzytelniania

Wymagania wstępne

Samouczek: przygotowanie dzierżawy zewnętrznej do uwierzytelniania użytkowników w vanilla JavaScript SPA.

Edytowanie pliku konfiguracji uwierzytelniania

Otwórz plik public/authConfig.js i dodaj następujący fragment kodu:

import { LogLevel } from '@azure/msal-browser';

/**
* Configuration object to be passed to MSAL instance on creation. 
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
*/

export const msalConfig = {
    auth: {
        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
        postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
        navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            },
        },
    },
};

/**
* Scopes you add here will be prompted for user consent during sign-in.
* By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
* For more information about OIDC scopes, visit: 
* https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
*/
export const loginRequest = {
    scopes: [],
};

Zastąp następujące wartości wartości wartościami z witryny Azure Portal:
- Enter_the_Application_Id_Here Znajdź wartość i zastąp ją identyfikatorem aplikacji (clientId) aplikacji zarejestrowanej w centrum administracyjnym firmy Microsoft Entra.
  - W obszarze Urząd znajdź Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną dzierżawy. Jeśli na przykład domena podstawowa dzierżawy to contoso.onmicrosoft.com, użyj polecenia contoso. Jeśli nie masz swojej nazwy dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
Zapisz plik.

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Użyj domeny niestandardowej, aby w pełni oznaczyć adres URL uwierzytelniania. Z perspektywy użytkownika użytkownicy pozostają w domenie podczas procesu uwierzytelniania, a nie przekierowywani do ciamlogin.com nazwy domeny.

Aby użyć domeny niestandardowej, wykonaj następujące czynności:

Wykonaj kroki opisane w temacie Włączanie niestandardowych domen url dla aplikacji w dzierżawach zewnętrznych, aby włączyć niestandardową domenę adresu URL dla dzierżawy zewnętrznej.
W pliku authConfig.js znajdź następnie auth obiekt, a następnie:
1. Zaktualizuj wartość authority właściwości na https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Zastąp Enter_the_Custom_Domain_Here ciąg domeną niestandardowego adresu URL i Enter_the_Tenant_ID_Here identyfikatorem dzierżawy. Jeśli nie masz identyfikatora dzierżawy, dowiedz się, jak odczytywać szczegóły dzierżawy.
2. Dodaj knownAuthorities właściwość o wartości [Enter_the_Custom_Domain_Here].

Po wprowadzeniu zmian w pliku authConfig.js , jeśli domena niestandardowego adresu URL jest login.contoso.com, a identyfikator dzierżawy to aaaabbbb-0000-cccc-1111-dddd2222eeeee, plik powinien wyglądać podobnie do następującego fragmentu kodu:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

Dodawanie kodu do pliku przekierowania

Plik przekierowania jest wymagany do obsługi odpowiedzi ze strony logowania. Służy do wyodrębniania tokenu dostępu z fragmentu adresu URL i używania go do wywoływania chronionego interfejsu API. Służy również do obsługi błędów występujących podczas procesu uwierzytelniania.

Otwórz plik public/authRedirect.js i dodaj następujący fragment kodu:

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

let username = "";

/**
* A promise handler needs to be registered for handling the
* response returned from redirect flow. For more information, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/initialization.md#redirect-apis
*/
myMSALObj.handleRedirectPromise()
    .then(handleResponse)
    .catch((error) => {
        console.error(error);
    });

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
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
    * To see the full list of response object properties, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
    */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();

    }
}

function signIn() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {

    /**
    * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
    */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: '/signout', // remove this line if you would like navigate to index page after logout.

    };

    myMSALObj.logoutRedirect(logoutRequest);
}

Zapisz plik.

Dodawanie kodu do pliku authPopup.js

Aplikacja używa authPopup.js do obsługi przepływu uwierzytelniania, gdy użytkownik loguje się przy użyciu okna podręcznego. Okno podręczne jest używane, gdy użytkownik jest już zalogowany, a aplikacja musi uzyskać token dostępu dla innego zasobu.

Otwórz plik public/authPopup.js i dodaj następujący fragment kodu:

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

let username = "";

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  || currentAccounts.length < 1) {
        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
        welcomeUser(currentAccounts[0].username);
        updateTable(currentAccounts[0]);
    }
}

function handleResponse(response) {

    /**
     * To see the full list of response object properties, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
     */

    if (response !== null) {
        username = response.account.username
        welcomeUser(username);
        updateTable(response.account);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    // Choose which account to logout from by passing a username.
    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        mainWindowRedirectUri: '/signout'
    };

    myMSALObj.logoutPopup(logoutRequest);
}

selectAccount();

Zapisz plik.

Następny krok

Część 4: Zaloguj się i wyloguj się z Vanilla JS SPA

Udostępnij za pośrednictwem