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 Ative Directory B2C (Azure AD B2C) aos seus aplicativos Web.

Descrição geral

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

O fluxo de entrada envolve as seguintes etapas:

  1. Os utilizadores vão para a aplicação Web e selecionam Iniciar sessão.
  2. O aplicativo inicia uma solicitação de autenticação e redireciona os usuários para o Azure AD B2C.
  3. Os utilizadores inscrevem-se ou iniciam sessão, repõem a palavra-passe ou iniciam sessão com uma conta social.
  4. Depois que os usuários entrarem com êxito, o Azure AD B2C retorna um token de ID para o aplicativo.
  5. O aplicativo troca o código de autorização com 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ários

Quando os usuários tentam entrar em seu aplicativo, 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 do usuário define e controla a experiência do usuário. Depois que os usuários concluem o fluxo de usuários, o Azure AD B2C gera um token e, em seguida, redireciona os usuários de volta para seu aplicativo.

Se ainda não tiver feito 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 maneira:

  • Um fluxo de usuário combinado de login e inscrição , como susi. Esse fluxo de usuário também suporta a 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 precede o nome do fluxo de B2C_1_ usuário. Por exemplo, susi passa a B2C_1_susi.

Etapa 2: Registrar um aplicativo Web

Para permitir que seu aplicativo entre com o Azure AD B2C, registre seu aplicativo no diretório do Azure AD B2C. Registrar seu 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 são redirecionados pelo Azure AD B2C depois de se autenticarem com o Azure AD B2C. O processo de registro do aplicativo gera uma ID do aplicativo, também conhecida como ID do cliente, que identifica exclusivamente seu aplicativo. Depois que seu aplicativo é registrado, o Azure AD B2C usa a ID do aplicativo e o URI de redirecionamento para criar solicitações de autenticação.

Passo 2.1: Registar a aplicação

Para criar o registo da aplicação Web, siga estes passos:

  1. Inicie sessão 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 seu locatário do Azure AD B2C no menu Diretórios + assinaturas .

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

  4. Selecione Registos de aplicações e, em seguida, selecione Novo registo.

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

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

  7. Em Redirecionar URI, selecione Web e, na caixa URL, digite http://localhost:5000/getAToken.

  8. Em Permissões, marque a caixa de seleção Conceder consentimento de administrador para permissões de acesso openid e offline.

  9. Selecione Registar.

  10. Selecione Descrição geral.

  11. Registre o 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 de cliente para o aplicativo Web registrado. O aplicativo Web usa o segredo do cliente para provar sua identidade quando solicita tokens.

  1. Em Gerenciar, selecione Certificados & 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 Expira, selecione uma duração para a qual o segredo é válido e, em seguida, selecione Adicionar.
  5. Registre o valor do segredo. Você usará esse valor para 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 exemplo para uma pasta onde o comprimento total do caminho é de 260 ou menos caracteres.

Etapa 4: Configurar o aplicativo Web de exemplo

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

  1. Crie um .env arquivo 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
    Key valor
    B2C_TENANT_NAME A primeira parte do nome do locatário do Azure AD B2C (por exemplo, contoso).
    CLIENT_ID O ID do aplicativo de API da Web da etapa 2.1.
    CLIENT_SECRET O valor secreto do cliente que você criou na etapa 2.2.
    *_USER_FLOW Os fluxos de usuário criados na etapa 1.

    As variáveis de ambiente são referenciadas em 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 submetido a check-in.

Etapa 5: Executar o aplicativo Web de exemplo

  1. No console ou 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 em sua máquina 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 em execução local:

     * 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 visualizar o aplicativo Web em execução em sua máquina local, vá para http://localhost:5000.

  4. Selecione Entrar.

    Screenshot showing the sign-in flow.

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

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

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

Etapa 6: Chamar para uma API da Web

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

  • O registro do aplicativo Web (Python) que você já criou na Etapa 2. Este registo de aplicação permite que a sua aplicação inicie sessão com o Azure AD B2C. O processo de registro do aplicativo gera uma ID do aplicativo, também conhecida como ID do cliente, que identifica exclusivamente seu aplicativo. Por exemplo, ID do aplicativo: 1.

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

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

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

Depois que a autenticação é concluída, os usuários interagem com o aplicativo, que invoca uma API da Web protegida. A API da Web usa 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 da Web, a biblioteca de autenticação obterá um novo token de acesso com os escopos corretos.

Etapa 6.1: Registrar o aplicativo de API da Web

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

  1. Inicie sessão no portal do Azure.

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

  3. Nas configurações do Portal | Página Diretórios + assinaturas , localize seu diretório do Azure AD B2C na lista Nome do diretório e selecione Alternar.

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

  5. Selecione Registos de aplicações e, em seguida, selecione Novo registo.

  6. Em Name, insira um nome para o aplicativo (por exemplo, my-api1). Deixe os valores padrão para URI de redirecionamento e tipos de conta suportados.

  7. Selecione Registar.

  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 ao configurar o aplicativo Web.

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

Etapa 6.2: Configurar escopos

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

  2. Em Gerenciar, selecione Expor uma API.

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

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

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

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

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

  6. Selecione Adicionar escopo.

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

    1. Em Nome do escopo, insira tasks.write.
    2. Para Nome de exibição do consentimento do administrador, digite Acesso de gravação à API de tarefas.
    3. Para Descrição do consentimento do administrador, insira Permite 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 seu aplicativo (ID do aplicativo: 1), siga estas etapas:

  1. Selecione Registos de aplicações e, em seguida, selecione a aplicação que criou (ID da aplicação: 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) à qual o aplicativo Web deve ter acesso. Por exemplo, digite my-api1.

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

  7. Selecione Adicionar permissões.

  8. Selecione Conceder consentimento de administrador para <o nome> do seu inquilino.

  9. Selecione Yes (Sim).

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

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

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

Etapa 6.4: Configurar sua API da Web

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

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

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

Key valor
ENDPOINT O URI da sua API da Web (por exemplo, https://localhost:6000/hello).
SCOPE Os escopos da API da 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 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 seu aplicativo

Em um aplicativo de produção, o URI de redirecionamento de registro do aplicativo é normalmente um ponto de extremidade acessível publicamente onde seu aplicativo está sendo executado, como https://contoso.com/getAToken.

Você pode adicionar e modificar URIs de redirecionamento em seus aplicativos registrados a qualquer momento. As seguintes restrições se aplicam aos URIs de redirecionamento:

  • O URL de redirecionamento deve começar com o esquema https.
  • O URL de redirecionamento diferencia maiúsculas de minúsculas. Seu caso deve corresponder ao caso do caminho da URL do seu aplicativo em execução.

Próximos passos