Kurz: Přidání přihlášení a odhlášení do webové aplikace Node.js

Článek
08/27/2024

Tento kurz je poslední částí série, která ukazuje vytvoření webové aplikace Node.js a přípravu na ověření pomocí Centra pro správu Microsoft Entra. Ve 2. části této série jste vytvořili webovou aplikaci Node.js a uspořádali jste všechny požadované soubory. V tomto kurzu přidáte do webové aplikace Node.js přihlášení, registraci a odhlášení. Pokud chcete zjednodušit přidávání ověřování do webové aplikace Node.js, použijete knihovnu Microsoft Authentication Library (MSAL) pro Node. Tok přihlašování používá ověřovací protokol OpenID Connect (OIDC), který bezpečně přihlašuje uživatele.

V tomto kurzu:

Přidání logiky přihlašování a odhlášení
Zobrazení deklarací identity tokenu ID
Spusťte aplikaci a otestujte prostředí přihlašování a odhlášení.

Požadavky

Dokončili jste kroky v kurzu: Příprava webové aplikace Node.js na ověřování.

Vytvoření objektu konfigurace MSAL

V editoru kódu otevřete soubor authConfig.js a přidejte následující kód:

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

Objekt msalConfig obsahuje sadu možností konfigurace, které používáte k přizpůsobení chování toků ověřování.

V souboru authConfig.js nahraďte:

Enter_the_Application_Id_Here s ID aplikace (klienta) aplikace, kterou jste zaregistrovali dříve.
Enter_the_Tenant_Subdomain_Here a nahraďte ji subdoménou adresáře (tenanta). Pokud je například primární doména vašeho tenanta contoso.onmicrosoft.com, použijte contoso. Pokud nemáte název tenanta, přečtěte si, jak si přečíst podrobnosti o tenantovi.
Enter_the_Client_Secret_Here s hodnotou tajného kódu aplikace, kterou jste zkopírovali dříve.

Pokud k uložení konfiguračních informací použijete soubor .env :

V editoru kódu otevřete soubor .env a přidejte následující kód.

    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_HereEnter_the_Tenant_Subdomain_Here Nahraďte symboly a Enter_the_Client_Secret_Here zástupné symboly, jak je vysvětleno výše.

Exportujete msalConfig, REDIRECT_URITENANT_SUBDOMAIN a POST_LOGOUT_REDIRECT_URI proměnné v souboru authConfig.js, což je zpřístupní všude, kde potřebujete soubor.

Použití vlastní domény URL (volitelné)

Pomocí vlastní domény plně označte adresu URL ověřování. Z pohledu uživatele zůstanou uživatelé ve vaší doméně během procesu ověřování místo přesměrování na ciamlogin.com název domény.

Pomocí následujících kroků použijte vlastní doménu:

Pomocí kroků v části Povolit vlastní domény URL pro aplikace v externích tenantech povolte pro externího tenanta vlastní doménu URL.
V souboru authConfig.js vyhledejte auth objekt a pak:
1. Aktualizujte hodnotu authority vlastnosti na https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Herehodnotu . Nahraďte Enter_the_Custom_Domain_Here vlastní doménou URL a Enter_the_Tenant_ID_Here ID tenanta. Pokud nemáte ID tenanta, přečtěte si, jak si přečíst podrobnosti o tenantovi.
2. Přidejte knownAuthorities vlastnost s hodnotou [Enter_the_Custom_Domain_Here].

Po provedení změn v souboru authConfig.js , pokud je vaše vlastní doména URL login.contoso.com a ID vašeho tenanta je aaaabbbbbb-0000-cccc-1111-dddd2222eeeee, měl by váš soubor vypadat podobně jako následující fragment kódu:

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

Přidání expresních tras

Trasy Express poskytují koncové body, které nám umožňují provádět operace, jako je přihlášení, odhlášení a zobrazení deklarací identity tokenu ID.

Vstupní bod aplikace

V editoru kódu otevřete soubory tras/index.js a přidejte následující kód:

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 / je vstupním bodem aplikace. Zobrazí zobrazení views/index.hbs , které jste vytvořili dříve v součástech uživatelského rozhraní aplikace sestavení. isAuthenticated je logická proměnná, která určuje, co vidíte v zobrazení.

V editoru kódu otevřete trasy/auth.js soubor a pak do něj přidejte kód z auth.js .
V editoru kódu otevřete soubor kontroleru nebo authController.js a pak do něj přidejte kód z authController.js .
V editoru kódu otevřete soubor auth/AuthProvider.js a pak do něj přidejte kód z AuthProvider.js .

Hodnoty /signina /signout /redirect trasy jsou definovány v souboru routes/auth.js , ale implementujete jejich logiku ve třídě ověřování/AuthProvider.js .

Metoda login zpracovává trasu /signin :
- Spustí tok přihlášení tím, že aktivuje první část toku ověřovacího kódu.
- Inicializuje důvěrnou instanci klientské aplikace pomocí objektu konfigurace MSAL , msalConfigkterý jste vytvořili dříve.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  Metoda getMsalInstance je definována takto:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- První část toku ověřovacího kódu vygeneruje adresu URL požadavku na autorizační kód a pak přesměruje na danou adresu URL a získá autorizační kód. Tato první noha je implementována redirectToAuthCodeUrl v metodě. Všimněte si, že k vygenerování adresy URL autorizačního kódu používáme metodu MSALs getAuthCodeUrl :
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Pak přesměrujeme na samotnou adresu URL autorizačního kódu.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
Metoda handleRedirect zpracovává trasu /redirect :
- Tuto adresu URL nastavíte jako identifikátor URI přesměrování pro webovou aplikaci v Centru pro správu Microsoft Entra dříve v části Registrace webové aplikace.
- Tento koncový bod implementuje druhou část toku ověřovacího kódu. Autorizační kód používá k vyžádání tokenu ID pomocí metody acquireTokenByCode knihovny MSAL.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Jakmile obdržíte odpověď, můžete vytvořit relaci Expressu a uložit do ní libovolné informace. Musíte zahrnout isAuthenticated a nastavit ho na true:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```

Metoda logout zpracovává trasu /signout :

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

Zahájí žádost o odhlášení.
Pokud chcete uživatele odhlásit z aplikace, nestačí ukončit relaci uživatele. Uživatele musíte přesměrovat na logoutUri. V opačném případě může být uživatel schopen znovu provést ověření vašich aplikací bez opětovného zadání přihlašovacích údajů. Pokud je název vašeho tenanta contoso, vypadá logoutUri podobně jako https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Zobrazení deklarací identity tokenu ID

V editoru kódu otevřete soubory tras/users.js a přidejte následující kód:

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;

Pokud je uživatel ověřený, /id trasa zobrazí deklarace identity tokenu ID pomocí zobrazení views/id.hbs . Toto zobrazení jste přidali dříve v součástech uživatelského rozhraní sestavení aplikace.

Pokud chcete extrahovat konkrétní deklaraci identity tokenu ID, například název:

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

Dokončení webové aplikace

V editoru kódu otevřete app.js soubor a pak do něj přidejte kód z app.js .
V editoru kódu otevřete server.js soubor a pak do něj přidejte kód z server.js .
V editoru kódu otevřete soubor package.json a aktualizujte scripts vlastnost na:
```
"scripts": {
"start": "node server.js"
}
```

Spuštění a otestování webové aplikace

V terminálu se ujistěte, že jste ve složce projektu, která obsahuje vaši webovou aplikaci, například ciam-sign-in-node-express-web-app.
V terminálu spusťte následující příkaz:
```
npm start
```
Otevřete prohlížeč a přejděte na http://localhost:3000. Měla by se zobrazit stránka podobná následujícímu snímku obrazovky:
Po dokončení načítání stránky vyberte odkaz Přihlásit se . Zobrazí se výzva k přihlášení.
Na přihlašovací stránce zadejte svoji e-mailovou adresu, vyberte Další, zadejte heslo a pak vyberte Přihlásit se. Pokud účet nemáte, vyberte Možnost Žádný účet? Vytvořte jeden odkaz, který spustí tok registrace.
Pokud zvolíte možnost registrace po vyplnění e-mailu, jednorázového hesla, nového hesla a dalších podrobností účtu, dokončíte celý tok registrace. Zobrazí se stránka podobná následujícímu snímku obrazovky. Pokud zvolíte možnost přihlášení, zobrazí se podobná stránka.
Pokud se chcete odhlásit uživatele z webové aplikace, vyberte Zobrazit deklarace identity tokenu ID a zobrazte všechny deklarace identity tokenu ID.

Viz také

Povolte resetování hesla.
Nakonfigurujte přihlášení pomocí Googlu.
Místo tajného klíče klienta použijte klientský certifikát pro ověřování ve webové aplikaci Node.js.
Volání rozhraní API ve webové aplikaci Node.js

Sdílet prostřednictvím

Požadavky

Vytvoření objektu konfigurace MSAL

Použití vlastní domény URL (volitelné)

Přidání expresních tras

Vstupní bod aplikace

Zobrazení deklarací identity tokenu ID

Dokončení webové aplikace

Spuštění a otestování webové aplikace

Viz také

Váš názor

Další materiály

Sdílet prostřednictvím

Požadavky

Vytvoření objektu konfigurace MSAL

Použití vlastní domény URL (volitelné)

Přidání expresních tras

Vstupní bod aplikace

Přihlášení a odhlášení

Zobrazení deklarací identity tokenu ID

Dokončení webové aplikace

Spuštění a otestování webové aplikace

Viz také

Váš názor

Další materiály