Tutorial: Habilitar a autenticação em um aplicativo de página única com o Azure AD B2CTutorial: Enable authentication in a single-page application with Azure AD B2C

Este tutorial mostra como usar o Azure AD B2C (Azure Active Directory B2C) para inscrever e conectar usuários em um SPA (aplicativo de página única).This tutorial shows you how to use Azure Active Directory B2C (Azure AD B2C) to sign up and sign in users in a single-page application (SPA).

Neste tutorial, o primeiro de uma série de duas partes:In this tutorial, the first in a two-part series:

  • Adicione uma URL de resposta a um aplicativo registrado em seu locatário do Azure AD B2CAdd a reply URL to an application registered in your Azure AD B2C tenant
  • Baixe um exemplo de código do GitHubDownload a code sample from GitHub
  • Modifique o código do aplicativo de exemplo para funcionar com seu locatárioModify the sample application's code to work with your tenant
  • Inscreva-se usando seu fluxo de inscrição/entrada de usuárioSign up using your sign-up/sign-in user flow

O próximo tutorial da série habilita a parte da API Web do exemplo de código.The next tutorial in the series enables the web API portion of the code sample.

Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Pré-requisitosPrerequisites

Você precisará dos seguintes recursos do Azure AD B2C em vigor antes de continuar com as etapas deste tutorial:You need the following Azure AD B2C resources in place before continuing with the steps in this tutorial:

Além disso, você precisará do seguinte no ambiente de desenvolvimento local:Additionally, you need the following in your local development environment:

Atualizar o aplicativoUpdate the application

No segundo tutorial concluído como parte dos pré-requisitos, você registrou um aplicativo Web no Azure AD B2C.In the second tutorial that you completed as part of the prerequisites, you registered a web application in Azure AD B2C. Para habilitar a comunicação com o exemplo de código neste tutorial, adicione uma URL de resposta (também chamada de URI de redirecionamento) ao registro de aplicativo.To enable communication with the code sample in this tutorial, add a reply URL (also called a redirect URI) to the application registration.

Para atualizar um aplicativo no locatário do Azure AD B2C, você pode usar a nossa nova experiência unificada de Registros de aplicativos ou a nossa experiência herdada Aplicativos (Herdado) .To update an application in your Azure AD B2C tenant, you can use our new unified App registrations experience or our legacy Applications (Legacy) experience. Saiba mais sobre a nova experiência.Learn more about the new experience.

  1. Entre no portal do Azure.Sign in to the Azure portal.
  2. Selecione o filtro Diretório + assinatura no menu superior e, em seguida, selecione o diretório que contém o locatário do Azure AD B2C.Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. No menu à esquerda, selecione Azure AD B2C.In the left menu, select Azure AD B2C. Ou selecione Todos os serviços e pesquise e selecione Azure AD B2C.Or, select All services and search for and select Azure AD B2C.
  4. Selecione Registros de aplicativo, selecione a guia Aplicativos Próprios e, em seguida, selecione o aplicativo webapp1.Select App registrations, select the Owned applications tab, and then select the webapp1 application.
  5. Em Web, selecione o link Adicionar URI e insira http://localhost:6420.Under Web, select the Add URI link, enter http://localhost:6420.
  6. Em Concessão Implícita, marque as caixas de seleção para Tokens de Acesso e Tokens de ID e, em seguida, selecione Salvar.Under Implicit Grant, select the checkboxes for Access Tokens and ID Tokens and then select Save.
  7. Selecione Visão geral.Select Overview.
  8. Anote a ID do aplicativo (cliente) para uso em uma etapa posterior, na qual você atualize o código no aplicativo Web de página única.Record the Application (client) ID for use in a later step when you update the code in the single-page web application.

Obter o código de amostraGet the sample code

Neste tutorial, você configurará um exemplo de código baixado do GitHub para funcionar com o locatário do B2C.In this tutorial, you configure a code sample that you download from GitHub to work with your B2C tenant. A amostra descreve como um aplicativo de página única pode usar o Azure AD B2C para a inscrição e a entrada de usuário e para chamar uma API Web protegida (você habilita a API Web no próximo tutorial da série).The sample demonstrates how a single-page application can use Azure AD B2C for user sign-up and sign-in, and to call a protected web API (you enable the web API in the next tutorial in the series).

Baixe um arquivo zip ou clone o exemplo do GitHub.Download a zip file or clone the sample from GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.git

Atualizar a amostraUpdate the sample

Agora que você já obteve a amostra, atualize o código com o nome do locatário do Azure AD B2C e a ID do aplicativo registrada em uma etapa anterior.Now that you've obtained the sample, update the code with your Azure AD B2C tenant name and the application ID you recorded in an earlier step.

  1. Abra o arquivo authConfig.js dentro da pasta JavaScriptSPA.Open the authConfig.js file inside the JavaScriptSPA folder.

  2. No objeto msalConfig, atualize:In the msalConfig object, update:

    • clientId com o valor com a ID de aplicativo (cliente) que você registrou em uma etapa anteriorclientId with value with the Application (client) ID you recorded in an earlier step
    • O URI authority com o nome do locatário do Azure AD B2C e o nome do fluxo de inscrição/entrada de usuário criado como parte dos pré-requisitos (por exemplo, B2C_1_signupsignin1)authority URI with your Azure AD B2C tenant name and the name of the sign-up/sign-in user flow you created as part of the prerequisites (for example, B2C_1_signupsignin1)
    const msalConfig = {
        auth: {
          clientId: "00000000-0000-0000-0000-000000000000", // Replace this value with your Application (client) ID
          authority: b2cPolicies.authorities.signUpSignIn.authority,
          validateAuthority: false
        },
        cache: {
          cacheLocation: "localStorage",
          storeAuthStateInCookie: true
        }
    };
    
    const loginRequest = {
       scopes: ["openid", "profile"],
    };
    
    const tokenRequest = {
      scopes: apiConfig.b2cScopes // i.e. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
    };
    

Execute o exemploRun the sample

  1. Abra uma janela do console e altere para o diretório que contém a amostra.Open a console window and change to the directory containing the sample. Por exemplo:For example:

    cd active-directory-b2c-javascript-msal-singlepageapp
    
  2. Execute os seguintes comandos:Run the following commands:

    npm install && npm update
    npm start
    

    A janela do console exibe o número da porta do servidor do Node.js em execução localmente:The console window displays the port number of the locally running Node.js server:

    Listening on port 6420...
    
  3. Navegue até http://localhost:6420 para ver o aplicativo Web em execução no computador local.Browse to http://localhost:6420 to view the web application running on your local machine.

    Navegador da Web mostrando o aplicativo de página única em execução localmente

Criar conta usando um endereço de emailSign up using an email address

Este aplicativo de exemplo é compatível com inscrição, entrada e redefinição de senha.This sample application supports sign up, sign in, and password reset. Neste tutorial, você se inscreve usando um endereço de email.In this tutorial, you sign up using an email address.

  1. Selecione Entrar para iniciar o fluxo de usuário B2C_1_signupsignin1 especificado em uma etapa anterior.Select Sign In to initiate the B2C_1_signupsignin1 user flow you specified in an earlier step.

  2. O Azure AD B2C apresenta uma página de entrada que inclui um link de inscrição.Azure AD B2C presents a sign-in page that includes a sign up link. Como você ainda não tem uma conta, selecione o link Inscrever-se agora.Since you don't yet have an account, select the Sign up now link.

  3. O fluxo de trabalho de inscrição apresenta uma página para coletar e verificar a identidade do usuário usando um endereço de email.The sign up workflow presents a page to collect and verify the user's identity using an email address. O fluxo de trabalho de inscrição também coleta a senha do usuário e os atributos solicitados definidos no fluxo de usuário.The sign up workflow also collects the user's password and the requested attributes defined in the user flow.

    Use um endereço de email válido e valide-o usando o código de verificação.Use a valid email address and validate using the verification code. Defina uma senha.Set a password. Insira valores para os atributos necessários.Enter values for the requested attributes.

    Página de inscrição exibida pelo fluxo de usuário do Azure AD B2C

  4. Selecione Criar para criar uma conta local no diretório do Azure AD B2C.Select Create to create a local account in the Azure AD B2C directory.

Quando você seleciona Criar, o aplicativo mostra o nome do usuário conectado.When you select Create, the application shows the name of the signed in user.

Navegador da Web mostrando um aplicativo de página única com o usuário conectado

Se você quiser testar a entrada, selecione o botão Sair e, em seguida, selecione Entrar e entre com o endereço de email e a senha que você inseriu quando se inscreveu.If you'd like to test sign-in, select the Sign Out button, then select Sign In and sign in with the email address and password you entered when you signed up.

E quanto à chamada à API?What about calling the API?

Se você selecionar o botão Chamar API depois de entrar, será exibida a página de fluxo de inscrição/entrada de usuário em vez dos resultados da chamada à API.If you select the Call API button after signing in, you're presented with the sign-up/sign-in user flow page instead of the results of the API call. Isso é esperado porque você ainda não configurou a parte da API do aplicativo para se comunicar com um aplicativo de API Web registrado em seu locatário do Azure AD B2C.This is expected because you haven't yet configured the API portion of the application to communicate with a web API application registered in your Azure AD B2C tenant.

Neste ponto, o aplicativo ainda está tentando se comunicar com a API registrada no locatário de demonstração (fabrikamb2c.onmicrosoft.com) e, como você não está autenticado nesse locatário, a página de inscrição/entrada é exibida.At this point, the application is still trying to communicate with the API registered in the demo tenant (fabrikamb2c.onmicrosoft.com), and because you're not authenticated with that tenant, the sign-up/sign-in page is displayed.

Vá para o próximo tutorial da série para habilitar a API protegida (consulte a seção Próximas etapas).Move on to the next tutorial in the series in to enable the protected API (see the Next steps section).

Próximas etapasNext steps

Neste tutorial, você configurou um aplicativo de página única para trabalhar com um fluxo de usuário em seu locatário do Azure AD B2C para fornecer capacidade de inscrição e entrada.In this tutorial, you configured a single-page application to work with a user flow in your Azure AD B2C tenant to provide sign up and sign in capability. Você concluiu estas etapas:You completed these steps:

  • Adicionou uma URL de resposta a um aplicativo registrado em seu locatário do Azure AD B2CAdded a reply URL to an application registered in your Azure AD B2C tenant
  • Baixou um exemplo de código do GitHubDownloaded a code sample from GitHub
  • Modificou o código do aplicativo de exemplo para funcionar com seu locatárioModified the sample application's code to work with your tenant
  • Inscreveu-se usando o fluxo de inscrição/entrada de usuárioSigned up using your sign-up/sign-in user flow

Agora passe para o próximo tutorial da série para permitir acesso a uma API Web protegida por meio do SPA:Now move on to the next tutorial in the series to grant access to a protected web API from the SPA: