Delen via

Zelfstudie: Aanmelden en afmelden toevoegen aan uw Node.js-webtoepassing

  • Artikel

Deze zelfstudie is het laatste deel van een reeks die laat zien hoe u een Node.js web-app bouwt en voorbereidt op verificatie met behulp van het Microsoft Entra-beheercentrum. In deel 2 van deze reeks hebt u een Node.js web-app gemaakt en alle vereiste bestanden georganiseerd. In deze zelfstudie voegt u aanmelden, registreren en afmelden toe aan de Node.js-web-app. Om het toevoegen van verificatie aan de Node.js-web-app te vereenvoudigen, gebruikt u MSAL (Microsoft Authentication Library) voor Node. De aanmeldingsstroom maakt gebruik van het OpenID Connect-verificatieprotocol (OIDC), waarmee gebruikers veilig worden aangemeld.

In deze zelfstudie gaat u:

  • Aanmeldings- en afmeldingslogica toevoegen
  • Id-tokenclaims weergeven
  • Voer de app uit en test de aanmeldings- en afmeldingservaring.

Vereisten

MSAL-configuratieobject maken

Open authConfig.js bestand in de code-editor en voeg de volgende code toe:

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

Het msalConfig object bevat een set configuratieopties die u gebruikt om het gedrag van uw verificatiestromen aan te passen.

Vervang het volgende in het authConfig.js-bestand :

  • Enter_the_Application_Id_Here met de toepassings-id (client) van de app die u eerder hebt geregistreerd.

  • Enter_the_Tenant_Subdomain_Here en vervang het door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leest u de details van uw tenant.

  • Enter_the_Client_Secret_Here met de waarde van het app-geheim die u eerder hebt gekopieerd.

Als u het .env-bestand gebruikt om uw configuratiegegevens op te slaan:

  1. Open het .env-bestand in de code-editor en voeg vervolgens de volgende code toe.

        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

  2. Vervang de Enter_the_Application_Id_Heretijdelijke Enter_the_Tenant_Subdomain_Here aanduidingen en Enter_the_Client_Secret_Here tijdelijke aanduidingen zoals eerder uitgelegd.

U exporteert msalConfig, TENANT_SUBDOMAIN REDIRECT_URIen POST_LOGOUT_REDIRECT_URI variabelen in het authConfig.js-bestand, waardoor ze toegankelijk zijn waar u het bestand nodig hebt.

Aangepast URL-domein gebruiken (optioneel)

Gebruik een aangepast domein om de verificatie-URL volledig te merken. Vanuit gebruikersperspectief blijven gebruikers in uw domein tijdens het verificatieproces in plaats van omgeleid naar ciamlogin.com domeinnaam.

Gebruik de volgende stappen om een aangepast domein te gebruiken:

  1. Gebruik de stappen in Aangepaste URL-domeinen inschakelen voor apps in externe tenants om aangepast URL-domein in te schakelen voor uw externe tenant.

  2. Zoek vervolgens in het authConfig.js-bestand naar auth het object en vervolgens:

    1. Werk de waarde van de authority eigenschap bij naar https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Vervang Enter_the_Custom_Domain_Here door uw aangepaste URL-domein en Enter_the_Tenant_ID_Here door uw tenant-id. Als u uw tenant-id niet hebt, leest u de details van uw tenant.
    2. Voeg knownAuthorities de eigenschap toe met een waarde [Enter_the_Custom_Domain_Here].

Nadat u de wijzigingen hebt aangebracht in uw authConfig.js-bestand, als uw aangepaste URL-domein is login.contoso.com en uw tenant-id aaaabb-0000-cccc-1111-dddd2222eeeee is, moet uw bestand er ongeveer uitzien als het volgende fragment:

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

Expressroutes toevoegen

De Express-routes bieden de eindpunten waarmee we bewerkingen kunnen uitvoeren, zoals aanmelden, afmelden en id-tokenclaims weergeven.

App-toegangspunt

Open routes/index.js bestand in de code-editor en voeg de volgende code toe:

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;

De / route is het toegangspunt voor de toepassing. Hiermee wordt de weergave views/index.hbs weergegeven die u eerder hebt gemaakt in de onderdelen van de gebruikersinterface van de build-app. isAuthenticated is een Booleaanse variabele die bepaalt wat u in de weergave ziet.

Aanmelden en afmelden

  1. Open in de code-editor routes/auth.js bestand en voeg de code uit auth.js toe.

  2. Open in de code-editor het bestand controller/authController.js en voeg vervolgens de code uit authController.js toe.

  3. Open in de code-editor het bestand auth/AuthProvider.js en voeg de code uit AuthProvider.js toe.

    De /signinen /signout /redirect routes worden gedefinieerd in het bestand routes/auth.js , maar u implementeert de logica in de klasse auth/AuthProvider.js .

  • De login methode verwerkt /signin de route:

    • De aanmeldingsstroom wordt gestart door het eerste deel van de verificatiecodestroom te activeren.

    • Hiermee wordt een exemplaar van een vertrouwelijke clienttoepassing geïnitialiseerd met behulp van het MSAL-configuratieobject, msalConfigdat u eerder hebt gemaakt.

          const msalInstance = this.getMsalInstance(this.config.msalConfig);

      De getMsalInstance methode wordt gedefinieerd als:

          getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }

    • Het eerste deel van de verificatiecodestroom genereert een aanvraag-URL voor autorisatiecode en leidt vervolgens om naar die URL om de autorisatiecode te verkrijgen. Deze eerste been wordt geïmplementeerd in de redirectToAuthCodeUrl methode. U ziet hoe we de MSALs getAuthCodeUrl-methode gebruiken om de URL van de autorisatiecode te genereren:

      //...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...

      Vervolgens wordt u omgeleid naar de URL van de autorisatiecode zelf.

      //...
res.redirect(authCodeUrlResponse);
//...

  • De handleRedirect methode verwerkt /redirect de route:

    • U stelt deze URL in als omleidings-URI voor de web-app in het Microsoft Entra-beheercentrum eerder in De web-app registreren.

    • Met dit eindpunt wordt het tweede deel van de verificatiecodestroom geïmplementeerd. Hierbij wordt de autorisatiecode gebruikt om een id-token aan te vragen met behulp van de acquireTokenByCode-methode van MSAL.

      //...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...

    • Nadat u een antwoord hebt ontvangen, kunt u een Express-sessie maken en de gewenste informatie hierin opslaan. U moet het opnemen isAuthenticated en instellen op true:

      //...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...

  • De logout methode verwerkt /signout de route:

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

    • Er wordt een afmeldingsaanvraag gestart.

    • Wanneer u de gebruiker wilt afmelden bij de toepassing, is het niet voldoende om de sessie van de gebruiker te beëindigen. U moet de gebruiker omleiden naar de afmeldings-URI. Anders kan de gebruiker mogelijk opnieuw verifiëren bij uw toepassingen zonder hun referenties opnieuw in te voeren. Als de naam van uw tenant contoso is, ziet de afmeldings-Uri er ongeveer als volgt https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000uit.

Id-tokenclaims weergeven

Open in de code-editor routes/users.js bestand en voeg vervolgens de volgende code toe:

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;

Als de gebruiker is geverifieerd, geeft de /id route id-tokenclaims weer met behulp van de weergave views/id.hbs . U hebt deze weergave eerder toegevoegd in onderdelen van de gebruikersinterface van de build-app.

Een specifieke id-tokenclaim extraheren, zoals de opgegeven naam:

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

Uw web-app voltooien

  1. Open app.js bestand in de code-editor en voeg de code uit app.js toe.

  2. Open in de code-editor server.js bestand en voeg de code uit server.js toe.

  3. Open in de code-editor package.json bestand en werk de scripts eigenschap bij naar:

    "scripts": {
"start": "node server.js"
}

De web-app uitvoeren en testen

  1. Controleer in de terminal of u zich in de projectmap bevindt die uw web-app bevat, zoals ciam-sign-in-node-express-web-app.

  2. Voer in de terminal de volgende opdracht uit:

    npm start

  3. Open uw browser en ga naar http://localhost:3000. De pagina ziet er ongeveer als volgt uit:

    Schermopname van aanmelden bij een knooppuntweb-app.

  4. Nadat de pagina is geladen, selecteert u De koppeling Aanmelden . U wordt gevraagd om u aan te melden.

  5. Typ uw e-mailadres op de aanmeldingspagina, selecteer Volgende, typ uw wachtwoord en selecteer Vervolgens Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.

  6. Als u de registratieoptie kiest, voltooit u na het invullen van uw e-mail, eenmalige wachtwoordcode, nieuw wachtwoord en meer accountgegevens de volledige aanmeldingsstroom. U ziet een pagina die vergelijkbaar is met de volgende schermopname. U ziet een vergelijkbare pagina als u de aanmeldingsoptie kiest.

    Schermopname van id-tokenclaims weergeven.

  7. Selecteer Afmelden om de gebruiker af te melden bij de web-app of selecteer Id-tokenclaims weergeven om alle id-tokenclaims weer te geven.

Zie ook