Självstudie: Lägga till tillägg av inloggning och utloggning i ditt Node.js webbprogram

Artikel
08/27/2024

Den här självstudien är den sista delen i en serie som visar hur du skapar en Node.js webbapp och förbereder den för autentisering med hjälp av administrationscentret för Microsoft Entra. I del 2 i den här serien skapade du en Node.js webbapp och organiserade alla nödvändiga filer. I den här självstudien lägger du till inloggning, registrering och utloggning i Node.js-webbappen. Om du vill förenkla tillägg av autentisering i Node.js webbapp använder du Microsoft Authentication Library (MSAL) för Node. Inloggningsflödet använder OIDC-autentiseringsprotokollet (OpenID Connect), som loggar in användare på ett säkert sätt.

I den här självstudien ska du:

Lägga till inloggnings- och utloggningslogik
Visa ID-tokenanspråk
Kör appen och testa inloggnings- och utloggningsupplevelsen.

Förutsättningar

Du har slutfört stegen i Självstudie: Förbereda ett Node.js webbprogram för autentisering.

Skapa MSAL-konfigurationsobjekt

Öppna authConfig.js fil i kodredigeraren och lägg sedan till följande 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
};

Objektet msalConfig innehåller en uppsättning konfigurationsalternativ som du använder för att anpassa beteendet för dina autentiseringsflöden.

Ersätt i filen authConfig.js :

Enter_the_Application_Id_Here med program-ID:t (klient) för den app som du registrerade tidigare.
Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du läsa klientinformationen.
Enter_the_Client_Secret_Here med det apphemlighetsvärde som du kopierade tidigare.

Om du använder .env-filen för att lagra konfigurationsinformationen:

Öppna .env-filen i kodredigeraren och lägg sedan till följande 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

Enter_the_Application_Id_HereErsätt platshållarna och Enter_the_Tenant_Subdomain_Here Enter_the_Client_Secret_Here enligt beskrivningen tidigare.

Du exporterar msalConfig, TENANT_SUBDOMAIN REDIRECT_URIoch POST_LOGOUT_REDIRECT_URI variabler i authConfig.js-filen, vilket gör dem tillgängliga var du än behöver filen.

Använda anpassad URL-domän (valfritt)

Använd en anpassad domän för att helt märka autentiserings-URL:en. Från ett användarperspektiv finns användarna kvar på din domän under autentiseringsprocessen, i stället för att omdirigeras till ciamlogin.com domännamn.

Använd följande steg för att använda en anpassad domän:

Använd stegen i Aktivera anpassade URL-domäner för appar i externa klienter för att aktivera anpassad URL-domän för din externa klientorganisation.
Leta upp objektet i auth authConfig.js-filen och sedan:
1. Uppdatera värdet för authority egenskapen till https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Ersätt Enter_the_Custom_Domain_Here med din anpassade URL-domän och Enter_the_Tenant_ID_Here med ditt klient-ID. Om du inte har ditt klientorganisations-ID lär du dig att läsa klientinformationen.
2. Lägg till knownAuthorities egenskap med ett värde [Enter_the_Custom_Domain_Here].

När du har gjort ändringarna i din authConfig.js-fil , om din anpassade URL-domän är login.contoso.com och klientorganisations-ID:t är aaaabbbb-0000-cccc-1111-dddd222eeee, bör filen se ut ungefär så här:

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

Lägga till expressvägar

Expressvägarna tillhandahåller de slutpunkter som gör att vi kan köra åtgärder som inloggning, logga ut och visa ID-tokenanspråk.

Startpunkt för app

Öppna vägar/index.js i kodredigeraren och lägg sedan till följande 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;

Vägen / är startpunkten för programmet. Den återger den vy för vyer/index.hbs som du skapade tidigare i Build app UI-komponenter. isAuthenticated är en boolesk variabel som avgör vad du ser i vyn.

Öppna vägar/auth.js i kodredigeraren och lägg sedan till koden från auth.js till den.
Öppna kontrollanten/authController.js i kodredigeraren och lägg sedan till koden från authController.js till den.
I kodredigeraren öppnar du filen auth/AuthProvider.js och lägger sedan till koden från AuthProvider.js till den.

Vägarna /signinoch /signout /redirect definieras i filen routes/auth.js , men du implementerar deras logik i klassen auth/AuthProvider.js .

Metoden login hanterar /signin vägen:
- Det initierar inloggningsflödet genom att utlösa den första delen av autentiseringskodflödet.
- Den initierar en konfidentiell klientprograminstans med hjälp av MSAL-konfigurationsobjektet , msalConfigsom du skapade tidigare.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  Metoden getMsalInstance definieras som:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- Den första delen av autentiseringskodflödet genererar en URL för begäran om auktoriseringskod och omdirigeras sedan till den URL:en för att hämta auktoriseringskoden. Den här första delen implementeras i redirectToAuthCodeUrl -metoden. Observera hur vi använder METODEN MSALs getAuthCodeUrl för att generera auktoriseringskods-URL:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Sedan omdirigerar vi till själva auktoriseringskodens URL.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
Metoden handleRedirect hanterar /redirect vägen:
- Du anger den här URL:en som omdirigerings-URI för webbappen i administrationscentret för Microsoft Entra tidigare i Registrera webbappen.
- Den här slutpunkten implementerar den andra delen av autentiseringskodflödet. Den använder auktoriseringskoden för att begära en ID-token med hjälp av MSAL:s metoden acquireTokenByCode .
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- När du har fått ett svar kan du skapa en Express-session och lagra den information du vill ha i den. Du måste inkludera isAuthenticated och ställa in den på true:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```

Metoden logout hanterar /signout vägen:

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);
    });
}

Den initierar utloggningsbegäran.
När du vill logga ut användaren från programmet räcker det inte att avsluta användarens session. Du måste omdirigera användaren till logoutUri. Annars kanske användaren kan autentisera till dina program igen utan att ange sina autentiseringsuppgifter igen. Om namnet på din klientorganisation är contoso ser logoutUri ut ungefär https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000som .

Visa ID-tokenanspråk

Öppna vägar/users.js fil i kodredigeraren och lägg sedan till följande 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;

Om användaren autentiseras /id visar vägen ID-tokenanspråk med hjälp av vyn views/id.hbs . Du lade till den här vyn tidigare i Build app UI components (Skapa appgränssnittskomponenter).

Så här extraherar du ett specifikt ID-tokenanspråk, till exempel förnamn:

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

Slutför webbappen

Öppna app.js i kodredigeraren och lägg sedan till koden från app.js till den.
Öppna server.js fil i kodredigeraren och lägg sedan till koden från server.js till den.
Öppna package.json fil i kodredigeraren och uppdatera sedan egenskapen scripts till:
```
"scripts": {
"start": "node server.js"
}
```

Köra och testa webbappen

I terminalen kontrollerar du att du är i projektmappen som innehåller webbappen, till exempel ciam-sign-in-node-express-web-app.
Kör följande kommando i terminalen:
```
npm start
```
Öppna webbläsaren och gå sedan till http://localhost:3000. Du bör se sidan som liknar följande skärmbild:
När sidan har lästs in väljer du Länken Logga in . Du uppmanas att logga in.
På inloggningssidan skriver du din e-postadress, väljer Nästa, skriver ditt lösenord och väljer sedan Logga in. Om du inte har något konto väljer du Inget konto? Skapa en länk som startar registreringsflödet.
Om du väljer registreringsalternativet slutför du hela registreringsflödet när du har fyllt i din e-post, engångslösenord, nya lösenord och mer kontoinformation. Du ser en sida som liknar följande skärmbild. Du ser en liknande sida om du väljer inloggningsalternativet.
Välj Logga ut för att logga ut användaren från webbappen eller välj Visa ID-tokenanspråk för att visa alla ID-tokenanspråk.

Dela via

Förutsättningar

Skapa MSAL-konfigurationsobjekt

Använda anpassad URL-domän (valfritt)

Lägga till expressvägar

Startpunkt för app

Visa ID-tokenanspråk

Slutför webbappen

Köra och testa webbappen

Se även

Feedback

Ytterligare resurser

Dela via

Förutsättningar

Skapa MSAL-konfigurationsobjekt

Använda anpassad URL-domän (valfritt)

Lägga till expressvägar

Startpunkt för app

Inloggning och utloggning

Visa ID-tokenanspråk

Slutför webbappen

Köra och testa webbappen

Se även

Feedback

Ytterligare resurser