Configurar a autenticação em um aplicativo de página única de exemplo usando o Azure AD B2C

Artigo
01/11/2024

Este artigo usa um exemplo de aplicativo de página única (SPA) JavaScript para ilustrar como adicionar a autenticação do Azure Ative Directory B2C (Azure AD B2C) aos seus SPAs.

Descrição geral

OpenID Connect (OIDC) é um protocolo de autenticação que é construído em OAuth 2.0. Você pode usá-lo para conectar com segurança um usuário em um aplicativo. Este exemplo de SPA usa MSAL .js e o fluxo PKCE OIDC. MSAL.js é uma biblioteca fornecida pela Microsoft que simplifica a adição de suporte de autenticação e autorização a SPAs.

O fluxo de entrada envolve as seguintes etapas:

Os utilizadores vão para a aplicação Web e selecionam Iniciar sessão.
O aplicativo inicia uma solicitação de autenticação e redireciona os usuários para o Azure AD B2C.
Os utilizadores registam-se ou iniciam sessão e repõem a palavra-passe. Em alternativa, podem iniciar sessão com uma conta social.
Depois que os usuários entrarem, o Azure AD B2C retorna um código de autorização para o aplicativo.
O aplicativo de página única valida o token de ID, lê as declarações e, por sua vez, permite que os usuários chamem recursos e APIs protegidos.

Visão geral do registro do aplicativo

Para permitir que seu 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 Web permite que seu aplicativo entre com o Azure AD B2C. Durante o registro, você especifica 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 após a conclusão da autenticaçã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.
O registro da API da Web permite que seu aplicativo chame uma API da Web segura. O registro inclui os escopos da API da Web. Os escopos fornecem uma maneira de gerenciar permissões para recursos protegidos, como sua API da Web. Você concede permissões ao aplicativo Web para os escopos da API da Web. Quando um token de acesso é solicitado, seu aplicativo especifica as permissões desejadas no parâmetro de escopo da solicitação.

A arquitetura e os registros do aplicativo são ilustrados no diagrama a seguir:

Diagram of a web app with web API call registrations and tokens.

Chamada para uma API da Web

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.

Fluxo de saída

O fluxo de saída envolve as seguintes etapas:

A partir da aplicação, os utilizadores terminam sessão.
O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de token.
O aplicativo leva os usuários ao ponto de extremidade de saída do Azure AD B2C para encerrar a sessão do Azure AD B2C.
Os usuários são redirecionados de volta para o aplicativo.

Pré-requisitos

Um computador que esteja executando:

Visual Studio Code ou outro editor de código.
Tempo de execução .js nó

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.

Passo 2: Registe o seu SPA e API

Nesta etapa, você cria o SPA e os registros do aplicativo de API da Web e especifica os escopos da sua API da Web.

Etapa 2.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:

Inicie sessão no portal do Azure.
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.
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.
No portal do Azure, procure e selecione Azure AD B2C.
Selecione Registos de aplicações e, em seguida, selecione Novo registo.
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.
Selecione Registar.
Depois que o registro do aplicativo for concluído, selecione Visão geral.
Registre o valor da ID do aplicativo (cliente) para uso posterior ao configurar o aplicativo Web.

Etapa 2.2: Configurar escopos

Selecione o aplicativo my-api1 que você criou (ID do aplicativo: 2) para abrir a página Visão geral.
Em Gerenciar, selecione Expor uma API.
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.
Em Escopos definidos por esta API, selecione Adicionar um escopo.
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.
Selecione Adicionar escopo.
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.
Selecione Adicionar escopo.

Passo 2.3: Registar o SPA

Para criar o registro SPA, use as seguintes etapas:

Inicie sessão no portal do Azure.
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 .
Procure e selecione Azure AD B2C.
Selecione Registos de aplicações e, em seguida, selecione Novo registo.
Insira um Nome para o aplicativo (por exemplo, MyApp).
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).
Em Redirecionar URI, selecione Aplicativo de página única (SPA) e, na caixa URL, digite http://localhost:6420.
Em Permissões, marque a caixa de seleção Conceder consentimento de administrador para permissões de acesso openid e offline.
Selecione Registar.

Registre o ID do aplicativo (cliente) para usar mais tarde, quando você configurar o aplicativo Web.

Screenshot of the web app Overview page for recording your web application ID.

Etapa 2.4: Habilitar o fluxo de concessão implícito

Em seu próprio ambiente, se seu aplicativo SPA usa MSAL.js 1.3 ou anterior e o fluxo de concessão implícito ou você configura https://jwt.ms/ o aplicativo para testar um fluxo de usuário ou uma política personalizada, você precisa habilitar o fluxo de concessão implícita no registro do aplicativo:

No menu à esquerda, em Gerenciar, selecione Autenticação.
Em Concessão implícita e fluxos híbridos, marque as caixas de seleção Tokens de acesso (usados para fluxos implícitos) e Tokens de ID (usados para fluxos implícitos e híbridos).
Selecione Guardar.

Se seu aplicativo usa MSAL.js 2.0 ou posterior, não habilite a concessão de fluxo implícito como MSAL.js 2.0+ suporta o fluxo de código de autorização com PKCE. O aplicativo SPA neste artigo usa o fluxo PKCE e, portanto, você não precisa habilitar o fluxo de concessão implícito.

Etapa 2.5: Conceder permissões

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

Selecione Registos de aplicações e, em seguida, selecione a aplicação que criou (ID da aplicação: 1).
Em Gerenciar, selecione Permissões de API.
Em Permissões configuradas, selecione Adicionar uma permissão.
Selecione a guia Minhas APIs .
Selecione a API (ID do aplicativo: 2) à qual o aplicativo Web deve ter acesso. Por exemplo, digite my-api1.
Em Permissão, expanda tarefas e selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).
Selecione Adicionar permissões.
Selecione Conceder consentimento de administrador para <o nome> do seu inquilino.
Selecione Yes (Sim).
Selecione Atualizar e verifique se Concedido para ... aparece em Status para ambos os escopos.
Na lista Permissões configuradas, selecione seu escopo e copie o nome completo do escopo.

Etapa 3: Obter o código de exemplo do SPA

Este exemplo demonstra como um aplicativo de página única pode usar o Azure AD B2C para inscrição e entrada de usuários. Em seguida, o aplicativo adquire um token de acesso e chama uma API da Web protegida.

Para obter o código de exemplo do SPA, siga um destes procedimentos:

Faça o download de um arquivo zip.

Clone o exemplo do GitHub executando o seguinte comando:

git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

Etapa 3.1: Atualizar o exemplo de SPA

Agora que você obteve o exemplo de SPA, atualize o código com seus valores de API Web e B2C do Azure AD. Na pasta de exemplo, na pasta, abra os arquivos JavaScript listados na App tabela a seguir e atualize-os com seus valores correspondentes.

Ficheiro	Key	valor
authConfig.js	clientId	O ID DO SPA da etapa 2.3.
políticas.js	Nomes	Os fluxos de usuário ou a política personalizada que você criou na etapa 1.
políticas.js	autoridades	Seus fluxos de usuário do Azure AD B2C ou autoridades de políticas personalizadas, como `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`. Substitua `your-sign-in-sign-up-policy` pelo fluxo de usuário ou pela política personalizada criada na etapa 1
políticas.js	authorityDomínio	Seu domínio de autoridade do Azure AD B2C, como `<your-tenant-name>.b2clogin.com`.
apiConfig.js	b2cÂmbitos	Os escopos da API da Web criados na etapa 2.2 (por exemplo, `b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]`).
apiConfig.js	Api web	A URL da API da Web, `http://localhost:5000/hello`.

O código resultante deve ser semelhante ao exemplo a seguir:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

políticas.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

Etapa 4: Obter o código de exemplo da API da Web

Agora que a API Web está registrada e você definiu seus escopos, configure o código da API Web para trabalhar com seu locatário do Azure AD B2C.

Para obter o código de exemplo da API Web, siga um destes procedimentos:

Faça o download de um arquivo *.zip.

Clone o projeto de API da Web de exemplo do GitHub executando o seguinte comando:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

Você também pode ir diretamente para o projeto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi no GitHub.

Etapa 4.1: Atualizar a API da Web

Abra o arquivo config.json no editor de códigos.
Modifique os valores das variáveis com o registro do aplicativo criado anteriormente. E atualize o com o policyName fluxo de usuário que você criou como parte dos pré-requisitos (por exemplo, b2c_1_susi).
```
"credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},
```

Etapa 4.2: Ativar o CORS

Para permitir que seu aplicativo de página única chame a API da Web .js nó, você precisa habilitar o compartilhamento de recursos entre origens (CORS) na API da Web. Em um aplicativo de produção, tenha cuidado com qual domínio está fazendo a solicitação. Neste exemplo, permita solicitações de qualquer domínio.

Para habilitar o CORS, use o seguinte middleware. No exemplo de código da API da Web Node.js que você baixou, ele já foi adicionado ao arquivo index.js .

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Etapa 5: Executar o SPA e a API da Web

Agora você está pronto para testar o acesso com escopo do aplicativo de página única à API. Execute a API Web Node.js e o aplicativo JavaScript de página única de exemplo em sua máquina local. Em seguida, entre no aplicativo de página única e selecione o botão Chamar API para iniciar uma solicitação para a API protegida.

Execute a API Web .js nó

Abra uma janela do console e mude para o diretório que contém o exemplo de API da Web Node.js. Por exemplo:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Execute os seguintes comandos:
```
npm install && npm update
node index.js
```
A janela do console exibe o número da porta onde o aplicativo está hospedado.
```
Listening on port 5000...
```

Executar o aplicativo de página única

Abra outra janela do console e mude para o diretório que contém o exemplo de SPA JavaScript. Por exemplo:
```
cd ms-identity-b2c-javascript-spa
```
Execute os seguintes comandos:
```
npm install && npm update
npm start
```
A janela do console exibe o número da porta de onde o aplicativo está hospedado.
```
Listening on port 6420...
```
Para visualizar o aplicativo, vá para http://localhost:6420 em seu navegador.
Conclua o processo de inscrição ou login. Depois de iniciar sessão com sucesso, deverá ver a mensagem "Utilizador <com o seu nome> de utilizador com sessão iniciada".
Selecione o botão Chamar API . O SPA envia o token de acesso em uma solicitação para a API da Web protegida, que retorna o nome para exibição do usuário conectado:

Implementar a sua aplicação

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/signin-oidc.

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 resposta deve começar com o esquema https.
O URL de resposta 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

Para obter mais informações sobre os conceitos discutidos neste artigo: