Configurar autenticação em um aplicativo de página única de amostra usando o Azure AD B2C
Este artigo usa um SPA (aplicativo de página única) JavaScript de exemplo para ilustrar como adicionar a autenticação do Azure AD B2C (Azure Active Directory B2C) aos seu SPA.
Visão geral
O OIDC (OpenID Connect) é um protocolo de autenticação criado com base no OAuth 2.0. Você pode usá-lo para conectar um usuário com segurança a 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.
Fluxo de entrada
O fluxo de entrada envolve as seguintes etapas:
- O usuário acessa o aplicativo Web e seleciona Entrar.
- O aplicativo inicia uma solicitação de autenticação e redireciona os usuários ao Azure Active Directory B2C.
- Os usuários se inscrevem ou entram e redefinem a senha. Como alternativa, é possível entrar com uma conta de rede social.
- Depois que os usuários se conectam, 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 permite que os usuários chamem recursos e API protegidos.
Visão geral do registro do aplicativo
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 de aplicativo Web permite que o 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 Active Directory B2C após a autenticação desses usuários com o Azure Active Directory B2C ser concluída. 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.
O registro da API Web permite que o aplicativo chame uma API Web segura. O registro inclui os escopos da API Web. Os escopos fornecem uma forma de gerenciar as permissões em recursos protegidos, como a API Web. Você concede as permissões do aplicativo Web aos escopos da API Web. Ao solicitar um token de acesso, o aplicativo especifica as permissões desejadas no parâmetro scope da solicitação.
A arquitetura e os registros do aplicativo são ilustrados no diagrama a seguir:
Chamar uma API Web
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.
Fluxo de saída
O fluxo de saída envolve as seguintes etapas:
- No aplicativo, os usuários sairão.
- O aplicativo limpa seus objetos de sessão e a biblioteca de autenticação limpa seu cache de tokens.
- O aplicativo leva os usuários para o 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.
- Runtime do Node.js
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 o SPA e a API
Nesta etapa, você cria o SPA e o registro de aplicativo de API Web, além de especificar os escopos da API Web.
Etapa 2.1: registrar o aplicativo de API Web
Para criar o registro do aplicativo da API Web (ID do Aplicativo: 2), siga estas etapas:
Entre no portal do Azure.
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.
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.
No portal do Azure, pesquise e selecione Azure AD B2C.
Escolha Registros de aplicativo e Novo registro.
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.
Selecione Registrar.
Depois que o registro do aplicativo for concluído, selecione Visão Geral.
Registre o valor da ID do aplicativo (cliente) para uso posterior, quando você configurar o aplicativo Web.
Etapa 2.2: configurar os escopos
Selecione o aplicativo my-api1 que você criou (ID do Aplicativo: 2) para abrir a página de Visão Geral do aplicativo.
Em Gerenciar, selecione Expor uma API.
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.
Em Escopos definidos por esta API, selecione Adicionar um escopo.
Para criar um escopo que define o acesso de leitura à API:
- Para Nome do escopo, insira tasks.read.
- Para Nome de exibição de consentimento do administrador, insira Acesso de leitura à API de tarefas.
- Para Descrição do consentimento do administrador, insira Permitir acesso de leitura à API de tarefas.
Selecione Adicionar escopo.
Selecione Adicionar escopo e adicione um escopo que define o acesso de gravação à API:
- Para Nome do escopo, insira tasks.write.
- Para Nome de exibição de consentimento do administrador, insira Acesso de gravação à API de tarefas.
- Para Descrição do consentimento do administrador, insira Permitir acesso de gravação à API de tarefas.
Selecione Adicionar escopo.
Etapa 2.3: registrar o SPA
Para criar o registro de SPA, use as seguintes etapas:
- Entre no portal do Azure.
- 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.
- Pesquise e selecione Azure AD B2C.
- Escolha Registros de aplicativo e Novo registro.
- Insira um Nome para o aplicativo, (por exemplo MyApp).
- 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) .
- Em URI de Redirecionamento, selecione SPA (Aplicativo de página única) e, na caixa de texto da URL, insira
http://localhost:6420
. - Em Permissões, marque a caixa de seleção Dar consentimento do administrador às permissões OpenID e acesso offline.
- Selecione Registrar.
Registre a ID do aplicativo (cliente) para usar posteriormente ao configurar o aplicativo Web.
Etapa 2.4: habilitar o fluxo de concessão implícita
Em seu próprio ambiente, se o aplicativo SPA usar o MSAL.js 1.3 ou anterior e o fluxo de concessão implícita ou se você configurar o aplicativo https://jwt.ms/ para testar um fluxo de usuário ou uma política personalizada, você precisará habilitar o fluxo de concessão implícita no registro do aplicativo:
No menu à esquerda, em Gerenciar, selecione Autenticação.
Em Concessões implícitas e fluxos híbridos, selecione 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 Salvar.
Se o aplicativo usar MSAL.js 2.0 ou posterior, não habilite a concessão de fluxo implícita, pois o MSAL.js 2.0+ dá suporte ao 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 aplicativo (ID do Aplicativo: 1), siga estas etapas:
Selecione Registros de aplicativo e, em seguida, selecione o aplicativo que você criou (ID do Aplicativo: 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) que deverá conceder acesso ao aplicativo Web. Por exemplo, insira my-api1.
Em Permissão, expanda tarefas e, em seguida, selecione os escopos definidos anteriormente (por exemplo, tasks.read e tasks.write).
Selecione Adicionar Permissões.
Selecione Fornecer consentimento do administrador para <nome do seu locatário>.
Selecione Sim.
Selecione Atualizar e, em seguida, verifique se Concedido para... aparece em Status para ambos os escopos.
Na lista Permissões configuradas, selecione o escopo e, em seguida, copie o nome completo do escopo.
Etapa 3: Obter o código de exemplo de SPA
Este exemplo descreve como um aplicativo de página única pode usar o Azure AD B2C para a inscrição e a entrada de usuário. Em seguida, o aplicativo adquire um token de acesso e chama uma API Web protegida.
Para obter o código de exemplo do SPA, você pode fazer o seguinte:
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 do Azure AD B2C e API Web. Na pasta de exemplo, na pasta App
, abra os arquivos JavaScript listados na tabela a seguir e, em seguida, atualize-os com seus valores correspondentes.
Arquivo | Chave | Valor |
---|---|---|
authConfig.js | clientId | A ID do SPA da etapa 2.3. |
policies.js | nomes | Os fluxos dos usuários ou a política personalizada que você criou na etapa 1. |
policies.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 com o fluxo do usuário ou a política personalizada criada na etapa 1 |
policies.js | authorityDomain | Seu domínio de autoridade de Azure AD B2C, como <your-tenant-name>.b2clogin.com . |
apiConfig.js | b2cScopes | Os escopos da API Web criados na etapa 2.2 (por exemplo, b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"] ). |
apiConfig.js | webApi | A URL da API Web, http://localhost:5000/hello . |
O código de resultado deverá ser semelhante ao seguinte exemplo:
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
};
policies.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 Web
Agora que a API Web está registrada e você definiu escopos, configure o código da API Web para funcionar com o locatário do Azure AD B2C.
Para obter o código de exemplo da API Web, siga um destes procedimentos:
Clone o projeto de API 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 até o projeto Azure-Samples/active-directory-b2c-javascript-nodejs-webapi no GitHub.
Etapa 4.1: atualizar a API Web
Abra o arquivo config.json no editor de códigos.
Modifique os valores de variáveis com o registro de aplicativo que você criou anteriormente. Atualize o
policyName
com o 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: habilitar CORS
Para permitir que seu aplicativo de página única chame a API Web do Node.js, é necessário habilitar CORS (compartilhamento de recursos entre origens) na API Web. Em um aplicativo de produção, tenha cuidado com o domínio que está fazendo a solicitação. Neste exemplo, permita solicitações de qualquer domínio.
Para habilitar o CORS, use o middleware a seguir. No exemplo de código da API Web do 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 Web
Agora você está pronto para testar o acesso no escopo à API do aplicativo de página única. Execute a API Web do Node.js e o aplicativo de página única JavaScript de exemplo em seu computador local. Em seguida, entre no aplicativo de página única e selecione o botão Chamar API para iniciar uma solicitação à API protegida.
Executar a API Web Node.Js
Abra uma janela do console e altere para o diretório que contém a amostra da API Web do Node.js. Por exemplo:
cd active-directory-b2c-javascript-nodejs-webapi
Execute os seguintes comandos:
npm install && npm update node index.js
A janela de console exibe o número da porta em que o aplicativo está hospedado.
Listening on port 5000...
Executar o aplicativo de página única
Abra outra janela do console e vá para o diretório que contém o SPA do JavaScript de exemplo. Por exemplo:
cd ms-identity-b2c-javascript-spa
Execute os seguintes comandos:
npm install && npm update npm start
A janela de console exibe o número da porta em que o aplicativo está hospedado.
Listening on port 6420...
Acesse
http://localhost:6420
no navegador para exibir o aplicativo.Conclua o processo de inscrição ou de entrada. Depois de fazer logon com sucesso, você deverá ver s mensagem "Usuário <seu nome de usuário> conectado".
Selecione o botão Chamar API. O SPA envia o token de acesso em uma solicitação para a API Web protegida, que retorna o nome de exibição do usuário conectado:
Implantar seu 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/signin-oidc
.
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 resposta deve começar com o esquema
https
. - A URL de resposta 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
Para obter mais informações sobre os conceitos abordados neste artigo: