Guía rápida: Iniciar sesión de usuarios en una aplicación de página única (SPA) y realizar llamadas a la API de Microsoft Graph

Se aplica a: inquilinos de personal inquilinos externos (más información)

En este inicio rápido, usará una aplicación de página única (SPA) de ejemplo para mostrar cómo iniciar sesión a los usuarios mediante el flujo de código de autorización con la clave de prueba para Intercambio de código (PKCE) y llamar a Microsoft Graph API. En el ejemplo se usa la biblioteca de autenticación de Microsoft para controlar la autenticación.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si no tienes una, crea una cuenta gratis.
• Esta cuenta de Azure debe tener permisos para administrar aplicaciones. Cualquiera de los siguientes roles de Microsoft Entra incluye los permisos necesarios:
  • Administrador de aplicaciones
  • Desarrollador de aplicaciones
• Un inquilino trabajador Puede usar el directorio predeterminado o configurar un nuevo inquilino.
• Visual Studio Code u otro editor de código.

JavaScript

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/
• Node.js

Reaccionar

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/
• Node.js

Angular

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue el siguiente URI de redirección mediante la configuración de plataforma de aplicación de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:4200/
• Node.js

Blazor

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:5000/authentication/login-callback.
• SDK de .NET

Clonar o descargar la aplicación de ejemplo

Para obtener la aplicación de ejemplo, puede clonarla desde GitHub o descargarla como un archivo .zip.

JavaScript

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
  

• Descargue el archivo .zip. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Reaccionar

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
  

• Descargue el archivo .zip. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Angular

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
  

• Descargue el archivo .zip. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Blazor

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet.git
  

• Descargue el archivo .zip. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Configuración del proyecto

JavaScript

1. En el IDE, abra la carpeta del proyecto, ms-identity-docs-code-javascript, que contiene el ejemplo.

2. Abra vanillajs-spa/App/public/authConfig.js y actualice los valores siguientes con la información registrada en el centro de administración.

   /**
    * 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://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: el identificador de la aplicación, también conocido como el cliente. Reemplace el texto entre comillas por el valor de Id. de aplicación (cliente) que se registró anteriormente.
   • authority: la autoridad es una dirección URL que indica un directorio desde el que MSAL puede solicitar tokens. Reemplace Enter_the_Tenant_Info_Here por el valor de Identificador de directorio (inquilino) que se registró anteriormente.
   • redirectUri: el identificador URI de redireccionamiento de la aplicación. Si es necesario, reemplace el texto entre comillas por el URI de redirección que se registró anteriormente.

Reaccionar

1. En el IDE, abra la carpeta del proyecto, ms-identity-docs-code-javascript/react-spa, que contiene el ejemplo.

2. Abra react-spa/src/authConfig.js y actualice los valores siguientes con la información registrada en el centro de administración.

   /*
    * 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: el identificador de la aplicación, también conocido como el cliente. Reemplace el texto entre comillas por el valor de Id. de aplicación (cliente) que se registró anteriormente.
   • authority: la autoridad es una dirección URL que indica un directorio desde el que MSAL puede solicitar tokens. Reemplace Enter_the_Tenant_Info_Here por el valor de Identificador de directorio (inquilino) que se registró anteriormente.
   • redirectUri: el identificador URI de redireccionamiento de la aplicación. Si es necesario, reemplace el texto entre comillas por el URI de redirección que se registró anteriormente.

Angular

1. En el IDE, abra la carpeta del proyecto, ms-identity-docs-code-javascript/angular-spa, que contiene el ejemplo.

2. Abra angular-spa/src/app/app.module.ts y actualice los valores siguientes con la información registrada en el centro de administración.

   // 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: el identificador de la aplicación, también conocido como el cliente. Reemplace el texto entre comillas por el valor de Id. de aplicación (cliente) que se registró anteriormente.
   • authority: la autoridad es una dirección URL que indica un directorio desde el que MSAL puede solicitar tokens. Reemplace Enter_the_Tenant_Info_Here por el valor de Identificador de directorio (inquilino) que se registró anteriormente.
   • redirectUri: el identificador URI de redireccionamiento de la aplicación. Si es necesario, reemplace el texto entre comillas por el URI de redirección que se registró anteriormente.

Blazor

1. En el IDE, abra la carpeta del proyecto, ms-identity-docs-code-dotnet/spa-blazor-wasm, que contiene el ejemplo.

2. Abra spa-blazor-wasm/wwwroot/appsettings.json y actualice los valores siguientes con la información registrada anteriormente en el centro de administración.

   {
     "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: la autoridad es una dirección URL que indica un directorio desde el que MSAL puede solicitar tokens. Reemplace Enter_the_Tenant_Info_Here por el valor de Identificador de directorio (inquilino) que se registró anteriormente.
   • ClientId: el identificador de la aplicación, también conocido como el cliente. Reemplace el texto entre comillas por el valor de Id. de aplicación (cliente) que se registró anteriormente.

Ejecuta la aplicación e inicia y cierra sesión.

JavaScript

Ejecute el proyecto con un servidor web mediante Node.js:

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd vanillajs-spa/App
   npm install
   npm start
   

2. Copie la dirección URL de https que aparece en el terminal, por ejemplo, https://localhost:3000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Siga los pasos y escriba los detalles necesarios para iniciar sesión con su cuenta Microsoft. Se le pedirá una dirección de correo electrónico para enviarle una contraseña de uso único. Escriba el código cuando se le solicite.

4. La aplicación solicitará permiso para mantener el acceso a los datos a los que usted le haya dado acceso, así como para iniciar sesión y leer su perfil. Seleccione Aceptar. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Reaccionar

Ejecute el proyecto con un servidor web mediante Node.js:

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd react-spa
   npm install
   npm start
   

2. Copie la dirección URL de https que aparece en el terminal, por ejemplo, https://localhost:3000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Siga los pasos y escriba los detalles necesarios para iniciar sesión con su cuenta Microsoft. Se le solicita una dirección de correo electrónico para que se pueda enviar un código de acceso de una sola vez. Escriba el código cuando se le solicite.

4. La aplicación solicita permiso para mantener el acceso a los datos a los que le ha concedido acceso y para iniciar sesión y leer el perfil. Seleccione Aceptar. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Angular

Ejecute el proyecto con un servidor web mediante Node.js:

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd angular-spa
   npm install
   npm start
   

2. Copie la https dirección URL que aparece en el terminal, por ejemplo, https://localhost:4200y péguela en una barra de direcciones del explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Siga los pasos y escriba los detalles necesarios para iniciar sesión con su cuenta Microsoft. Se le pedirá una dirección de correo electrónico para enviarle una contraseña de uso único. Escriba el código cuando se le solicite.

4. La aplicación solicitará permiso para mantener el acceso a los datos a los que usted le haya dado acceso, así como para iniciar sesión y leer su perfil. Seleccione Aceptar. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Blazor

Ejecute el proyecto con un servidor web mediante dotnet:

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

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

2. Copie la dirección URL de http que aparece en el terminal, por ejemplo, http://localhost:5000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Siga los pasos y escriba los detalles necesarios para iniciar sesión con su cuenta Microsoft. Se le pedirá una dirección de correo electrónico para enviarle una contraseña de uso único. Escriba el código cuando se le solicite.

4. La aplicación solicitará permiso para mantener el acceso a los datos a los que usted le haya dado acceso, así como para iniciar sesión y leer su perfil. Seleccione Aceptar. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. Si no tienes una, crea una cuenta gratis.
• Esta cuenta de Azure debe tener permisos para administrar aplicaciones. Cualquiera de los siguientes roles de Microsoft Entra incluye los permisos necesarios:
  • Administrador de aplicaciones
  • Desarrollador de aplicaciones
• Un inquilino externo. Para crear uno, elija entre los métodos siguientes:
  • Use la extensión Microsoft Entra External ID para configurar un inquilino externo directamente en Visual Studio Code. (Recomendado)
  • Crear un nuevo inquilino externo en el Centro de administración de Microsoft Entra.
• Flujo de usuario. Para más información, consulte Creación de flujos de usuario de registro de autoservicio para aplicaciones en inquilinos externos. Este flujo de usuario se puede usar para varias aplicaciones.
• Visual Studio Code u otro editor de código.

JavaScript

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/
• Adición de la aplicación al flujo de usuario
• Node.js

Reaccionar

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:3000/
• Adición de la aplicación al flujo de usuario
• Node.js

Angular

• Registre una nueva aplicación en el Centro de administración de Microsoft Entra, configurada solo para Cuentas en este directorio organizativo. Consulte Registro de una aplicación para obtener más detalles. Registre los valores siguientes en la página Información general de la aplicación para su uso posterior:
  • Id. de aplicación (cliente)
  • Id. de directorio (inquilino)
• Agregue los siguientes URI de redirección mediante la configuración de la plataforma de aplicaciones de página única. Consulte How to add a redirect URI in your application (Cómo agregar un URI de redirección en la aplicación ) para obtener más detalles.
  • URI de redirección: http://localhost:4200/
• Adición de la aplicación al flujo de usuario
• Node.js

Clonar o descargar SPA de ejemplo

Para obtener la aplicación de ejemplo, puede clonarla desde GitHub o descargarla como un archivo .zip.

JavaScript

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Descargue el ejemplo. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Reaccionar

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Descargue el ejemplo. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Angular

• Para clonar el ejemplo, abra un símbolo del sistema y vaya a dónde desea crear el proyecto y escriba el siguiente comando:

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Descargue el ejemplo. Extráigalo en una ruta de archivo donde la longitud del nombre sea inferior a 260 caracteres.

Configuración de la SPA de ejemplo

JavaScript

1. Abra App/public/authConfig.js y reemplace lo siguiente por los valores obtenidos del Centro de administración de Microsoft Entra:

   • Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.
   • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

2. Guarde el archivo.

Reaccionar

1. Abra SPA\src\authConfig.js y reemplace lo siguiente por los valores obtenidos del Centro de administración de Microsoft Entra:

   • Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.
   • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

2. Guarde el archivo.

Angular

1. Abra SPA/src/app/auth-config.ts y reemplace lo siguiente por los valores obtenidos del Centro de administración de Microsoft Entra:

   • Enter_the_Application_Id_Here y reemplázalo por el ID de cliente (aplicación) de la aplicación que registraste anteriormente.
   • Enter_the_Tenant_Subdomain_Here y reemplácelo por el subdominio Directorio (inquilino). Por ejemplo, si el dominio principal del cliente es contoso.onmicrosoft.com, utilice contoso. Si no tiene el nombre del inquilino, aprenda a leer los detalles del inquilino.

2. Guarde el archivo.

Ejecute su proyecto e inicie sesión

JavaScript

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd 1-Authentication\0-sign-in-vanillajs\App
   npm install
   npm start
   

2. Copie la dirección URL de https que aparece en el terminal, por ejemplo, https://localhost:3000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Inicie sesión con una cuenta registrada en el inquilino.

4. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Reaccionar

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

   cd 1-Authentication\1-sign-in-react\SPA
   npm install
   npm start
   

2. Copie la dirección URL de https que aparece en el terminal, por ejemplo, https://localhost:3000y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Inicie sesión con una cuenta registrada en el inquilino externo.

4. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

Angular

1. Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:

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

2. Copie la dirección URL de https que aparece en el terminal, por ejemplo, https://localhost:4200y péguela en un explorador. Se recomienda usar una sesión privada o incógnita del explorador.

3. Inicie sesión con una cuenta registrada en el inquilino externo.

4. Aparece la captura de pantalla siguiente, que indica que ha iniciado sesión en la aplicación y ha accedido a los detalles del perfil desde Microsoft Graph API.

   

Cerrar sesión de la aplicación

1. Busque el botón Cerrar sesión en la página y selecciónelo.
2. Se le solicitará seleccionar una cuenta para cerrar sesión. Seleccione la cuenta que usó para iniciar sesión.

Aparece un mensaje que indica que ha cerrado la sesión. Ahora puede cerrar la ventana del explorador.

Contenido relacionado

• Inicio rápido: Protección de una API web de ASP.NET Core con la plataforma de identidad de Microsoft.
• Aprende más creando una SPA de React que inicia sesión a los usuarios en la siguiente serie de tutoriales de varias partes.
• Habilite el restablecimiento de contraseña.
• Personalice la marca predeterminada.
• Configure el inicio de sesión con Google.