Configurar a autenticação em um aplicativo Web Python de exemplo usando o Azure AD B2C

  • Artigo

Este artigo usa um aplicativo Web Python de exemplo para ilustrar como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) aos seus aplicativos Web.

Visão geral

O OIDC (OpenID Connect) é um protocolo de autenticação criado com base no OAuth 2.0. Você pode usar o OIDC para conectar usuários com segurança a um aplicativo. Este exemplo de aplicativo da Web usa o pacote de identidade para Python para simplificar a adição do suporte à autenticação e autorização para aplicativos Web em Python.

O fluxo de entrada envolve as seguintes etapas:

  1. O usuário acessa o aplicativo Web e seleciona Entrar.
  2. O aplicativo inicia uma solicitação de autenticação e redireciona os usuários ao Azure Active Directory B2C.
  3. Os usuários se inscrevem ou se conectam, redefinem a senha ou se conectam com uma conta de rede social.
  4. Após a entrada bem-sucedida dos usuários, o Azure AD B2C retorna um token de ID para o aplicativo.
  5. O aplicativo troca o código de autorização por um token de ID, valida o token de ID, lê as declarações e retorna uma página segura para os usuários.

Pré-requisitos

Etapa 1: configurar o fluxo de usuário

Quando os usuários tentam entrar, o aplicativo inicia uma solicitação de autenticação para o ponto de extremidade de autorização por meio de um fluxo de usuário. O fluxo de usuários define e controla a experiência do usuário. Quando o fluxo é concluído, o Azure AD B2C gera um token e redireciona o usuário de volta para o aplicativo.

Se você ainda não fez isso, crie um fluxo de usuário ou uma política personalizada. Repita as etapas para criar três fluxos de usuário separados, da seguinte forma:

  • Um fluxo de usuário combinado de entrada e inscrição, como susi. Esse fluxo de usuário também dá suporte à experiência Esqueceu sua senha.
  • Um fluxo de usuário de edição de perfil, como edit_profile.
  • Um fluxo de usuário de Redefinição de senha, como reset_password.

O Azure AD B2C acrescenta B2C_1_ ao início do nome do fluxo de usuário. Por exemplo, susi torna-se B2C_1_susi.

Etapa 2: registrar um aplicativo Web

Para permitir que o aplicativo entre com Azure AD B2C, registre seu aplicativo no diretório do Azure AD B2C. Registrar o aplicativo estabelece uma relação de confiança entre o aplicativo e o Azure AD B2C.

Durante o registro do aplicativo, você especificará o URI de redirecionamento. O URI de redirecionamento é o ponto de extremidade para o qual os usuários serão redirecionados pelo Azure AD B2C após a autenticação deles no Azure AD B2C. O processo de registro de aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Após o registro do aplicativo, o Azure AD B2C usa a ID de aplicativo e o URI de redirecionamento para criar solicitações de autenticação.

Etapa 2.1: registrar o aplicativo

Siga estas etapas para criar o registro do aplicativo Web:

  1. Entre no portal do Azure.

  2. Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para o seu locatário do Azure Active Directory B2C no menu Diretórios + assinaturas.

  3. No portal do Azure, pesquise e selecione Azure AD B2C.

  4. Escolha Registros de aplicativo e Novo registro.

  5. Em Nome, insira um nome para o aplicativo (por exemplo, webapp1).

  6. Em Tipos de conta com suporte, selecione Contas em qualquer provedor de identidade ou diretório organizacional (para autenticar usuários com fluxos dos usuários) .

  7. Em URI de redirecionamento, selecione Web e, em seguida, na caixa da URL, insira http://localhost:5000/getAToken.

  8. Em Permissões, marque a caixa de seleção Conceder consentimento do administrador às permissões OpenID e acesso offline.

  9. Selecione Registrar.

  10. Selecione Visão geral.

  11. Registre a ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

    Screenshot of the web app Overview page for recording your web app I D.

Etapa 2.2: Criar um segredo do cliente do aplicativo Web

Crie um segredo do cliente para o aplicativo Web registrado. O aplicativo Web usa o segredo do cliente para confirmar sua identidade ao solicitar tokens.

  1. Em Gerenciar, selecione Certificados e segredos.
  2. Selecione Novo segredo do cliente.
  3. Na caixa Descrição, insira uma descrição para o segredo do cliente (por exemplo, clientsecret1).
  4. Em Expirar, selecione um período durante o qual o segredo será válido e clique em Adicionar.
  5. Registre o Valor do segredo. Você usará esse valor para uma configuração em uma etapa posterior.

Etapa 3: obter o exemplo de aplicativo Web

Baixe o arquivo zip ou clone o aplicativo Web de exemplo do GitHub.

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

Extraia o arquivo de amostra em uma pasta cujo comprimento total do caminho seja de 260 caracteres ou menos.

Etapa 4: configurar o aplicativo Web de amostra

No diretório raiz do projeto, siga estas etapas:

  1. Crie um arquivo .env na pasta raiz do projeto usando .env.sample como guia.

    FLASK_DEBUG=True
B2C_TENANT_NAME=<tenant name>
CLIENT_ID=<client id>
CLIENT_SECRET=<client secret>
SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
EDITPROFILE_USER_FLOW=B2C_1_profile_editing
RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    Chave Valor
    B2C_TENANT_NAME A primeira parte do nome do locatário do Azure Active Directory B2C (por exemplo, contoso).
    CLIENT_ID A ID do aplicativo da API Web da etapa 2.1.
    CLIENT_SECRET O valor do segredo do cliente que você criou na etapa 2.2.
    *_USER_FLOW Os fluxos de usuário que você criou na etapa 1.

    As variáveis de ambiente são referenciadas no app_config.py e são mantidas em um arquivo .env separado para mantê-las fora do controle do código-fonte. O arquivo .gitignore fornecido impede que o arquivo .env seja verificado.

Etapa 5: executar o aplicativo Web de amostra

  1. No console ou no terminal, alterne para o diretório que contém o exemplo. Por exemplo:

    cd ms-identity-python-webapp

  2. Instale os pacotes necessários do PyPi e execute o aplicativo Web no computador local executando os seguintes comandos:

    python -m pip install -r requirements.txt
python -m flask run --host localhost --port 5000

    A janela do console exibe o número da porta do aplicativo executado localmente:

     * Debug mode: on
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Running on `http://localhost:5000/` (Press CTRL+C to quit)

  3. Para ver o aplicativo Web em execução no computador local, acesse http://localhost:5000.

  4. Selecione Entrar.

    Screenshot showing the sign-in flow.

  5. Conclua o processo de inscrição ou de entrada.

  6. Após a autenticação bem-sucedida, você verá seu nome de exibição, conforme mostrado aqui:

    Screenshot showing the web app token's display name claim.

Etapa 6: Chamar uma API Web

Para permitir que o aplicativo entre com o Azure AD B2C e chame uma API Web, registre dois aplicativos no diretório do Azure AD B2C.

  • O registro do aplicativo da web (Python) que você já criou na Etapa 2. O registro do aplicativo permite que ele entre com o Azure AD B2C. O processo de registro de aplicativo gera uma ID de aplicativo, também conhecida como ID do cliente, que identifica o aplicativo de modo exclusivo. Por exemplo, ID do aplicativo: 1.

  • O registro da API Web permite que o aplicativo chame uma API Web protegida. O registro expõe as permissões de API Web (escopos). O processo de registro do aplicativo gera uma ID do Aplicativo que identifica exclusivamente sua API Web (por exemplo, ID do Aplicativo: 2). Conceda permissões ao aplicativo (ID do aplicativo: 1) para os escopos da API Web (ID do aplicativo: 2).

Os registros e a arquitetura do aplicativo são descritos nos seguintes diagramas:

Diagram describing a web app with web API, registrations, and tokens.

Após a autenticação, os usuários interagem com o aplicativo, que invoca uma API Web protegida. A API Web usa a autenticação de token de portador. O token de portador é o token de acesso que o aplicativo obteve do Azure AD B2C. O aplicativo passa o token no cabeçalho de autorização da solicitação HTTPS.

Authorization: Bearer <access token>

Se o escopo do token de acesso não corresponder aos escopos da API Web, a biblioteca de autenticação obterá um novo token de acesso com os escopos corretos.

Etapa 6.1: Registrar o aplicativo de API Web

Para criar o registro do aplicativo da API Web (ID do Aplicativo: 2), siga estas etapas:

  1. Entre no portal do Azure.

  2. Verifique se você está usando o diretório que contenha seu locatário do Azure AD B2C. Selecione o ícone Diretórios + assinaturas na barra de ferramentas do portal.

  3. Na página Configurações do portal | Diretórios + assinaturas, encontre o diretório Azure Active Directory B2C na lista Nome do diretório e, em seguida, selecione Alternar.

  4. No portal do Azure, pesquise e selecione Azure AD B2C.

  5. Escolha Registros de aplicativo e Novo registro.

  6. Insira um Nome para o aplicativo, (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta com suporte.

  7. Selecione Registrar.

  8. Depois que o registro do aplicativo for concluído, selecione Visão Geral.

  9. Registre o valor da ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.

    Screenshot that demonstrates how to get a web A P I application I D.

Etapa 6.2: Configurar os escopos

  1. Selecione o aplicativo my-api1 que você criou (ID do Aplicativo: 2) para abrir a página de Visão Geral do aplicativo.

  2. Em Gerenciar, selecione Expor uma API.

  3. Ao lado de URI do ID do Aplicativo, selecione o link Definir. Substitua o valor padrão (identificador exclusivo, GUID) por um nome exclusivo (por exemplo, tasks-api) e selecione Salvar.

    Quando o aplicativo Web solicita um token de acesso à API Web, ele deve adicionar esse URI como prefixo para cada escopo que você definir para a API.

  4. Em Escopos definidos por esta API, selecione Adicionar um escopo.

  5. Para criar um escopo que define o acesso de leitura à API:

    1. Para Nome do escopo, insira tasks.read.
    2. Para Nome de exibição de consentimento do administrador, insira Acesso de leitura à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permitir acesso de leitura à API de tarefas.

  6. Selecione Adicionar escopo.

  7. Selecione Adicionar escopo e adicione um escopo que define o acesso de gravação à API:

    1. Para Nome do escopo, insira tasks.write.
    2. Para Nome de exibição de consentimento do administrador, insira Acesso de gravação à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permitir acesso de gravação à API de tarefas.

  8. Selecione Adicionar escopo.

Etapa 6.3: Conceder permissões ao aplicativo Web

Para conceder permissões ao aplicativo (ID do Aplicativo: 1), siga estas etapas:

  1. Selecione Registros de aplicativo e, em seguida, selecione o aplicativo que você criou (ID do Aplicativo: 1).

  2. Em Gerenciar, selecione Permissões de API.

  3. Em Permissões Configuradas, selecione Adicionar uma permissão.

  4. Selecione a guia Minhas APIs.

  5. Selecione a API (ID do Aplicativo: 2) que deverá conceder acesso ao aplicativo Web. Por exemplo, insira my-api1.

  6. Em Permissão, expanda tarefas e, em seguida, selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).

  7. Selecione Adicionar Permissões.

  8. Selecione Fornecer consentimento do administrador para <nome do seu locatário>.

  9. Selecione Sim.

  10. Selecione Atualizar e, em seguida, verifique se Concedido para... aparece em Status para ambos os escopos.

  11. Na lista Permissões configuradas, selecione o escopo e, em seguida, copie o nome completo do escopo.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Etapa 6.4: Configurar a API Web

Este exemplo adquire um token de acesso com os escopos relevantes, que o aplicativo Web poderá usar para uma API Web. Essa amostra em si não atua como uma API Web. Em vez disso, você deve usar uma API Web existente ou criar uma nova. Para obter um tutorial sobre como criar uma API Web no seu locatário B2C, confira Habilitar autenticação na sua própria API Web usando o Azure AD B2C.

Etapa 6.5: Configurar o aplicativo de exemplo com a API Web

Abra o arquivo app_config.py. Esse arquivo contém informações sobre seu provedor de identidade do Azure AD B2C. Atualize as seguintes propriedades das configurações do aplicativo:

Chave Valor
ENDPOINT O URI da API Web (por exemplo, https://localhost:6000/hello).
SCOPE Os escopos da API Web que você criou (por exemplo, ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"]).

Etapa 6.6: Executar o aplicativo de exemplo

  1. No console ou no terminal, alterne para o diretório que contém o exemplo.

  2. Se o aplicativo ainda não estiver em execução, reinicie-o usando o comando da Etapa 5.

  3. Selecione Chamar uma API downstream.

    Screenshot showing how to call a web API.

Etapa 7: Implantar o aplicativo

Em um aplicativo de produção, o URI de redirecionamento do registro de aplicativo normalmente é um ponto de extremidade de acesso público no qual o aplicativo está em execução, como https://contoso.com/getAToken.

Adicione e modifique URIs de redirecionamento nos aplicativos registrados a qualquer momento. As restrições a seguir se aplicam a URLs de redirecionamento:

  • A URL de redirecionamento deve começar com o esquema https.
  • A URL de redirecionamento diferencia maiúsculas de minúsculas. As letras maiúsculas e minúsculas devem corresponder às letras maiúsculas e minúsculas do caminho da URL do aplicativo em execução.

Próximas etapas