Tutorial: Configuración de Azure Active Directory B2C con la plataforma de Arkose Labs

En este tutorial, obtendrá información sobre cómo integrar la autenticación de Azure Active Directory B2C (Azure AD B2C) con Arkose Protect Platform de Arkose Labs. Los productos de Arkose Labs ayudan a las organizaciones contra ataques de bots, toma de control de cuentas y aperturas de cuentas fraudulentas.

Requisitos previos

Para empezar, necesitará lo siguiente:

• Una suscripción de Azure
  • Si no tiene una, puede obtener una cuenta gratuita de Azure
• Un inquilino de Azure AD B2C vinculado a la suscripción de Azure
• Una cuenta de Arkose Labs
  • Vaya a arkoselabs.com para solicitar una demostración.

Descripción del escenario

La integración de los productos de Arkose Labs incluye los siguientes componentes:

• Arkose Protect Platform: un servicio para protegerse contra bots y otros abusos automatizados
• Flujo de usuario de registro de Azure AD B2C: la experiencia de registro que usa la plataforma de Arkose Labs
  • Los conectores para HTML, JavaScript y API personalizados se integran con la plataforma de Arkose.
• Azure Functions: punto de conexión de API hospedado que funciona con la característica de conectores de API
  • Esta API valida el lado del servidor del token de sesión de Arkose Labs.
  • Para más información, consulte Introducción a Azure Functions.

En el diagrama siguiente, se describe cómo se integra la plataforma de Arkose Labs con Azure AD B2C.

1. Un usuario se registra y crea una cuenta. El usuario selecciona Enviar y aparece un desafío de cumplimiento de Arkose Labs.
2. El usuario completa el desafío. Azure AD B2C envía el estado a Arkose Labs para generar un token.
3. Arkose Labs envía el token a Azure AD B2C.
4. Azure AD B2C llama a una API web intermedia para pasar el formulario de registro.
5. El formulario de registro va a Arkose Labs para la comprobación de los tokens.
6. Arkose Labs envía los resultados de la comprobación a la API web intermedia.
7. La API envía un resultado correcto o de error a Azure AD B2C.
8. Si el desafío se realiza correctamente, el formulario de registro va a Azure AD B2C, que completa la autenticación.

Solicitar una demostración de Arkose Labs

1. Vaya a arkoselabs.com para reservar una demostración.
2. Cree una cuenta.
3. Vaya a la página de inicio de sesión del portal de Arkose.
4. En el panel, vaya a la configuración del sitio.
5. Busque la clave pública y la clave privada. Usará esta información más adelante.

Nota

Los valores de la clave pública y privada son ARKOSE_PUBLIC_KEY y ARKOSE_PRIVATE_KEY. Consulte Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.

Integración con Azure AD B2C

Creación de un atributo personalizado ArkoseSessionToken

Para crear un atributo personalizado:

1. Inicie sesión en Azure Portal y luego vaya a Azure AD B2C.
2. Seleccione Atributos de usuario.
3. Seleccione Agregar.
4. Escriba ArkoseSessionToken como nombre de atributo.
5. Seleccione Crear.

Más información: Definición de atributos personalizados en Azure Active Directory B2C

Creación de un flujo de usuario

El flujo de usuario es para el registro y el inicio de sesión, o para el registro. El flujo de usuario de Arkose Labs aparece durante el registro.

1. Cree flujos de usuario y directivas personalizadas en Azure Active Directory B2C. Si usa un flujo de usuario, use Recomendado.

2. En la configuración del flujo de usuario, vaya a Atributos de usuario.

3. Seleccione la notificación ArkoseSessionToken.

   

Configuración de diseños de página, HTML y JavaScript personalizados

1. Vaya a Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
2. Busque la plantilla HTML con etiquetas <script> de JavaScript. Hacen tres cosas:

• Cargue el script de Arkose Labs, que representa su widget y realiza la validación de Arkose Labs del lado del cliente.

• Oculte el elemento de entrada y la etiqueta extension_ArkoseSessionToken, correspondientes al atributo personalizado ArkoseSessionToken.

• Cuando un usuario completa el desafío de Arkose Labs, se comprueba la respuesta del usuario y se genera un token. La devolución de llamada arkoseCallback en JavaScript personalizado establece el valor de extension_ArkoseSessionToken en el valor del token generado. Este valor se envía al punto de conexión de la API.

  Nota:

  Vaya a developer.arkoselabs.com para obtener las instrucciones del lado del cliente. Siga los pasos para usar el código HTML y JavaScript personalizado en el flujo de usuario.

3. En Azure-Samples, modifique el archivo selfAsserted.html para que <ARKOSE_PUBLIC_KEY> coincida con el valor que generó para la validación del lado del cliente.

4. Hospede la página HTML en un punto de conexión web habilitado para el uso compartido de recursos entre orígenes (CORS).

5. Crear una cuenta de almacenamiento.

6. Compatibilidad con el uso compartido de recursos entre orígenes (CORS) para Azure Storage.

   Nota

   Si tiene código HTML personalizado, copie y pegue los elementos <script> en la página HTML.

7. En Azure Portal, vaya a Azure AD B2C.

8. Vaya a Flujos de usuario.

9. Seleccione el flujo de usuario.

10. Seleccione Diseños de página.

11. Seleccione el diseño Página de registro de cuenta local.

12. En Usar contenido de la página personalizada, seleccione Sí.

13. En Usar contenido de la página personalizada, pegue el identificador URI del código HTML personalizado.

14. (Opcional) Si usa proveedores de identidades sociales, repita los pasos de la página de registro de la cuenta social.

    

15. En el flujo de usuario, vaya a Propiedades.

16. Seleccione Habilitar JavaScript.

Habilitación de JavaScript y las versiones de diseño de página en Azure Active Directory B2C

Creación e implementación de la API

En esta sección, se da por supuesto que usa Visual Studio Code para implementar Azure Functions. Puede usar Azure Portal, el terminal o el símbolo del sistema para la implementación.

Vaya a Visual Studio Marketplace para instalar Azure Functions para Visual Studio Code.

Ejecución local de la API

1. En Visual Studio Code, en el panel de navegación izquierdo, vaya a la extensión de Azure.
2. Seleccione la carpeta del proyecto local de la función de Azure local.
3. Pulse F5 o seleccione Depurar>Iniciar depuración. Este comando utiliza la configuración de depuración de la función de Azure creada.
4. La función de Azure genera archivos para el desarrollo local, instala las dependencias y Azure Functions Core Tools, si es necesario.
5. La salida de Azure Functions Core Tools aparece en el panel Terminal de Visual Studio Code.
6. Cuando se inicie el host, seleccione Alt+clic en la dirección URL local en la salida.
7. El explorador se abre y ejecuta la función.
8. En el explorador de Azure Functions, haga clic con el botón derecho en la función para ver la dirección URL de la función hospedada localmente.

Adición de las variables de entorno

El ejemplo de esta sección protege el punto de conexión de la API web cuando se usa la autenticación básica de HTTP. Obtenga más información en la página del Grupo de tareas de ingeniería de Internet (IETF) RFC 7617: autenticación básica.

El nombre de usuario y la contraseña se almacenan como variables de entorno y no como parte del repositorio. Obtenga más información en Codificación y comprobación de las funciones de Azure Functions en un entorno local (Archivo de configuración local).

1. En la carpeta raíz, cree un archivo local.settings.json.
2. Copie y pegue el siguiente código en el archivo:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "BASIC_AUTH_USERNAME": "<USERNAME>",
    "BASIC_AUTH_PASSWORD": "<PASSWORD>",
    "ARKOSE_PRIVATE_KEY": "<ARKOSE_PRIVATE_KEY>",
    "B2C_EXTENSIONS_APP_ID": "<B2C_EXTENSIONS_APP_ID>"
  }
}

3. Los elementos BASIC_AUTH_USERNAME y BASIC_AUTH_PASSWORD son las credenciales para autenticar la llamada API en la función de Azure. Seleccione los valores.

• <ARKOSE_PRIVATE_KEY> es el secreto del lado del servidor que generó en la plataforma de Arkose Labs.
  • Se llama a la API de validación del lado del servidor de Arkose Labs para validar el valor de ArkoseSessionToken generado por el front-end.
  • Consulte Instrucciones del lado del servidor.
• <B2C_EXTENSIONS_APP_ID> es el identificador de la aplicación que usa Azure AD B2C para almacenar los atributos personalizados en el directorio.

4. Vaya a Registros de aplicaciones.

5. Busque b2c-extensions-app.

6. En el panel Información general, copie el identificador de aplicación (cliente).

7. Quite los caracteres -.

   

Implementación de la aplicación en la web

1. Implemente la función de Azure en la nube. Obtenga más información en la documentación de Azure Functions.

2. Copie la dirección URL web del punto de conexión de la función de Azure.

3. Después de la implementación, seleccione la opción Configuración de carga.

4. Las variables de entorno se cargan en la configuración de la aplicación de la instancia de App Service. Obtenga más información en Configuración de la aplicación en Azure.

   Nota:

   Puede administrar la aplicación de funciones. Consulte también Implementación de los archivos de proyecto para obtener información sobre el desarrollo con Visual Studio Code para Azure Functions.

Configuración y habilitación del conector de API

1. Cree un conector de API. Consulte Adición de un conector de API a un flujo de usuario de registro.

2. Habilítelo para el flujo de usuario.

   

• Dirección URL del punto de conexión: dirección URL de la función que copió mientras implementaba la función de Azure
• Nombre de usuario: nombre de usuario que ha definido
• Contraseña: contraseña que ha definido

3. En la opción API connector del flujo de usuario, seleccione el conector de API que se va a invocar con la opción Antes de crear el usuario.

4. La API valida el valor de ArkoseSessionToken.

   

Prueba del flujo de usuario

1. Abra el inquilino de Azure AD B2C.
2. En Directivas, seleccioneFlujos de usuario.
3. Seleccione el flujo de usuario que ha creado.
4. Seleccione Ejecutar flujo de usuario.
5. En Aplicación, seleccione la aplicación registrada (el ejemplo es JWT).
6. En Dirección URL de respuesta, seleccione la dirección URL de redireccionamiento.
7. Seleccione Ejecutar flujo de usuario.
8. Lleve a cabo el flujo de registro.
9. Cree una cuenta.
10. Cierre la sesión.
11. Lleve a cabo el flujo de inicio de sesión.
12. Seleccione Continuar.
13. Aparece un rompecabezas de Arkose Labs.

Recursos

• Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose
  • Búsqueda del flujo de usuario de registro de Azure AD B2C
• Información general sobre las directivas personalizadas de Azure AD B2C
• Tutorial: Creación de flujos de usuario y directivas personalizadas en Azure Active Directory B2C