Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Gäller för: Workforce-hyresgäster
externa hyresgäster (läs mer)
I den här självstudien får du lära dig hur du skapar en Node/Express.js-webbapp som loggar in användare i en kundorienterad app i en extern klientorganisation eller anställda i en personalorganisation. Vägledningen visar också hur du hämtar en åtkomsttoken för att anropa Microsoft Graph API.
Den här självstudien är del 1 i en serie i tre delar.
I den här guiden kommer du att
- Konfigurera ett Node.js projekt
- Installera beroenden
- Lägga till appvyer och gränssnittskomponenter
Förutsättningar
- Registrera en ny app i administrationscentret för Microsoft Entra, som endast konfigurerats för konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
- App-ID (klient-ID)
- Katalog-ID (hyresgäst)
- Lägg till följande omdirigerings-URI:er med hjälp av webbplattformskonfigurationen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
-
omdirigerings-URI:
http://localhost:3000/auth/redirect
-
URL för utloggning i frontkanalen:
https://localhost:5001/signout-callback-oidc
-
omdirigerings-URI:
- Lägg till en klienthemlighet i din appregistrering. Använd inte klienthemligheter i produktionsappar. Använd certifikat eller federerade autentiseringsuppgifter i stället. Mer information finns i lägga till autentiseringsuppgifter i ditt program.
- Node.js.
- Visual Studio Code eller någon annan kodredigerare.
Skapa Node.js-projektet
På en valfri plats på datorn skapar du en mapp som är värd för nodprogrammet, till exempel ciam-sign-in-node-express-web-app.
I terminalen ändrar du katalogen till nodwebbappmappen, till exempel
cd ciam-sign-in-node-express-web-app
och kör sedan följande kommando för att skapa ett nytt Node.js projekt:npm init -y
Kommandot
init -y
skapar en standardfil för package.json för ditt Node.js projekt.Skapa ytterligare mappar och filer för att uppnå följande projektstruktur:
ciam-sign-in-node-express-web-app/ ├── server.js └── app.js └── authConfig.js └── package.json └── .env └── auth/ └── AuthProvider.js └── controller/ └── authController.js └── routes/ └── auth.js └── index.js └── users.js └── views/ └── layouts.hbs └── error.hbs └── id.hbs └── index.hbs └── public/stylesheets/ └── style.css
Installera appberoenden
Om du vill installera nödvändiga identitets- och Node.js relaterade npm-paket kör du följande kommando i terminalen
npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node
Skapa appgränssnittskomponenter
Öppna vyer/index.hbs fil i kodredigeraren och lägg sedan till följande kod:
<h1>{{title}}</h1> {{#if isAuthenticated }} <p>Hi {{username}}!</p> <a href="/users/id">View ID token claims</a> <br> <a href="/auth/signout">Sign out</a> {{else}} <p>Welcome to {{title}}</p> <a href="/auth/signin">Sign in</a> {{/if}}
I den här vyn, om användaren autentiseras, visar vi deras användarnamn och länkar för att besöka
/auth/signout
och/users/id
slutpunkter, annars måste användaren besöka/auth/signin
slutpunkten för att logga in. Vi definierar expressvägarna för dessa slutpunkter senare i den här artikeln.I kodredigeraren öppnar du views/id.hbs fil och lägger sedan till följande kod:
<h1>Azure AD for customers</h1> <h3>ID Token</h3> <table> <tbody> {{#each idTokenClaims}} <tr> <td>{{@key}}</td> <td>{{this}}</td> </tr> {{/each}} </tbody> </table> <a href="/">Go back</a>
Vi använder den här vyn för att visa ID-tokenkrav som Microsoft Entra External ID returnerar till den här appen när en användare loggat in framgångsrikt.
I kodredigeraren öppnar du views/error.hbs-filen och lägger sedan till följande kod:
<h1>{{message}}</h1> <h2>{{error.status}}</h2> <pre>{{error.stack}}</pre>
Vi använder den här vyn för att visa eventuella fel som inträffar när appen körs.
I kodredigeraren öppnar du views/layout.hbs fil och lägger sedan till följande kod:
<!DOCTYPE html> <html> <head> <title>{{title}}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> {{{content}}} </body> </html>
Den
layout.hbs
filen finns i layoutfilen. Den innehåller HTML-koden som vi behöver i hela programvyn.Öppna public/stylesheets/style.cssi kodredigeraren och lägg sedan till följande kod:
body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; }