Configurar o registro e o login de uma conta X usando o Azure Active Directory B2C

• Criar um fluxo do usuário para que os usuários podem se registrar e entrar no seu aplicativo.
• Registrar um aplicativo Web.

• Conclua as etapas em Introdução às políticas personalizadas no Active Directory B2C. Este tutorial orienta como atualizar arquivos de política personalizados para usar a configuração de locatário do Azure AD B2C.
• Registrar um aplicativo Web.

1. Entre no Portal do Desenvolvedor X com suas credenciais de conta X.
2. Selecione o botão + Criar Projeto
3. Na guia Nome do Projeto , insira um nome preferencial do seu projeto e, em seguida, selecione o botão Avançar .
4. Na guia Caso de uso , selecione seu caso de uso preferencial e selecione Avançar.
5. Na guia Descrição do Projeto , insira a descrição do projeto e selecione o botão Avançar .
6. Na guia Nome do aplicativo, insira um nome para seu aplicativo, como azureadb2c, e selecione o botão Avançar .
7. Na guia Chaves e Tokens, copie o valor da Chave de API e do Segredo da Chave de API. Você os usará para configuração posteriormente.
8. Selecione as configurações do aplicativo para abrir as configurações do aplicativo.
9. Na parte inferior da página, nas configurações de autenticação do usuário, selecione Configurar.
10. Em Tipo de aplicativo, selecione o tipo de aplicativo apropriado, como Aplicativo Web.
11. Em Informações do Aplicativo:
    1. Para o URI de Retorno/URL de Redirecionamento, insira https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp. Se você usa um domínio personalizado, insira https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Use todas as letras minúsculas ao inserir o nome do locatário e a ID do fluxo de usuário, mesmo que sejam definidas com letras maiúsculas no Azure AD B2C. Substituir:
       • your-tenant-name pelo nome do seu locatário.
       • your-domain-name pelo seu domínio personalizado.
       • your-policy-id com o identificador do seu fluxo de usuário. Por exemplo, b2c_1a_signup_signin_x.
    2. Para a URL do site, insira https://your-tenant.b2clogin.com. Substitua your-tenant pelo nome do seu inquilino. Por exemplo, https://contosob2c.b2clogin.com. Se você usa um domínio personalizado, insira https://your-domain-name.
    3. (Opcional) Insira uma URL para os Termos de serviço, por exemplo http://www.contoso.com/tos. A URL da política é uma página que você mantém para fornecer os termos e as condições para o seu aplicativo.
    4. (Opcional) Insira uma URL para a política de Privacidade, por exemplo http://www.contoso.com/privacy. A URL da política é uma página que você mantém para fornecer informações de privacidade para o seu aplicativo.
12. Clique em Salvar.

1. Entre no Portal do Desenvolvedor X com suas credenciais de conta X.
2. Selecione o botão + Criar Projeto
3. Na guia Nome do Projeto , insira um nome preferencial do seu projeto e, em seguida, selecione o botão Avançar .
4. Na guia Caso de uso , selecione seu caso de uso preferencial e selecione Avançar.
5. Na guia Descrição do Projeto , insira a descrição do projeto e selecione o botão Avançar .
6. Na guia Nome do aplicativo, insira um nome para seu aplicativo, como azureadb2c, e selecione o botão Avançar .
7. Na guia Chaves &Tokens , copie o valor da Chave de API e do Segredo da Chave de API para posteriormente. Você usa ambos para configurar X como um provedor de identidade em seu locatário do Azure AD B2C.
8. Selecione as configurações do aplicativo para abrir as configurações do aplicativo.
9. Na parte inferior da página, nas configurações de autenticação do usuário, selecione Configurar.
10. Em Tipo de aplicativo, selecione o tipo de aplicativo apropriado, como Aplicativo Web.
11. Em Informações do Aplicativo:
    1. Para o URI de Retorno/URL de Redirecionamento, insira https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp. Se você usa um domínio personalizado, insira https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp. Use todas as letras minúsculas ao inserir o nome do locatário e a ID do fluxo de usuário, mesmo que sejam definidas com letras maiúsculas no Azure AD B2C. Substituir:
       • your-tenant-name pelo nome do seu locatário.
       • your-domain-name pelo seu domínio personalizado.
       • your-user-flow-name com o identificador do seu fluxo de usuário. Por exemplo, b2c_1_signup_signin_x.
    2. Para a URL do site, insira https://your-tenant.b2clogin.com. Substitua your-tenant pelo nome do seu inquilino. Por exemplo, https://contosob2c.b2clogin.com. Se você usa um domínio personalizado, insira https://your-domain-name.
    3. Insira uma URL para os Termos de serviço, por exemplo http://www.contoso.com/tos. A URL da política é uma página que você mantém para fornecer os termos e as condições para o seu aplicativo.
    4. Insira uma URL para a política de Privacidade, por exemplo http://www.contoso.com/privacy. A URL da política é uma página que você mantém para fornecer informações de privacidade para o seu aplicativo.
12. Clique em Salvar.

Configurar X como um provedor de identidade

1. Entre no portal do Azure com uma conta que tenha pelo menos privilégios de Administrador do Provedor de Identidade Externo.
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. Escolha Todos os serviços no canto superior esquerdo do portal do Azure, pesquise e selecione O Azure AD B2C.
4. Selecione provedores de identidade e, em seguida, selecione Twitter.
5. Insira um Nome. Por exemplo, X.
6. Para a ID do cliente, insira a Chave de API do aplicativo X criado anteriormente.
7. Para o segredo do cliente, insira o segredo da chave de API que você gravou.
8. Clique em Salvar.

Adicionar o provedor de identidade X a um fluxo de usuário

Neste ponto, o provedor de identidade X foi configurado, mas ainda não está disponível em nenhuma das páginas de login. Para adicionar o provedor de identidade X a um fluxo de usuário:

1. No locatário do Azure AD B2C, selecione Fluxos dos usuários.
2. Selecione o fluxo de usuário que você deseja adicionar ao provedor de identidade X.
3. Nos provedores de identidade social, selecione o Twitter.
4. Clique em Salvar.

Testar seu fluxo de usuário

1. Para testar a política, selecione Executar fluxo de usuário.
2. Em Aplicativo, selecione o aplicativo Web denominado testapp1 registrado anteriormente. A URL de resposta deve mostrar https://jwt.ms.
3. Selecione o botão Executar fluxo de usuário.
4. Na página de inscrição ou entrada, selecione o Twitter para entrar com a conta X.

Criar uma chave de política

Você precisa armazenar a chave secreta que você registrou anteriormente para o aplicativo X em seu locatário do Azure AD B2C.

1. Entre 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, pesquise e selecione Azure AD B2C.
4. No menu à esquerda, em Políticas, selecione Identity Experience Framework.
5. Selecione Chaves de Política e, em seguida, selecione Adicionar.
6. Para Opções, escolha Manual.
7. Insira um Nome para a chave de política. Por exemplo, XSecret. O prefixo B2C_1A_ é adicionado automaticamente ao nome da chave.
8. Para Segredo, insira o valor do segredo da chave de API que você registrou anteriormente.
9. Para uso de chave, selecione Signature.
10. Clique em Criar.

Configurar X como um provedor de identidade

Para permitir que os usuários entrem usando uma conta do X, defina a conta como um provedor de declarações com o qual o Azure AD B2C pode comunicar-se por meio de um ponto de extremidade. O endpoint fornece um conjunto de declarações que são usadas pelo Azure AD B2C para verificar se um usuário específico se autenticou.

Você pode definir uma conta X como um provedor de declarações adicionando-a ao elemento ClaimsProviders no arquivo de extensão da política. Consulte o pacote inicial de política personalizado que você baixou nos pré-requisitos deste artigo.

1. Abra TrustFrameworkExtensions.xml.

2. Localize o elemento ClaimsProviders. Se ele não existir, adicione-o sob o elemento raiz.

3. Adicione um novo ClaimsProvider da seguinte maneira:

   <ClaimsProvider>
     <Domain>x.com</Domain>
     <DisplayName>X</DisplayName>
     <TechnicalProfiles>
       <TechnicalProfile Id="Twitter-OAuth1">
         <DisplayName>X</DisplayName>
         <Protocol Name="OAuth1" />
         <Metadata>
           <Item Key="ProviderName">Twitter</Item>
           <Item Key="authorization_endpoint">https://api.twitter.com/oauth/authenticate</Item>
           <Item Key="access_token_endpoint">https://api.twitter.com/oauth/access_token</Item>
           <Item Key="request_token_endpoint">https://api.twitter.com/oauth/request_token</Item>
           <Item Key="ClaimsEndpoint">https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true</Item>
           <Item Key="ClaimsResponseFormat">json</Item>
           <Item Key="client_id">Your X application API key</Item>
         </Metadata>
         <CryptographicKeys>
           <Key Id="client_secret" StorageReferenceId="B2C_1A_TwitterSecret" />
         </CryptographicKeys>
         <OutputClaims>
           <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="user_id" />
           <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="screen_name" />
           <OutputClaim ClaimTypeReferenceId="email" />
           <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="twitter.com" />
           <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
         </OutputClaims>
         <OutputClaimsTransformations>
           <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
           <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
           <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
           <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
         </OutputClaimsTransformations>
         <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
       </TechnicalProfile>
     </TechnicalProfiles>
   </ClaimsProvider>
   

4. Substitua o valor de client_id pela chave de API que você registrou anteriormente.

5. Salve o arquivo.

Adicione um percurso de usuário

Neste ponto, o provedor de identidade foi configurado, mas ainda não está disponível em nenhuma das páginas de entrada. Se você não tiver seu próprio percurso de usuário personalizado, crie a duplicata de um percurso de usuário de um modelo existente; caso contrário, passe para a próxima etapa.

1. Abra o arquivo TrustFrameworkBase.xml do starter pack.
2. Localize e copie todo o conteúdo do elemento UserJourney que inclui Id="SignUpOrSignIn".
3. Abra o TrustFrameworkExtensions.xml e localize o elemento UserJourneys. Se o elemento não existir, adicione um.
4. Cole todo o conteúdo do elemento UserJourney que você copiou como filho do elemento UserJourneys.
5. Renomeie a ID do percurso de usuário. Por exemplo, Id="CustomSignUpSignIn".

Adicione o provedor de identidade a um percurso de usuário

Agora que você tem um percurso de usuário, adicione a ele o novo provedor de identidade. Primeiro, adicione um botão de entrada e, em seguida, vincule o botão a uma ação. A ação é o perfil técnico criado anteriormente.

1. No percurso de usuário, localize o elemento da etapa de orquestração que inclui Type="CombinedSignInAndSignUp" ou Type="ClaimsProviderSelection". Normalmente é a primeira etapa de orquestração. O elementoClaimsProviderSelectionscontém uma lista de provedores de identidade que um usuário pode usar para se conectar. A ordem dos elementos controla a ordem dos botões de entrada apresentados para o usuário. Adicione um elemento XML ClaimsProviderSelection. Defina o valor de TargetClaimsExchangeId com um nome amigável.

2. Na próxima etapa de orquestração, adicione um elemento ClaimsExchange. Defina a ID como o valor da ID de troca de declarações de destino. Atualize o valor de TechnicalProfileReferenceId para a ID do perfil técnico você já criou.

O XML a seguir demonstra as duas primeiras etapas de orquestração de um percurso do usuário com o provedor de identidade:

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="TwitterExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="TwitterExchange" TechnicalProfileReferenceId="Twitter-OAuth1" />
  </ClaimsExchanges>
</OrchestrationStep>

Configurar a política de terceira parte confiável

A política de terceira parte confiável, por exemplo SignUpSignIn.xml, especifica a jornada do usuário que o Azure AD B2C será executado. Localize o elemento DefaultUserJourney na terceira parte confiável. Atualize a ReferenceId para corresponder à ID do percurso do usuário, na qual você adicionou o provedor de identidade.

No exemplo a seguir, para o percurso do CustomSignUpSignIn usuário, o ReferenceId é definido como CustomSignUpSignIn:

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

Carregar a política personalizada

1. Entre no portal do Azure.
2. Selecione o ícone Diretório + Assinatura na barra de ferramentas do portal e selecione o diretório que contém o locatário do Azure AD B2C.
3. No portal do Azure, pesquise e selecione Azure AD B2C.
4. Em Políticas, selecione Identity Experience Framework.
5. Selecione Carregar política personalizadae, em seguida, carregue os dois arquivos de política que você alterou, na seguinte ordem: a política de extensão, por exemplo TrustFrameworkExtensions.xml, a política de terceira parte confiável, como SignUpSignIn.xml.

Testar sua política personalizada

1. Selecione a política de terceira parte confiável, por exemplo, B2C_1A_signup_signin.
2. Em Aplicativo, selecione o aplicativo Web que você registrou anteriormente. A URL de resposta deve mostrar https://jwt.ms.
3. Clique no botão Executar agora.
4. Na página de inscrição ou entrada, selecione o Twitter para entrar com a conta X.