Dela via


Snabbstart: Logga in användare i en sida (SPA) och anropa Microsoft Graph API

I den här snabbstarten använder du ett exempel på en ensidig app (SPA) för att visa hur du loggar in användare med hjälp av auktoriseringskodflöde med Proof Key for Code Exchange (PKCE) och för att anropa Microsoft Graph API. Exemplet använder Microsoft Authentication Library för att hantera autentisering.

Förutsättningar

  • Ett Azure-konto med en aktiv prenumeration. Om du inte redan har ett Skapa ett konto kostnadsfritt.
  • Det här Azure-kontot måste ha behörighet att hantera program. Någon av följande Microsoft Entra-roller innehåller de behörigheter som krävs:
    • Programadministratör
    • Programutvecklare
    • Molnprogramadministratör
  • En hyresgäst för arbetskraft. Du kan använda standardkatalogen eller konfigurera en ny klientorganisation.
  • Visual Studio Code eller någon annan kodredigerare.
  • Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
    • Namn: identity-client-spa
    • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
    • Plattformskonfiguration: Enkelsidigt program (SPA)
    • omdirigerings-URI: http://localhost:3000/
  • Node.js

Klona eller ladda ned exempelprogrammet

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
    
  • Ladda ned filen .zip. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

Konfigurera projektet

  1. I din IDE öppnar du projektmappen ms-identity-docs-code-javascript, som innehåller exemplet.

  2. Öppna vanillajs-spa/App/public/authConfig.js och uppdatera följande värden med informationen som registrerats i administrationscentret.

    /**
     * Configuration object to be passed to MSAL instance on creation. 
     * For a full list of MSAL.js configuration parameters, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
     */
    const msalConfig = {
        auth: {
    
             // WORKFORCE TENANT
             authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
             // EXTERNAL TENANT
             // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
            redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
            navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
        },
        cache: {
            cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
            storeAuthStateInCookie: false, // set this to true if you have to support IE
        },
        system: {
            loggerOptions: {
                loggerCallback: (level, message, containsPii) => {
                    if (containsPii) {
                        return;
                    }
                    switch (level) {
                        case msal.LogLevel.Error:
                            console.error(message);
                            return;
                        case msal.LogLevel.Info:
                            console.info(message);
                            return;
                        case msal.LogLevel.Verbose:
                            console.debug(message);
                            return;
                        case msal.LogLevel.Warning:
                            console.warn(message);
                            return;
                    }
                },
            },
        },
    };
    
    /**
     * Scopes you add here will be prompted for user consent during sign-in.
     * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
     * For more information about OIDC scopes, visit: 
     * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
     */
    const loginRequest = {
        scopes: ["User.Read"],
    };
    
    /**
     * An optional silentRequest object can be used to achieve silent SSO
     * between applications by providing a "login_hint" property.
     */
    
    // const silentRequest = {
    //   scopes: ["openid", "profile"],
    //   loginHint: "example@domain.net"
    // };
    
    // exporting config object for jest
    if (typeof exports !== 'undefined') {
        module.exports = {
            msalConfig: msalConfig,
            loginRequest: loginRequest,
        };
    }
    
    • clientId – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med program-ID (klient)-ID:t värde som registrerades tidigare.
    • authority – Auktoriteten är en URL som anger en katalog som MSAL kan begära token från. Ersätt Enter_the_Tenant_Info_Here med värdet för Katalog (tenant) ID som registrerades tidigare.
    • redirectUri – applikationens omdirigerings-URI. Om det behövs ersätter du texten inom citattecken med den omdirigerings-URI som registrerades tidigare.

Kör programmet och logga in och logga ut

Kör projektet med en webbserver med hjälp av Node.js:

  1. Starta servern genom att köra följande kommandon från projektkatalogen:

    cd vanillajs-spa/App
    npm install
    npm start
    
  2. Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.

  3. Följ stegen och ange nödvändig information för att logga in med ditt Microsoft-konto. Du kommer att begäras en e-postadress så att ett engångslösenord kan skickas till dig. Ange koden när du uppmanas att göra det.

  4. Programmet begär behörighet att behålla åtkomsten till data som du har gett den åtkomst till och logga in dig och läsa din profil. Välj Acceptera. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.

    Skärmbild av JavaScript-appen som visar resultatet av API-anropet.

Förutsättningar

  • Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration och registrera dess identifierare från sidan Översikt. Mer information finns i Registrera ett program.
    • Namn: identity-client-spa
    • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation)
    • Plattformskonfiguration: Enkelsidigt program (SPA)
    • omdirigerings-URI: http://localhost:3000/
  • Lägga till ditt program i användarflödet
  • Node.js

När du har registrerat ditt program tilldelas det behörigheten User.Read. Men eftersom hyresgästen är en extern hyresgäst, kan kundanvändarna själva inte samtycka till den här behörigheten. Du som klientadministratör måste godkänna den här behörigheten för alla användare i klientorganisationen:

  1. På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.

  2. Under Hanteraväljer du API-behörigheter.

    1. Välj Bevilja administratörsmedgivande för <ditt klientnamn>och välj sedan Ja.
    2. Välj Uppdatera, och kontrollera sedan att Beviljad för <ditt klientnamn> visas under Status för behörigheten.

Klona eller ladda ned exempel-SPA

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

  • Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
    
  • Ladda ned exempel. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

Konfigurera ett spaexempel

  1. Öppna App/public/authConfig.js och ersätt följande med de värden som hämtas från administrationscentret för Microsoft Entra:

    • Enter_the_Application_Id_Here och ersätt det 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 för Directory (hyresgäst). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du lära dig hur du läser klientinformationen.
  2. Spara filen.

Kör projektet och logga in

  1. Starta servern genom att köra följande kommandon från projektkatalogen:

    cd 1-Authentication\0-sign-in-vanillajs\App
    npm install
    npm start
    
  2. Kopiera den https URL som visas i terminalen, till exempel https://localhost:3000och klistra in den i en webbläsare. Vi rekommenderar att du använder en privat eller inkognito-webbläsarsession.

  3. Logga in med ett konto som är registrerat hos klienten.

  4. Följande skärmbild visas som anger att du har loggat in på programmet och har använt din profilinformation från Microsoft Graph-API:et.

    Skärmbild av JavaScript-appen som visar resultatet av API-anropet.

Logga ut från programmet

  1. Hitta knappen Logga ut på sidan och välj den.
  2. Du uppmanas att välja ett konto att logga ut från. Välj det konto som du använde för att logga in.

Ett meddelande visas som anger att du har loggat ut. Nu kan du stänga webbläsarfönstret.