Passo a passo para implementação básica de utilização do Azure AD B2C com User Flows SignUp, SignIn e PasswordReset.
Assista a nossa Live do < Papo de Dev /> no Youtube
Faça o download da apresentação PowerPoint
- Criação de Tenant;
- Criação e configuração de aplicação no portal;
- Criação e configuração de User Flow: Sign Up / Sign In / Reset Password;
- Testes no portal: Sign Up / Sign In / Reset Password;
- Instrumentação em aplicação .NET Core;
Após realizar o login em sua conta no Microsoft Azure, adicione um novo recurso clicando no ícone demonstrado na imagem abaixo:
Digite "b2c" na caixa de pesquisa e localize o recurso "Azure Active Directory B2C".
Clique em "Create" para realizar a criação do recurso.
Escolha a opção "Create a new Azure AD B2C Tenant".
Selecione o tipo de Tenant conforme demonstrado abaixo:
Nesta mesma página, selecione a guia "Configuration" e vamos adicionar as informações do nosso diretório.
- Defina o nome da Organização;
- Defina o nome do Domínio;
- Crie um novo grupo de recursos (Agrupamento lógico de recursos);
Clique em "Review + Create".
Atenção: Para criação deste recurso é preciso possuir uma Subscription vinculada a sua conta do Azure mesmo que o recurso seja gratuíto.
Conclua a criação clicando em "Create".
Aguarde a criação do "Resource Group" e do "Tenant.
Assim que a criação dos recursos forem concluídos, você pode clicar no link disponível na página e será redirecionado para o Tenant do Azure AD B2C.
Na caixa de pesquisa localizada no topo da página escreva "b2c", localize o recurso chamdo "Azure AD B2C" e clique nele e você será direcionado para página principal deste recurso.
Localize no menu lateral a opção "App Registrations" e clique nela.
Dentro de App Registrations, registre um novo app clicando em "New registration".
Adicione o Name, o Account Type e a Redirect URI que é para onde o B2C deverá redirecionar o usuário após realização do Sign In.
Clique em Register para concluir.
Na página do seu app criado, encontre no menu lateral a opção "Authentication" e clique nela.
Adicione agora uma nova URI apontando para a aplicação desejada. Neste exemplo, adicionamos um redirecionamento para aplicação que irá rodar no localhost da máquina (nossa aplicação .NET Core).
https://localhost:5001/signin-oidcVocê poderá adicionar aqui o endereço de sua aplicação mas deve lembrar que esta URI sempre deverá terminar com "/signin-oidc".
Marque as duas caixas de seleção:
- Access tokens (used for implicit flows)
- ID tokens (used for implicit and hybrid flows)
Na parte inferior da página, ative a opção "Allow public client flows".
Conclua a operação clicando em "Save".
Voltando para página principal do Azure AD B2C, localize no menu lateral a opção "User Flows" e clique em "New user flow" para adicionarmos a jornada de usuário do nosso Sign Up & Sign In.
Escolha o tipo de user flow "Sign Up and Sign In" e utilizando a versão recomendada clique em "Create".
Defina o nome do nosso user flow e guarde esta informação, pois iremos utiliza-la mais adiante.
Marque as opções demonstradas nas imagens a seguir:
Escolha a coleção de atributos e claims de retorno.
Clique em "Create" para concluir.
Agora vamos adicionar na jornada de usuário o user flow de "Reset Password" do mesmo modo que acabamos de fazer, veja a imagem abaixo:
Defina o nome desta user flow e guarde-o para utilizarmos mais adiante.
Marque as claims que a user deverá retornar e clique no botão "Create" para concluir.
Na página de "User Flows", clique no fluxo de Sign Up & Sign In.
Localize e clique na a opção "Properties".
Na seção "Password configuration" marque a opção "Self-service password reset" para permitir que o link de "Forgot your password" do fluxo de Sign Up & Sign In aponte para nossa user flow de "Reset Password" recem criada.
Clique em "Save" no topo da página para concluir a operação.
Voltando a página da nossa user flow de Sign Up & Sign In, vamos alterar a configuração de idioma para utilizar Português Brasil.
Na seção "Customize", localize a opção "Languages" e clique nela.
Clique na opção "Enable language customization" localizada no topo da página.
Selecione o idioma "português (Brasil) pt-BR". Abrirá uma janela no lado direito para habilitar a utilização deste idioma.
Marque a opção "Enabled" e clique em "Save" para aplicar.
Agora estamos prontos para testar nossa jornada de usuário completa via portal do Azure.
Na página da nossa user flow de Sign Up & Sign In, localise o botão "Run user flow" e clique nele.
Abrirá uma janela no lado direito com as opções de execução da nossa user flow.
Selecione "https://jwt.ms" na opção de "Reply URL" para podermos ver o token gerado após a conclusão do Sign Up & Sign In.
Clique em "Run user flow" para executar.
Será apresentada a jornada de usuário de Sign Up & Sign In com Reset Password funcionando.
Bora testar...
Agora que nossas configurações e apontontamentos do Azure AD B2C estão protas, vamos criar uma "Secret" para podermos plugar nossa jornada de usuário ao nosso projeto .NET Core.
Volte a página de "App registrations" e acesse seu app criado.
Localize no menu a opção "Certificaes & secrets" em seguida clique em "New client secret".
Será aberta uma janela do lado direito para configuração da "Secret".
Adicione a "Description" e "Expires" para a secret.
Clique no botão "Save" para concluir.
IMPORTANTE: Após a criação da "Secret", copie o atributo "Value" dela e guarde em local seguro. Esta informação não poderá mais ser resgatada e em caso de perda, nova secret deverá ser criada.
Veja abaixo a secret recem criada com o valor exposto e uma já existente que não permite mais a visualização da informação.
Agora, vamos obter as informações necessárias para configurarmos nosso projeto .NET Core.
Precisamos das seguintes informações:
-
ClientId = Localizado na página de "App registrations".
-
Tenant = Localizado na página do nosso app registrado.
-
SignUpSignInPolicyId e ResetPasswordPolicyId = Nome das user flows criadas
-
ClientSecret = Secret que acabamos de criar (espero que você tenha guardado o valor, né!!!).
Agora sim!!
Abra o projeto no Visual Studio e adicione as informações no arquivo o appsettings.json
IMPORTANTE: Deverá ser alterado o valor do texto "< TENANT >" pelo mesmo nome contido na chave Tenant acima, mas sem o domínio ".onmicrosoft.com".
Execute o projeto no Visual Studio e clique na opção login no canto superior direito da página.
Será direcionado para dentro do nosso Tenant e executada a jornada do usuário.
Realize as operações de Sign Up, Sign In e Reset Password para testar o funcionamento do projeto.
Quando a jornada do usuário for concluída o Azure AD B2C irá redirecionar para nossa aplicação com o Token válido e as claims definidas na configuração.
Perceba que retornou a claim "DisplayName" contendo a informação que adicionei no momento do Sign Up.
