Inicio rápido: Configuración del inicio de sesión de una aplicación de página única mediante Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) proporciona administración de identidades en la nube para mantener la protección de su aplicación, empresa y clientes. Azure AD B2C permite que las aplicaciones puedan autenticarse con cuentas de redes sociales y cuentas de empresa mediante protocolos estándar abiertos.

En esta guía de inicio rápido, se utiliza una aplicación de página única para iniciar sesión mediante un proveedor de identidades de redes sociales y llamar a una API web protegida por Azure AD B2C.

Prerrequisitos

• Visual Studio Code

• Node.js

• Cuenta de redes sociales de Facebook, Google o Microsoft

• Ejemplo de código de GitHub: ms-identity-b2c-javascript-spa:

  Puede descargar el archivo .zip o clonar el repositorio.

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

Ejecución de la aplicación

1. Inicie el servidor mediante la ejecución de los siguientes comandos desde el símbolo del sistema de Node.js:

   npm install
   npm update
   npm start
   

   El servidor que server.js inicia muestra el puerto en el que está escuchando:

   Listening on port 6420...
   

2. Vaya a la dirección URL de la aplicación. Por ejemplo, http://localhost:6420.

Inicio de sesión mediante su cuenta

1. Seleccione Iniciar sesión para iniciar el recorrido del usuario.

2. Azure AD B2C presenta una página de inicio de sesión para una empresa ficticia llamada "Fabrikam" para la aplicación web de ejemplo. Para registrarse con un proveedor de identidades de redes sociales, seleccione el botón del proveedor de identidades que desee usar.

   

   Debe autenticarse (iniciar sesión) con las credenciales de su cuenta de redes sociales y autorizar a la aplicación para que lea la información de su cuenta de redes sociales. Al conceder acceso, la aplicación puede recuperar la información del perfil de la cuenta de redes sociales como el nombre y la ciudad.

3. Finalice el proceso de inicio de sesión para el proveedor de identidades.

Acceso a un recurso de API protegido

Seleccione Call API (Llamar a la API) para obtener el nombre para mostrar de la llamada de API web como un objeto JSON.

La aplicación de página única de ejemplo incluye un token de acceso en la solicitud al recurso de API web protegido.

Pasos siguientes

• Introducción a la creación del inquilino de Azure Active Directory B2C en Azure Portal