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

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:3000/
• Node.js

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:3000/
• Node.js

• 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 med hjälp av plattformsinställningen för enkeltsidiga applikationer. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:4200/
• Node.js

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:5000/authentication/login-callback.
• .NET SDK

• 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.

• 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.

• 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.

• 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-dotnet.git
  

• Ladda ned filen .zip. Extrahera den till en filväg där namnets längd är mindre än 260 tecken.

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: {
            clientId: "Enter_the_Application_Id_Here",
            // 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://free.blessedness.top/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.

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

2. Öppna react-spa/src/authConfig.js och uppdatera följande värden med den information som registrerats i administrationscentret.

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   import { LogLevel } from "@azure/msal-browser";
   
   /**
    * 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 
    */
   
   export const msalConfig = {
       auth: {
           clientId: "Enter_the_Application_Id_Here",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
       },
       system: {	
           loggerOptions: {	
               loggerCallback: (level, message, containsPii) => {	
                   if (containsPii) {		
                       return;		
                   }		
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                       default:
                           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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
    */
   export const loginRequest = {
       scopes: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

   • 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.

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

2. Öppna angular-spa/src/app/app.module.ts och uppdatera följande värden med informationen som registrerats i administrationscentret.

   // Required for Angular multi-browser support
   import { BrowserModule } from '@angular/platform-browser';
   
   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required modules and components for this application
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { ProfileComponent } from './profile/profile.component';
   import { HomeComponent } from './home/home.component';
   
   // HTTP modules required by MSAL
   import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
   
   // Required for MSAL
   import { IPublicClientApplication, PublicClientApplication, InteractionType, BrowserCacheLocation, LogLevel } from '@azure/msal-browser';
   import { MsalGuard, MsalInterceptor, MsalBroadcastService, MsalInterceptorConfiguration, MsalModule, MsalService, MSAL_GUARD_CONFIG, MSAL_INSTANCE, MSAL_INTERCEPTOR_CONFIG, MsalGuardConfiguration, MsalRedirectComponent } from '@azure/msal-angular';
   
   const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
   
   export function MSALInstanceFactory(): IPublicClientApplication {
     return new PublicClientApplication({
       auth: {
         // 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
         clientId: "Enter_the_Application_Id_Here",
         // Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         // Must be the same redirectUri as what was provided in your app registration.
         redirectUri: "http://localhost:4200",
       },
       cache: {
         cacheLocation: BrowserCacheLocation.LocalStorage,
         storeAuthStateInCookie: isIE
       }
     });
   }
   
   // MSAL Interceptor is required to request access tokens in order to access the protected resource (Graph)
   export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
     const protectedResourceMap = new Map<string, Array<string>>();
     protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
   
     return {
       interactionType: InteractionType.Redirect,
       protectedResourceMap
     };
   }
   
   // MSAL Guard is required to protect routes and require authentication before accessing protected routes
   export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     return { 
       interactionType: InteractionType.Redirect,
       authRequest: {
         scopes: ['user.read']
       }
     };
   }
   
   // Create an NgModule that contains the routes and MSAL configurations
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProfileComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       HttpClientModule,
       MsalModule
     ],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MsalInterceptor,
         multi: true
       },
       {
         provide: MSAL_INSTANCE,
         useFactory: MSALInstanceFactory
       },
       {
         provide: MSAL_GUARD_CONFIG,
         useFactory: MSALGuardConfigFactory
       },
       {
         provide: MSAL_INTERCEPTOR_CONFIG,
         useFactory: MSALInterceptorConfigFactory
       },
       MsalService,
       MsalGuard,
       MsalBroadcastService
     ],
     bootstrap: [AppComponent, MsalRedirectComponent]
   })
   export class AppModule { }
   

   • 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.

1. I din IDE öppnar du projektmappen ms-identity-docs-code-dotnet/spa-blazor-wasm, som innehåller exemplet.

2. Öppna spa-blazor-wasm/wwwroot/appsettings.json och uppdatera följande värden med informationen som registrerades tidigare i administrationscentret.

   {
     "AzureAd": {
       "Authority": "https://login.microsoftonline.com/<Enter the tenant ID obtained from the Microsoft Entra admin center>",
       "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
       "ValidateAuthority": true
     }
   }
   

   • 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.
   • ClientId – Programmets identifierare, även kallad klienten. Ersätt texten inom citattecken med program-ID (klient)-ID:t värde som registrerades tidigare.

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.

   

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 react-spa
   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 har begärt 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.

   

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 angular-spa
   npm install
   npm start
   

2. Kopiera den https URL som visas i terminalen, till exempel https://localhost:4200och klistra in den i ett webbläsaradressfält. 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.

   

Kör projektet med en webbserver med hjälp av dotnet:

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

   cd spa-blazor-wasm
   dotnet workload install wasm-tools
   dotnet run
   

2. Kopiera den http URL som visas i terminalen, till exempel http://localhost:5000och 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.

   

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:3000/
• Lägga till ditt program i användarflödet
• Node.js

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:3000/
• Lägga till ditt program i användarflödet
• Node.js

• 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 konfigurationen för ensidesapplikationsplattformen. Mer information finns i Så här lägger du till en omdirigerings-URI i ditt program .
  • omdirigerings-URI: http://localhost:4200/
• Lägga till ditt program i användarflödet
• Node.js

• 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.

• 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.

• 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.

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.

1. Öppna SPA\src\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.

1. Öppna SPA/src/app/auth-config.ts 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.

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.

   

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

   cd 1-Authentication\1-sign-in-react\SPA
   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 i den externa klientorganisationen.

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.

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

   cd 1-Authentication\2-sign-in-angular\SPA
   npm install
   npm start
   

2. Kopiera den https URL som visas i terminalen, till exempel https://localhost:4200och 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 i den externa klientorganisationen.

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.