Samouczek: dodawanie logowania i wylogowywanie się w aplikacji internetowej Node.js

Artykuł
08/27/2024

Ten samouczek jest ostatnią częścią serii, która demonstruje tworzenie Node.js aplikacji internetowej i przygotowywanie jej do uwierzytelniania przy użyciu centrum administracyjnego firmy Microsoft Entra. W części 2 tej serii utworzono aplikację internetową Node.js i zorganizowano wszystkie wymagane pliki. W tym samouczku dodasz logowanie, rejestrację i wylogowywanie się do aplikacji internetowej Node.js. Aby uprościć dodawanie uwierzytelniania do aplikacji internetowej Node.js, należy użyć biblioteki Microsoft Authentication Library (MSAL) dla środowiska Node. Przepływ logowania używa protokołu uwierzytelniania OpenID Connect (OIDC), który bezpiecznie loguje użytkowników.

W tym samouczku wykonasz następujące elementy:

Dodawanie logiki logowania i wylogowywanie
Wyświetlanie oświadczeń tokenu identyfikatora
Uruchom aplikację i przetestuj środowisko logowania i wylogowania.

Wymagania wstępne

Kroki opisane w artykule Samouczek: przygotowywanie aplikacji internetowej Node.js do uwierzytelniania.

Tworzenie obiektu konfiguracji biblioteki MSAL

W edytorze kodu otwórz plik authConfig.js , a następnie dodaj następujący kod:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

Obiekt msalConfig zawiera zestaw opcji konfiguracji używanych do dostosowywania zachowania przepływów uwierzytelniania.

W pliku authConfig.js zastąp:

Enter_the_Application_Id_Here za pomocą identyfikatora aplikacji (klienta) zarejestrowanej wcześniej aplikacji.
Enter_the_Tenant_Subdomain_Here i zastąp ją poddomeną Katalog (dzierżawa). 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.
Enter_the_Client_Secret_Here z skopiowaną wcześniej wartością wpisu tajnego aplikacji.

Jeśli używasz pliku env do przechowywania informacji o konfiguracji:

W edytorze kodu otwórz plik env , a następnie dodaj następujący kod.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Zastąp Enter_the_Application_Id_Heresymbole zastępcze i Enter_the_Tenant_Subdomain_Here Enter_the_Client_Secret_Here , jak wyjaśniono wcześniej.

Można wyeksportować msalConfigzmienne , REDIRECT_URITENANT_SUBDOMAIN i POST_LOGOUT_REDIRECT_URI w pliku authConfig.js, co sprawia, że są one dostępne wszędzie tam, gdzie jest wymagany 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 tras ekspresowych

Trasy express udostępniają punkty końcowe, które umożliwiają wykonywanie operacji, takich jak logowanie, wylogowywanie i wyświetlanie oświadczeń tokenu identyfikatora.

Punkt wejścia aplikacji

W edytorze kodu otwórz plik routes/index.js , a następnie dodaj następujący kod:

const express = require('express');
const 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 !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

Trasa / jest punktem wejścia do aplikacji. Renderuje widok views/index.hbs utworzony wcześniej w sekcji Kompilowanie składników interfejsu użytkownika aplikacji. isAuthenticated jest zmienną logiczną, która określa, co widzisz w widoku.

W edytorze kodu otwórz plik routes/auth.js , a następnie dodaj kod z auth.js do niego.
W edytorze kodu otwórz plik controller/authController.js , a następnie dodaj kod z authController.js do niego.
W edytorze kodu otwórz plik auth/AuthProvider.js , a następnie dodaj kod z AuthProvider.js do niego.

Trasy /signini /redirect są zdefiniowane w pliku routes/auth.js, ale implementujesz ich logikę w auth/AuthProvider.js klasy. /signout

Metoda login obsługuje /signin trasę:
- Inicjuje przepływ logowania, wyzwalając pierwszy etap przepływu kodu uwierzytelniania.
- Inicjuje ona poufne wystąpienie aplikacji klienckiej przy użyciu obiektu konfiguracji BIBLIOTEKi MSAL utworzonego msalConfigwcześniej.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  Metoda jest zdefiniowana getMsalInstance jako:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- Pierwszy etap przepływu kodu uwierzytelniania generuje adres URL żądania kodu autoryzacji, a następnie przekierowuje do tego adresu URL, aby uzyskać kod autoryzacji. Ta pierwsza noga jest implementowana w metodzie redirectToAuthCodeUrl . Zwróć uwagę, że do generowania adresu URL kodu autoryzacji używamy metody getAuthCodeUrl biblioteki MSALs:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Następnie przekierowujemy do samego adresu URL kodu autoryzacji.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
Metoda handleRedirect obsługuje /redirect trasę:
- Ten adres URL należy ustawić jako identyfikator URI przekierowania dla aplikacji internetowej w centrum administracyjnym firmy Microsoft we wcześniejszej sekcji Rejestrowanie aplikacji internetowej.
- Ten punkt końcowy implementuje drugi etap użycia przepływu kodu uwierzytelniania. Używa kodu autoryzacji do żądania tokenu identyfikatora przy użyciu metody acquireTokenByCode biblioteki MSAL.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Po otrzymaniu odpowiedzi możesz utworzyć sesję express i zapisać w niej dowolne informacje. Musisz uwzględnić isAuthenticated i ustawić go na :true
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```
Metoda logout obsługuje /signout trasę:
```
async logout(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
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}
```
- Inicjuje żądanie wylogowania.
- Jeśli chcesz wylogować użytkownika z aplikacji, nie wystarczy, aby zakończyć sesję użytkownika. Musisz przekierować użytkownika do identyfikatora logoutUri. W przeciwnym razie użytkownik może mieć możliwość ponownego uwierzytelnienia aplikacji bez konieczności ponownego wprowadzania poświadczeń. Jeśli nazwa dzierżawy to contoso, identyfikator logoutUri wygląda podobnie do https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Wyświetlanie oświadczeń tokenu identyfikatora

W edytorze kodu otwórz plik routes/users.js , a następnie dodaj następujący kod:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Jeśli użytkownik jest uwierzytelniony, /id trasa wyświetla oświadczenia tokenu identyfikatora przy użyciu widoku views/id.hbs . Ten widok został dodany wcześniej w sekcji Kompilowanie składników interfejsu użytkownika aplikacji.

Aby wyodrębnić określone oświadczenie tokenu identyfikatora, takie jak podana nazwa:

const givenName = req.session.account.idTokenClaims.given_name

Finalizowanie aplikacji internetowej

W edytorze kodu otwórz plik app.js , a następnie dodaj do niego kod z app.js .
W edytorze kodu otwórz plik server.js , a następnie dodaj do niego kod z server.js .
W edytorze kodu otwórz plik package.json , a następnie zaktualizuj scripts właściwość do:
```
"scripts": {
"start": "node server.js"
}
```

Uruchamianie i testowanie aplikacji internetowej

W terminalu upewnij się, że jesteś w folderze projektu zawierającym aplikację internetową, taką jak ciam-sign-in-node-express-web-app.
W terminalu uruchom następujące polecenie:
```
npm start
```
Otwórz przeglądarkę, a następnie przejdź do strony http://localhost:3000. Powinna zostać wyświetlona strona podobna do poniższego zrzutu ekranu:
Po zakończeniu ładowania strony wybierz link Zaloguj. Zostanie wyświetlony monit o zalogowanie się.
Na stronie logowania wpisz swój adres e-mail, wybierz pozycję Dalej, wpisz hasło, a następnie wybierz pozycję Zaloguj. Jeśli nie masz konta, wybierz pozycję Nie masz konta? Utwórz jeden link, który uruchamia przepływ rejestracji.
Jeśli wybierzesz opcję rejestracji, po wypełnieniu adresu e-mail, jednorazowego kodu dostępu, nowego hasła i dodatkowych szczegółów konta, ukończ cały przepływ rejestracji. Zostanie wyświetlona strona podobna do poniższego zrzutu ekranu. Po wybraniu opcji logowania zostanie wyświetlona podobna strona.
Wybierz pozycję Wyloguj, aby wylogować użytkownika z aplikacji internetowej lub wybrać pozycję Wyświetl oświadczenia tokenu identyfikatora , aby wyświetlić wszystkie oświadczenia tokenu identyfikatora.

Udostępnij za pośrednictwem

Wymagania wstępne

Tworzenie obiektu konfiguracji biblioteki MSAL

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Dodawanie tras ekspresowych

Punkt wejścia aplikacji

Wyświetlanie oświadczeń tokenu identyfikatora

Finalizowanie aplikacji internetowej

Uruchamianie i testowanie aplikacji internetowej

Zobacz też

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Wymagania wstępne

Tworzenie obiektu konfiguracji biblioteki MSAL

Użyj niestandardowej domeny adresu URL (opcjonalnie)

Dodawanie tras ekspresowych

Punkt wejścia aplikacji

Logowanie i wylogowywanie

Wyświetlanie oświadczeń tokenu identyfikatora

Finalizowanie aplikacji internetowej

Uruchamianie i testowanie aplikacji internetowej

Zobacz też

Opinia

Dodatkowe zasoby