Inicio rápido: Configuración del inicio de sesión para 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 protegida la aplicación, la empresa y los clientes. Azure AD B2C permite a las aplicaciones autenticarse en cuentas sociales y cuentas empresariales mediante protocolos estándar abiertos.

En este inicio rápido, usará una aplicación de página única para iniciar sesión con un proveedor de identidades sociales y llamar a una API web protegida de Azure AD B2C.

Prerrequisitos

• Visual Studio Code

• Node.js

• Cuenta social 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
  

Ejecutar la aplicación

1. Inicie el servidor ejecutando los siguientes comandos desde la ventana de comandos de Node.js:

   npm install
   npm update
   npm start
   

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

   Listening on port 6420...
   

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

Inicio de sesión con 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 denominada "Fabrikam" para la aplicación web de ejemplo. Para registrarse con un proveedor de identidades sociales, seleccione el botón del proveedor de identidades que desea usar.

   

   Puede autenticarse (iniciar sesión) con sus credenciales de cuenta social y autorizar a la aplicación a leer información de su cuenta social. Al conceder acceso, la aplicación puede recuperar información de perfil de la cuenta social, como su nombre y 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

• Comience a crear su propio tenant de Azure Active Directory B2C en el portal de Azure