Udostępnij przez

Samouczek: przygotowywanie jednostronicowej aplikacji JavaScript do uwierzytelniania

Dotyczy: Zielony okrąg z białym symbolem znacznika wyboru, który wskazuje następującą zawartość dotyczy dzierżawców pracowników. Dzierżawcy pracowników Zielony okrąg z białym znacznikiem wyboru, który wskazuje następującą zawartość ma zastosowanie do dzierżaw zewnętrznych. Dzierżawy zewnętrzne (dowiedz się więcej)

W tym samouczku utworzysz jednostronicową aplikację JavaScript (SPA) i przygotujesz ją do uwierzytelniania przy użyciu platformy tożsamości firmy Microsoft. W tym samouczku pokazano, jak utworzyć SPA w języku JavaScript przy użyciu npm, utworzyć pliki potrzebne do uwierzytelniania i autoryzacji oraz dodać szczegóły dzierżawcy do kodu źródłowego. Aplikacja może być używana dla pracowników w dzierżawie dla pracowników lub dla klientów korzystających z najemcy zewnętrznego.

W tym samouczku nauczysz się

  • Tworzenie nowego projektu JavaScript
  • Instalowanie pakietów wymaganych do uwierzytelniania
  • Tworzenie struktury plików i dodawanie kodu do pliku serwera
  • Dodaj szczegóły dzierżawy do pliku konfiguracji uwierzytelniania

Warunki wstępne

  • Najemca mieszkań dla pracowników. Możesz użyć katalogu domyślnego lub skonfigurować nowego najemcę.
  • Zarejestruj nową aplikację w centrum administracyjnym usługi Microsoft Entra, skonfigurowaną tylko dla kont w tym katalogu organizacyjnym. Aby uzyskać więcej informacji, zobacz Rejestrowanie aplikacji . Zapisz następujące wartości na stronie Przegląd aplikacji do późniejszego użycia:
    • Identyfikator aplikacji (klienta)
    • Identyfikator katalogu (klienta)
  • Dodaj następujące identyfikatory URI przekierowania, używając konfiguracji platformy aplikacji jednostronicowej. Więcej informacji znajdziesz w Jak dodać adres URI przekierowania w aplikacji.
    • adres przekierowania URI: http://localhost:3000/.

Tworzenie projektu JavaScript i instalowanie zależności

  1. Zaloguj się do centrum administracyjnego firmy Microsoft Entra jako administrator globalny.

  2. Otwórz program Visual Studio Code, wybierz pozycję Plik>Otwórz folder.... Przejdź do i wybierz lokalizację, w której chcesz utworzyć projekt.

  3. Otwórz nowy terminal, wybierając pozycję Terminal>New Terminal.

  4. Uruchom następujące polecenie, aby utworzyć nowy projekt JavaScript:

    npm init -y

  5. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę projektu:

    └── public
    └── authConfig.js
    └── auth.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  6. W terminaluuruchom następujące polecenie, aby zainstalować wymagane zależności dla projektu:

    npm install express morgan @azure/msal-browser

Dodawanie kodu do pliku serwera

Express to struktura aplikacji internetowej Node.js. Służy do tworzenia serwera, który hostuje aplikację. Morgan to oprogramowanie pośredniczące, które rejestruje żądania HTTP do konsoli. Plik serwera jest używany do hostowania tych zależności i zawiera trasy dla aplikacji. Uwierzytelnianie i autoryzacja są obsługiwane przez bibliotekę Microsoft Authentication Library for JavaScript (MSAL.js).

  1. Dodaj następujący kod do pliku server.js:

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

module.exports = app;

W tym kodzie zmienna aplikacji jest inicjowana przy użyciu modułu express, który służy do obsługi zasobów publicznych. MSAL-browser jest używany jako element zawartości statycznej i służy do inicjowania przepływu uwierzytelniania.

Dodawanie danych dzierżawy do konfiguracji MSAL

Plik authConfig.js zawiera ustawienia konfiguracji przepływu uwierzytelniania i służy do konfigurowania MSAL.js przy użyciu wymaganych ustawień uwierzytelniania.

  1. Otwórz publiczny/authConfig.js i dodaj następujący kod:

    /**
* 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 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // 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.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: ["User.Read"],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Zastąp następujące wartości wartościami z centrum administracyjnego firmy Microsoft Entra:

    • Znajdź wartość Enter_the_Application_Id_Here i zastąp ją identyfikatorem aplikacji (clientId) aplikacji zarejestrowanej w centrum administracyjnym firmy Microsoft Entra.
    • Znajdź wartość Enter_the_Tenant_Info_Here i zastąp ją identyfikatorem najemcy dla dzierżawy pracowników, którą utworzyłeś w centrum administracyjnym Microsoft Entra.

  3. Zapisz plik.

Następny krok

Obsługa przepływów uwierzytelniania w aplikacji SPA w języku JavaScript

  • Last updated on