Inicio rápido: Inicio de sesión y obtención de un token de acceso en una SPA de React mediante el flujo de código de autorización
¡Bienvenido! Probablemente esta no sea la página que esperaba. Mientras trabajamos en una corrección, este vínculo debería llevarle al artículo correcto:
Lamentamos las molestias y agradecemos su paciencia mientras trabajamos para resolverlo.
En este inicio rápido descargará y ejecutará un código de ejemplo que muestra cómo una aplicación de página única de JavaScript React puede realizar el inicio de sesión de usuarios y llamar a Microsoft Graph API mediante el flujo de código de autorización. En el ejemplo de código se muestra cómo obtener un token de acceso para llamar a Microsoft Graph API o a cualquier API web.
Para ilustrar este tema, consulte el apartado en el que se explica el funcionamiento del ejemplo.
Requisitos previos
- Una suscripción a Azure: cree una de forma gratuita.
- Node.js
- Visual Studio Code u otro editor de código
Paso 1: Configuración de la aplicación en Azure Portal
Estos ejemplos de código requieren un URI de redirección de http://localhost:3000/.
La aplicación está configurada con estos atributos.
Paso 2: Descarga del proyecto
Ejecutar el proyecto con un servidor Web mediante Node.js
Nota:
Enter_the_Supported_Account_Info_Here
Paso 3: La aplicación está configurada y lista para ejecutarse
Hemos configurado el proyecto con los valores de las propiedades de su aplicación.
Paso 4: Ejecución del proyecto
Ejecute el proyecto con un servidor web mediante Node.js:
Para iniciar el servidor, ejecute los siguientes comandos desde el directorio del proyecto:
npm install npm startVaya a
http://localhost:3000/.Seleccione Iniciar sesión para iniciar el proceso de inicio de sesión y, luego, llame a Microsoft Graph API.
La primera vez que inicie sesión, se le pedirá que dé su consentimiento para permitir que la aplicación acceda a su perfil e inicie sesión automáticamente. Una vez que haya iniciado sesión correctamente, haga clic en Request Profile Information (Solicitar información del perfil) para mostrar la información del perfil en la página.
Más información
Funcionamiento del ejemplo
msal.js
La biblioteca MSAL.js inicia la sesión de los usuarios y solicita los tokens que se usan para acceder a una API protegida por la plataforma de identidad de Microsoft.
Si tiene Node.js instalado, también puede descargar la versión más reciente mediante el administrador de paquetes de Node.js (npm):
npm install @azure/msal-browser @azure/msal-react
Pasos siguientes
Para obtener una guía detallada paso a paso sobre cómo compilar la aplicación de flujo de código de autenticación mediante React, consulte el siguiente tutorial: