Adicionar atributos de usuário e personalizar entrada do usuário no Azure Active Directory B2C

  • Artigo

Antes de começar, use o seletor Escolher um tipo de política para escolher o tipo de política que você está configurando. O Azure Active Directory B2C oferece dois métodos para definir como os usuários interagem com seus aplicativos: por meio de fluxos dos usuários predefinidos ou de políticas personalizadas totalmente configuráveis. As etapas necessárias neste artigo são diferentes para cada método.

Neste artigo, você coleta um novo atributo durante seu percurso de inscrição no Azure Active Directory B2C (Azure AD B2C). Você obterá a cidade dos usuários, configurará como uma lista suspensa e definirá se ela precisa ser fornecida.

Importante

Este exemplo usa a declaração interna “cidade”. Em vez disso, você pode escolher um dos atributos internos do Azure AD B2C ou um atributo personalizado com suporte. Para usar um atributo personalizado, habilite atributos personalizados. Para usar um atributo personalizado ou integrado diferente, substitua “cidade” pelo atributo de sua escolha,por exemplo, o atributo interno jobTitle ou um atributo personalizado como extension_loyaltyId.

Pré-requisitos

Adicionar atributos de usuário ao seu fluxo de usuário

  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 o locatário do Azure AD B2C no menu Diretórios + assinaturas.
  3. Em Serviços do Azure, selecione Azure AD B2C. Ou use a caixa de pesquisa para localizar e selecionar Azure AD B2C.
  4. No locatário do Azure AD B2C, selecione Fluxos dos usuários.
  5. Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
  6. Selecione Atributos de inscrição e, em seguida, selecione o atributo do usuário (por exemplo, "Cidade").
  7. Clique em Salvar.

Fornecer declarações opcionais ao seu aplicativo

As declarações de aplicativo são valores que são retornados para o aplicativo. Atualize seu fluxo de usuário para conter as declarações desejadas.

  1. Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
  2. Selecione Declarações do aplicativo.
  3. Selecione os atributos que você deseja enviar de volta para seu aplicativo (por exemplo, "Cidade").
  4. Clique em Salvar.

Configurar tipo de entrada de atributos de usuário

  1. Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.

  2. Selecione Layouts de página.

  3. Selecione Página de inscrição da conta local.

  4. Em Atributos de usuário, selecione Cidade.

    1. Na lista suspensa Opcional, selecione Não.
    2. No tipo de entrada do usuário, selecione o tipo de entrada do usuário atual, como TextBox, para abrir um painel de janela do editor de tipo de entrada do usuário.
    3. Na lista suspensa Tipo de entrada de usuário, selecione DropdownSingleSelect.
    4. No texto e nos valores, insira os pares de texto e valor que compõem o conjunto de respostas para o atributo. O texto é exibido na interface da Web para seu fluxo e os valores são armazenados em Azure AD B2C para o texto selecionado. Opcional: Use os botões "Mover para cima/para baixo" para reordenar itens suspensos.

  5. Selecione OK. Opcional: Use os botões "Mover para cima/para baixo" para reordenar os atributos de usuário na página de inscrição.

  6. Selecione Salvar.

    Web page call green API.

Fornecer uma lista de valores usando LocalizedCollections

Para fornecer uma lista definida de valores para o atributo cidade:

  1. Habilite a personalização de idioma no fluxo do usuário
  2. Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
  3. Na página Idiomas do fluxo de usuário, selecione o idioma que você quer personalizar.
  4. Em Arquivos de recursos no nível da página, selecione Página de entrada de conta local.
  5. Selecione Baixar Padrões (ou Baixar substituições, se esse idioma já foi editado anteriormente).
  6. Criar um atributo LocalizedCollections.

O LocalizedCollections é uma matriz de pares de Name e Value. A ordem dos itens será a ordem em que elas são exibidas.

  • ElementId é o atributo do usuário ao qual esse atributo LocalizedCollections é uma resposta.
  • Name é o valor mostrado para o usuário.
  • Value é o que é retornado na declaração quando essa opção é selecionada.
{
  "LocalizedStrings": [...],
  "LocalizedCollections": [
    {
      "ElementType": "ClaimType",
      "ElementId": "city",
      "TargetCollection": "Restriction",
      "Override": true,
      "Items": [
        {
          "Name": "Berlin",
          "Value": "Berlin"
        },
        {
          "Name": "London",
          "Value": "London"
        },
        {
          "Name": "Seattle",
          "Value": "Seattle"
        }
      ]
    }
  ]
}

Carregamento das suas alterações

  1. Após concluir as alterações no arquivo JSON, retorne para o locatário B2C.
  2. Selecione Fluxos de usuário e selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
  3. Selecione os Idiomas.
  4. Selecione o idioma para o qual você deseja traduzir.
  5. Em Arquivos de recursos no nível da página, selecione Página de assinatura de conta local.
  6. Selecione o ícone da pasta e selecione o arquivo JSON para upload. As alterações são salvas no fluxo de usuário automaticamente.

Testar seu fluxo de usuário

  1. Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
  2. Para testar a política, selecione Executar fluxo de usuário.
  3. Em Aplicativo, selecione o aplicativo Web denominado testapp1 registrado anteriormente. A URL de resposta deve mostrar https://jwt.ms.
  4. Clique em Executar fluxo de usuário

Visão geral

Você pode coletar dados iniciais dos seus usuários usando o percurso do usuário de inscrição ou de entrada. Declarações adicionais podem ser coletadas posteriormente usando um percurso do usuário de edição de perfil. Toda vez que o Azure AD B2C coleta informações diretamente do usuário de maneira interativa, ele usa o perfil técnico autodeclarado. Neste exemplo, você:

  1. Define uma declaração de "cidade".
  2. Pergunta ao usuário sobre a cidade dele.
  3. Mantém a cidade para o perfil do usuário no diretório Azure AD B2C.
  4. Lê a declaração de cidade do diretório Azure AD B2C em cada entrada.
  5. Retorna a cidade para seu aplicativo de terceira parte confiável após a entrada ou inscrição.

Definir uma declaração

Uma declaração fornece um armazenamento temporário de dados durante uma execução de política do Azure AD B2C. O esquema de declarações é o lugar em que você declara suas declarações. Os elementos a seguir são usados para definir a declaração:

  • DisplayName – Uma cadeia de caracteres que define o rótulo voltado para o usuário.
  • DataType – o tipo da declaração.
  • UserHelpText – Ajuda o usuário a entender o que é necessário.
  • Userinputtype – o tipo de controle de entrada, como caixa de texto, seleção de rádio, lista suspensa ou várias seleções.

Abra o arquivo de extensões da sua política. Por exemplo, SocialAndLocalAccounts/TrustFrameworkExtensions.xml.

  1. Pesquise o elemento BuildingBlocks. Se o elemento não existir, adicione-o.
  2. Localize o elemento ClaimsSchema. Se o elemento não existir, adicione-o.
  3. Adicione a declaração de cidade ao elementoClaimsSchema.
<!-- 
<BuildingBlocks>
  <ClaimsSchema> -->
    <ClaimType Id="city">
      <DisplayName>City where you work</DisplayName>
      <DataType>string</DataType>
      <UserInputType>DropdownSingleSelect</UserInputType>
      <Restriction>
        <Enumeration Text="Berlin" Value="berlin" />
        <Enumeration Text="London" Value="london" />
        <Enumeration Text="Seattle" Value="seattle" />
      </Restriction>
    </ClaimType>
  <!-- 
  </ClaimsSchema>
</BuildingBlocks>-->

Inclua o atributo SelectByDefault em um elemento Enumeration para selecioná-lo por padrão quando a página for carregada pela primeira vez. Por exemplo, para pré-selecionar o item Londres, altere o elemento Enumeration como no exemplo a seguir:

<Restriction>
  <Enumeration Text="Berlin" Value="berlin" />
  <Enumeration Text="London" Value="london" SelectByDefault="true" />
  <Enumeration Text="Seattle" Value="seattle" />
</Restriction>

Adicionar uma declaração à interface do usuário

Os seguintes perfis técnicos são autodeclarados, invocados quando se espera que um usuário forneça entrada:

  • LocalAccountSignUpWithLogonEmail – fluxo de inscrição de conta local.
  • SelfAsserted-social – entrada do usuário da primeira vez da conta federada.
  • SelfAsserted-ProfileUpdate – editar fluxo de perfil.

Para coletar a declaração de cidade durante a inscrição, ela deve ser adicionada como uma declaração de saída ao LocalAccountSignUpWithLogonEmail perfil técnico. Substitua esse perfil técnico no arquivo de extensão. Especifique a lista completa de declarações de saída para controlar a ordem em que as declarações são apresentadas na tela. Localize o elemento ClaimsProviders. Adicione um novo ClaimsProviders da seguinte maneira:

<ClaimsProvider>
  <DisplayName>Local Account</DisplayName>
  <TechnicalProfiles>
    <!--Local account sign-up page-->
    <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
      <OutputClaims>
       <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
       <OutputClaim ClaimTypeReferenceId="newPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="reenterPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="displayName" />
       <OutputClaim ClaimTypeReferenceId="givenName" />
       <OutputClaim ClaimTypeReferenceId="surName" />
       <OutputClaim ClaimTypeReferenceId="city"/>
     </OutputClaims>
   </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Para coletar a declaração de cidade após a entrada inicial com uma conta federada, ela deve ser adicionada como uma declaração de saída no SelfAsserted-Social perfil técnico. Para que os usuários da conta local e federada possam editar seus dados de perfil posteriormente, adicione as declarações de entrada e saída no SelfAsserted-ProfileUpdate perfil técnico. Substitua esses perfis técnicos no arquivo de extensão. Especifique a lista completa das declarações de saída para controlar a ordem em que as declarações são apresentadas na tela. Localize o elemento ClaimsProviders. Adicione um novo ClaimsProviders da seguinte maneira:

<ClaimsProvider>
  <DisplayName>Self Asserted</DisplayName>
  <TechnicalProfiles>
    <!--Federated account first-time sign-in page-->
    <TechnicalProfile Id="SelfAsserted-Social">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName"/>
        <OutputClaim ClaimTypeReferenceId="surname"/>
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
    <!--Edit profile page-->
    <TechnicalProfile Id="SelfAsserted-ProfileUpdate">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName" />
        <OutputClaim ClaimTypeReferenceId="surname" />
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Ler e gravar uma declaração

Os perfis técnicos a seguir são os Perfis técnicos do Active Directory, que leem e gravam os dados na ID do Microsoft Entra.
Use PersistedClaims para gravar dados no perfil do usuário e OutputClaims para ler dados do perfil do usuário dentro dos respectivos perfis técnicos do Active Directory.

Substitua esses perfis técnicos no arquivo de extensão. Localize o elemento ClaimsProviders. Adicione um novo ClaimsProviders da seguinte maneira:

<ClaimsProvider>
  <DisplayName>Azure Active Directory</DisplayName>
  <TechnicalProfiles>
    <!-- Write data during a local account sign-up flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingLogonEmail">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during a federated account first-time sign-in flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingAlternativeSecurityId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during edit profile flow. -->
    <TechnicalProfile Id="AAD-UserWriteProfileUsingObjectId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Read data after user resets the password. -->
    <TechnicalProfile Id="AAD-UserReadUsingEmailAddress">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a local account. -->
    <TechnicalProfile Id="AAD-UserReadUsingObjectId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a federated account. -->
    <TechnicalProfile Id="AAD-UserReadUsingAlternativeSecurityId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Incluir uma declaração no token

Para retornar a declaração de cidade de volta para o aplicativo de terceira parte confiável, adicione uma declaração de saída ao arquivo SocialAndLocalAccounts/SignUpOrSignIn.xml. A declaração de saída será adicionada no token, após um percurso do usuário bem-sucedido, e será enviada para o aplicativo. Modifique o elemento de perfil técnico na seção de terceira parte confiável para adicionar a cidade como uma declaração de saída.

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <TechnicalProfile Id="PolicyProfile">
    <DisplayName>PolicyProfile</DisplayName>
    <Protocol Name="OpenIdConnect" />
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="displayName" />
      <OutputClaim ClaimTypeReferenceId="givenName" />
      <OutputClaim ClaimTypeReferenceId="surname" />
      <OutputClaim ClaimTypeReferenceId="email" />
      <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub"/>
      <OutputClaim ClaimTypeReferenceId="identityProvider" />
      <OutputClaim ClaimTypeReferenceId="tenantId" AlwaysUseDefaultValue="true" DefaultValue="{Policy:TenantObjectId}" />
      <OutputClaim ClaimTypeReferenceId="city" DefaultValue="" />
    </OutputClaims>
    <SubjectNamingInfo ClaimType="sub" />
  </TechnicalProfile>
</RelyingParty>

Carregar e testar a política personalizada atualizada

  1. Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para o locatário do Azure AD B2C no menu Diretórios + assinaturas.
  2. Pesquise e selecione Azure AD B2C.
  3. Em Políticas, selecione Identity Experience Framework.
  4. Selecione Carregar política personalizada.
  5. Carregue os arquivos de política que você alterou anteriormente.

Teste a 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 de entrada, selecione inscreva-se agora mesmo para se inscrever. Termine de inserir as informações do usuário, incluindo a cidade e o nome, e clique em Criar. Você deverá ver o conteúdo do token retornado.

A tela de inscrição deve ser semelhante à seguinte captura:

Screenshot of modified sign-up option

O token enviado de volta ao seu aplicativo inclui a declaração city.

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1583500140,
  "nbf": 1583496540,
  "ver": "1.0",
  "iss": "https://contoso.b2clogin.com/f06c2fe8-709f-4030-85dc-38a4bfd9e82d/v2.0/",
  "aud": "e1d2612f-c2bc-4599-8e7b-d874eaca1ee1",
  "acr": "b2c_1a_signup_signin",
  "nonce": "defaultNonce",
  "iat": 1583496540,
  "auth_time": 1583496540,
  "name": "Emily Smith",
  "email": "joe@outlook.com",
  "given_name": "Emily",
  "family_name": "Smith",
  "city": "Berlin"
  ...
}

[Opcional] Localizar a interface do usuário

O Azure AD B2C permite que você acomode sua política em diferentes idiomas. Para obter mais informações, saiba como personalizar a experiência de idioma. Para localizar a página de inscrição, configure a lista de idiomas com suporte e forneça rótulos específicos de um idioma.

Observação

Ao usar o LocalizedCollection com os rótulos específicos de um idioma, você pode remover a coleção Restriction da definição da declaração.

O exemplo a seguir demonstra como fornecer a lista de cidades para inglês e espanhol. Ambos definem a coleção Restriction da declaração cidade com uma lista de itens para inglês e espanhol. SelectByDefault torna um item selecionado por padrão quando a página é carregada pela primeira vez.

<!-- 
<BuildingBlocks>-->
  <Localization Enabled="true">
    <SupportedLanguages DefaultLanguage="en" MergeBehavior="Append">
      <SupportedLanguage>en</SupportedLanguage>
      <SupportedLanguage>es</SupportedLanguage>
    </SupportedLanguages>
    <LocalizedResources Id="api.localaccountsignup.en">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlin" Value="Berlin"></Item>
          <Item Text="London" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
    <LocalizedResources Id="api.localaccountsignup.es">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlina" Value="Berlin"></Item>
          <Item Text="Londres" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
  </Localization>
<!-- 
</BuildingBlocks>-->

Depois de adicionar o elemento de localização, edite a definição de conteúdo com a localização. No exemplo a seguir, os recursos localizados personalizados em inglês (en) e espanhol (es) são adicionados à página de inscrição:

<!-- 
<BuildingBlocks>
  <ContentDefinitions> -->
   <ContentDefinition Id="api.localaccountsignup">
    <LocalizedResourcesReferences MergeBehavior="Prepend">
        <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
        <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    </LocalizedResourcesReferences>
   </ContentDefinition>
  <!-- 
  </ContentDefinitions>
</BuildingBlocks>-->

Próximas etapas

Próximas etapas