Tutorial: Configurar o Azure Ative Directory B2C com a plataforma Arkose Labs

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais nas nossas Perguntas Frequentes.

Neste tutorial, saiba como integrar a autenticação do Azure Ative Directory B2C (Azure AD B2C) com a Arkose Labs Arkose Protect Platform. Os produtos da Arkose Labs ajudam as organizações contra ataques de bots, invasão de contas e aberturas fraudulentas de contas.

Pré-requisitos

Para começar, você precisará:

• Uma assinatura do Azure
  • Se não tiver uma, pode obter uma conta gratuita do Azure
• Um tenant do Azure AD B2C vinculado à sua assinatura do Azure
• Uma conta Arkose Labs
  • Ir para arkoselabs.com para solicitar uma demonstração

Descrição do cenário

A integração dos produtos Arkose Labs inclui os seguintes componentes:

• Arkose Protect Platform - Um serviço para proteger contra bots e outros abusos automatizados
• Fluxo de usuário de inscrição do Azure AD B2C - A experiência de inscrição que usa a plataforma Arkose Labs
  • Conectores HTML, JavaScript e API personalizados integram-se com a plataforma Arkose
• Azure Functions - O seu ponto de extremidade de API hospedado, compatível com o recurso de conectores de API
  • Esta API valida o token de sessão do Arkose Labs no lado do servidor.
  • Saiba mais na Visão geral do Azure Functions

O diagrama a seguir ilustra como a plataforma Arkose Labs se integra ao Azure AD B2C.

1. Um usuário se inscreve e cria uma conta. O usuário seleciona Enviar e um desafio de imposição do Arkose Labs aparece.
2. O usuário completa o desafio. O Azure AD B2C envia o status para o Arkose Labs para gerar um token.
3. A Arkose Labs envia o token para o Azure AD B2C.
4. O Azure AD B2C chama uma API Web intermediária para passar o formulário de inscrição.
5. O formulário de inscrição vai para Arkose Labs para verificação de token.
6. A Arkose Labs envia os resultados da verificação para a API web intermediária.
7. A API envia um resultado de sucesso ou falha para o Azure AD B2C.
8. Se o desafio for bem-sucedido, um formulário de inscrição vai para o Azure AD B2C, que conclui a autenticação.

Solicite uma demonstração da Arkose Labs

1. Aceda a arkoselabs.com para reservar uma demonstração.
2. Crie uma conta.
3. Navegue até a página de login do Arkose Portal .
4. No painel, navegue até as configurações do site.
5. Localize a sua chave pública e a chave privada. Você usará essas informações mais tarde.

Observação

Os valores-chave públicos e privados são ARKOSE_PUBLIC_KEY e ARKOSE_PRIVATE_KEY. Consulte Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.

Integrar com o Azure AD B2C

Criar um atributo personalizado ArkoseSessionToken

Para criar um atributo personalizado:

1. Entre no portal do Azure e navegue até Azure AD B2C.
2. Selecione Atributos do utilizador.
3. Selecione Adicionar.
4. Digite ArkoseSessionToken como o nome do atributo.
5. Selecione Criar.

Saiba mais: Definir atributos personalizados no Azure Ative Directory B2C

Criar um fluxo de usuário

O fluxo de utilizador é para registo e início de sessão, ou apenas registo. O fluxo de utilizadores do Arkose Labs aparece durante o registo.

1. Crie fluxos de usuário e políticas personalizadas no Azure Ative Directory B2C. Se estiver usando um fluxo de usuário, use Recomendado.

2. Nas configurações de fluxo do usuário, vá para Atributos do usuário.

3. Selecione a declaração ArkoseSessionToken .

   

Configurar HTML, JavaScript e layout de página personalizados

1. Aceda a Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
2. Encontre o modelo HTML com tags JavaScript <script> . Estes fazem três coisas:

• Carregue o script do Arkose Labs, que renderiza seu widget e faz a validação do Arkose Labs do lado do cliente.

• Oculte o rótulo extension_ArkoseSessionToken e o elemento de entrada, correspondentes ao atributo personalizado ArkoseSessionToken.

• Quando um usuário conclui o desafio Arkose Labs, a resposta do usuário é verificada e um token é gerado. A callback arkoseCallback no JavaScript personalizado define o valor de extension_ArkoseSessionToken para o valor do token gerado. Esse valor é enviado para o ponto de extremidade da API.

  Observação

  Vá para developer.arkoselabs.com para obterClient-Side instruções. Siga as etapas para usar o HTML e JavaScript personalizados para seu fluxo de usuário.

3. No Azure-Samples, modifique selfAsserted.html arquivo para que <ARKOSE_PUBLIC_KEY> corresponda ao valor gerado para a validação do lado do cliente.

4. Hospede a página HTML num endpoint web com CORS (Cross-Origin Resource Sharing) ativo.

5. Crie uma conta de armazenamento.

6. Suporte CORS para o Armazenamento do Azure.

   Observação

   Se você tiver HTML personalizado, copie e cole os <script> elementos em sua página HTML.

7. No portal do Azure, vá para Azure AD B2C.

8. Navegue até Fluxos de usuário.

9. Selecione seu fluxo de usuário.

10. Selecione Layouts de página.

11. Selecione Layout da página de inscrição da conta local.

12. Em Usar conteúdo de página personalizado, selecione SIM.

13. Em Usar conteúdo de página personalizado, cole o URI HTML personalizado.

14. (Opcional) Se você usa provedores de identidade social, repita as etapas para a página de inscrição de conta social.

    

15. No fluxo de usuários, vá para Propriedades.

16. Selecione Ativar JavaScript.

Saiba mais: Habilitar JavaScript e versões de layout de página no Azure Ative Directory B2C

Crie e implante sua API

Esta seção pressupõe que você use o Visual Studio Code para implantar o Azure Functions. Você pode usar o portal, terminal ou prompt de comando do Azure para implantar.

Vá para Visual Studio Marketplace para instalar o Azure Functions for Visual Studio Code.

Executar a API localmente

1. No código do Visual Studio, na navegação à esquerda, vá para a extensão do Azure.
2. Selecione a pasta Projeto Local para sua Função do Azure local.
3. Pressione F5 ou selecione Depurar>Iniciar Depuração. Este comando utiliza a configuração de depuração criada para a Função do Azure.
4. O Azure Function gera arquivos para desenvolvimento local, instala dependências e as ferramentas Function Core, se necessário.
5. No painel Terminal do Visual Studio Code, a saída da ferramenta Function Core é exibida.
6. Quando o host é iniciado, selecione Alt+clique na URL local na saída.
7. O navegador abre e executa a função.
8. No explorador do Azure Functions, clique com o botão direito do rato na função para ver o URL da função alojada localmente.

Adicionar variáveis de ambiente

O exemplo nesta seção protege o ponto de extremidade da API da Web ao usar a autenticação HTTP Básica. Saiba mais na página da Internet Engineering Task Force RFC 7617: A autenticação básica.

O nome de usuário e a senha são armazenados como variáveis de ambiente, não como parte do repositório. Saiba mais em Código e teste o Azure Functions localmente, Arquivo de configurações locais.

1. Na pasta raiz, crie um arquivo local.settings.json.
2. Copie e cole o seguinte código no arquivo:

{
  "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. O BASIC_AUTH_USERNAME e BASIC_AUTH_PASSWORD são as credenciais para autenticar a chamada de API para sua Função do Azure. Selecione valores.

• < > ARKOSE_PRIVATE_KEY é o segredo do lado do servidor que você gerou na plataforma Arkose Labs.
  • Ele chama a API de validação do lado do servidor do Arkose Labs para validar o valor do ArkoseSessionToken gerado pelo front-end.
  • Consulte Server-Side Instruções.
• < > B2C_EXTENSIONS_APP_ID é a ID do aplicativo usada pelo Azure AD B2C para armazenar atributos personalizados no diretório.

4. Navegue até Registos de aplicações.

5. Pesquise por b2c-extensions-app.

6. No painel Visão geral , copie a ID do aplicativo (cliente).

7. Remova os - caracteres.

   

Implantar o aplicativo na Web

1. Implante sua Função do Azure na nuvem. Saiba mais com a documentação do Azure Functions.

2. Copie a URL da Web do ponto de extremidade da sua Função do Azure.

3. Após a implantação, selecione a opção Carregar configurações .

4. As suas variáveis de ambiente são carregadas nas configurações da aplicação do serviço de aplicação. Saiba mais sobre Configurações do aplicativo no Azure.

   Observação

   Você pode gerenciar seu aplicativo de função. Consulte também, Implantar arquivos de projeto para saber mais sobre o desenvolvimento de código do Visual Studio para o Azure Functions.

Configurar e habilitar o conector de API

1. Crie um conector de API. Veja, Adicionar um conector de API a um fluxo de registo de utilizador.

2. Habilite-o para seu fluxo de usuários.

   

• Endpoint URL - A URL da Função que você/tu copiou quando implantaste/desenvolveste a Azure Function
• Nome de usuário - O nome de usuário que você definiu
• Palavra-passe - A palavra-passe que definiu

3. Nas configurações do conector de API para seu fluxo de usuário, selecione o conector de API a ser invocado em Antes de criar o usuário.

4. A API valida o ArkoseSessionToken valor.

   

Testar o fluxo do usuário

1. Abra o locatário do Azure AD B2C.
2. Em Políticas, selecione Fluxos de utilizadores.
3. Selecione o fluxo de usuário criado.
4. Selecione Executar fluxo de utilizador.
5. Em Aplicativo , selecione o aplicativo registrado (o exemplo é JWT).
6. Em URL de resposta, selecione o URL de redirecionamento.
7. Selecione Executar fluxo de utilizador.
8. Execute o fluxo de inscrição.
9. Crie uma conta.
10. Terminar sessão.
11. Execute o fluxo de entrada.
12. Selecione Continuar.
13. Um quebra-cabeça da Arkose Labs aparece.

Recursos

• Azure-Samples/fluxo-de-assinatura-de-utilizador-node-do-active-directory-b2c-arkose
  • Localizar o fluxo de usuário de inscrição do Azure AD B2C
• Visão geral da política personalizada do Azure AD B2C
• Tutorial: Criar fluxos de usuário e políticas personalizadas no Azure Ative Directory B2C