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

Importante

A partir del 1 de mayo de 2025, Azure AD B2C ya no estará disponible para ser adquirido por nuevos clientes. Obtenga más información en nuestras preguntas más frecuentes.

En este tutorial, aprenderá a integrar la autenticación de Azure Active Directory B2C (Azure AD B2C) con la plataforma Arkose Protect de Arkose Labs . Los productos de Arkose Labs ayudan a las organizaciones contra los ataques de bots, la apropiación de cuentas y las aperturas de cuentas fraudulentas.

Prerrequisitos

Para empezar, necesitará lo siguiente:

• Una suscripción a Azure
  • Si no tiene una, puede obtener una cuenta gratuita de Azure.
• Un inquilino de Azure AD B2C vinculado a su 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 Arkose Labs
  • Los conectores personalizados de HTML, JavaScript y API se integran con la plataforma 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
  • Obtenga más información en la información general de Azure Functions

En el diagrama siguiente se muestra cómo se integra la plataforma 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 verificación del token.
6. Arkose Labs envía los resultados de la verificación a la API web intermedia.
7. La API envía un resultado correcto o incorrecto a Azure AD B2C.
8. Si el desafío se realiza correctamente, se envía un formulario de registro a Azure AD B2C, que completa la autenticación.

Solicite 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 Arkose .
4. En el panel de control, vaya a la configuración del sitio.
5. Localiza tu clave pública y tu clave privada. Vas a usar esta información más adelante.

Nota:

Los valores de 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, a continuación, vaya a Azure AD B2C.
2. Seleccione Atributos de usuario.
3. Selecciona Agregar.
4. Escriba ArkoseSessionToken como nombre del atributo.
5. Selecciona 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.

   

Configurar HTML, JavaScript y diseño de página personalizados

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

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

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

• Cuando un usuario completa el desafío de Arkose Labs, se verifica 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 instruccionesClient-Side. Siga los pasos para usar el HTML y JavaScript personalizados para el flujo de usuario.

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

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

5. Crear una cuenta de almacenamiento.

6. Compatibilidad de CORS con Azure Storage.

   Nota:

   Si tiene HTML personalizado, copie y pegue los <script> elementos en su 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 Diseño de página de registro de cuenta local.

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

13. En Usar contenido de página personalizada, pegue el URI de HTML personalizado.

14. (Opcional) Si usas proveedores de identidades sociales, repite los pasos de la página de registro de cuentas sociales.

    

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

16. Seleccione Habilitar JavaScript.

Más información: Habilitación de versiones de JavaScript y diseño de página en Azure Active Directory B2C

Creación e implementación de la API

En esta sección se supone 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.

Ejecutar de manera local 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 Proyecto local de la función de Azure local.
3. Presione F5 o seleccione Depurar>Iniciar depuración. Este comando utiliza la configuración de depuración de la función de Azure creada.
4. Azure Function genera archivos para el desarrollo local, instala dependencias y las herramientas principales de funciones, si es necesario.
5. En el panel Terminal de Visual Studio Code, aparece la salida de la herramienta Function Core.
6. Cuando se inicie el host, seleccione Alt+clic en la dirección URL local en la salida.
7. El navegador 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 variables de entorno

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

El nombre de usuario y la contraseña se almacenan como variables de entorno, no forman parte del repositorio. Obtenga más información sobre Codificar y probar Azure Functions localmente, 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. El BASIC_AUTH_USERNAME y el BASIC_AUTH_PASSWORD son las credenciales para autenticar la llamada API a 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 aplicación que usa Azure AD B2C para almacenar 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 ID de aplicación (cliente).

7. Elimine los - caracteres.

   

Implementación de la aplicación en la web

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

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

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 sobre Configuración de la aplicación en Azure.

   Nota:

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

Configurar y habilitar el conector de API

1. Cree un conector de API. Consulte Agregar un conector de API a un flujo de usuario de registro.

2. Habilítelo para su flujo de usuario.

   

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

3. En la configuración del conector de API para el flujo de usuario, seleccione el conector de API que se invocará en Antes de crear el usuario.

4. La API valida el ArkoseSessionToken valor.

   

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 creado.
4. Seleccione Ejecutar flujo de usuario.
5. En Aplicación , seleccione la aplicación registrada (el ejemplo es JWT).
6. En 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. Selecciona 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
• Introducción a la directiva personalizada de Azure AD B2C
• Tutorial: Creación de flujos de usuario y directivas personalizadas en Azure Active Directory B2C