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

Artigo
11/08/2023

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

Neste artigo, você coleta um novo atributo durante sua jornada de inscrição no Azure Ative Directory B2C (Azure AD B2C). Você obterá a cidade dos usuários, configurá-la-á como uma lista suspensa e definirá se é necessário fornecê-la.

Importante

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

Pré-requisitos

Crie um fluxo de usuários para que os usuários possam se inscrever e entrar em seu aplicativo.
Registe uma aplicação Web.

Conclua as etapas em Introdução às políticas personalizadas no Ative Directory B2C
Registe uma aplicação Web.

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

Inicie sessão no portal do Azure.
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 .
Em Serviços do Azure, selecione Azure AD B2C. Ou use a caixa de pesquisa para localizar e selecionar Azure AD B2C.
Em seu locatário do Azure AD B2C, selecione Fluxos de usuário.
Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Selecione Atributos de usuário e, em seguida, selecione o atributo de usuário (por exemplo, "Cidade").
Selecione Guardar.

Fornecer declarações opcionais ao seu aplicativo

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

Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Selecione Afirmações de aplicação.
Selecione os atributos que você deseja enviar de volta para seu aplicativo (por exemplo, "Cidade")..
Selecione Guardar.

Configurar o tipo de entrada de atributos do usuário

Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Selecione Layouts de página.
Selecione Página de inscrição da conta local.
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 do usuário, selecione DropdownSingleSelect.
4. Em Texto e 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 no Azure AD B2C para o Texto selecionado. Opcional: Use os botões "Mover para cima/baixo" para reordenar os itens suspensos.
Selecione OK. Opcional: Use os botões "Mover para cima/para baixo" para reordenar os atributos do usuário na página de inscrição.
Selecione Guardar.

Fornecer uma lista de valores usando coleções localizadas

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

Habilitar a personalização de idioma no fluxo do usuário
Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Na página Idiomas do fluxo de usuário, selecione o idioma que deseja personalizar.
Em Arquivos de recursos no nível da página, selecione Página de inscrição da conta local.
Selecione Padrões de download (ou Substituições de download se você tiver editado esse idioma anteriormente).
Crie um LocalizedCollections atributo.

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

ElementId é o atributo de usuário ao qual esse LocalizedCollections atributo é uma resposta.
Name é o valor mostrado ao usuário.
Value é o que é retornado na declaração quando esta 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"
        }
      ]
    }
  ]
}

Carregue as alterações

Depois de concluir as alterações no arquivo JSON, volte para o locatário B2C.
Selecione Fluxos de usuário e selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Selecione Idiomas.
Selecione o idioma para o qual deseja traduzir.
Em Arquivos de recursos no nível da página, selecione Página de inscrição da conta local.
Selecione o ícone da pasta e selecione o arquivo JSON a ser carregado. As alterações são salvas automaticamente no fluxo de usuários.

Teste seu fluxo de usuários

Selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
Para testar sua política, selecione Executar fluxo de usuário.
Em Application, selecione o aplicativo Web chamado testapp1 que você registrou anteriormente. O URL de resposta deve mostrar https://jwt.ms.
Clique em Executar fluxo de usuário

Descrição geral

Você pode coletar dados iniciais de seus usuários usando a jornada do usuário de inscrição ou login. Declarações adicionais podem ser coletadas posteriormente usando uma jornada de usuário de edição de perfil. Sempre que o Azure AD B2C coleta informações diretamente do usuário interativamente, ele usa o perfil técnico autodeclarado. Neste exemplo, você:

Defina uma reivindicação de "cidade".
Pergunte ao usuário sua cidade.
Persista a cidade para o perfil de usuário no diretório B2C do Azure AD.
Leia a declaração de cidade no diretório B2C do Azure AD em cada entrada.
Devolva a cidade ao seu aplicativo de terceira parte confiável após entrar ou se inscrever.

Definir uma reivindicação

Uma declaração fornece um armazenamento temporário de dados durante a execução de uma política do Azure AD B2C. O esquema de declarações é o local onde você declara suas reivindicações. Os seguintes elementos são usados para definir a reivindicaçã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.

Procure o elemento BuildingBlocks . Se o elemento não existir, adicione-o.
Localize o elemento ClaimsSchema . Se o elemento não existir, adicione-o.
Adicione a declaração de cidade ao elemento ClaimsSchema .

<!-- 
<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 Enumeration elemento para torná-lo selecionado por padrão quando a página for carregada pela primeira vez. Por exemplo, para pré-selecionar o item Londres, altere o elemento como o Enumeration 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 da conta local.
SelfAsserted-Social - Entrada de usuário pela primeira vez na conta federada.
SelfAsserted-ProfileUpdate - Edite o fluxo de perfil.

Para coletar a reivindicação da cidade durante a LocalAccountSignUpWithLogonEmail inscrição, ela deve ser adicionada como uma reivindicação de saída ao perfil técnico. Substitua este perfil técnico no arquivo de extensão. Especifique toda a lista de declarações de saída para controlar a ordem em que as declarações são apresentadas na tela. Encontre 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 o login inicial com uma conta federada, ela deve ser adicionada como uma declaração de saída ao SelfAsserted-Social perfil técnico. Para que os usuários de contas locais e federadas possam editar seus dados de perfil posteriormente, adicione as declarações de entrada e saída ao SelfAsserted-ProfileUpdate perfil técnico. Substitua esses perfis técnicos no arquivo de extensão. Especifique toda a lista das declarações de saída para controlar a ordem em que as declarações são apresentadas na tela. Encontre 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 escrever uma reivindicação

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

Substitua esses perfis técnicos no arquivo de extensão. Encontre 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 ao aplicativo de terceira parte confiável, adicione uma declaração de saída ao SocialAndLocalAccounts/SignUpOrSignIn.xml arquivo. A declaração de saída será adicionada ao token após uma jornada de usuário bem-sucedida 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>

Carregue e teste sua política personalizada atualizada

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 .
Procure e selecione Azure AD B2C.
Em Políticas, selecione Identity Experience Framework.
Selecione Carregar política personalizada.
Carregue os arquivos de política que você alterou anteriormente.

Testar a política personalizada

Selecione sua política de terceira parte confiável, por exemplo B2C_1A_signup_signin.
Em Aplicativo, selecione um aplicativo Web que você registrou anteriormente. O URL de resposta deve mostrar https://jwt.ms.
Selecione o botão Executar agora .
Na página de inscrição ou login, selecione Inscrever-se agora para se inscrever. Termine de inserir as informações do usuário, incluindo o nome da cidade, e clique em Criar. Você deve ver o conteúdo do token que foi retornado.

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

Screenshot of modified sign-up option

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

{
  "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 acomodar sua política em diferentes idiomas. Para obter mais informações, saiba como personalizar a experiência linguística. Para localizar a página de inscrição, configure a lista de idiomas suportados e forneça rótulos específicos do idioma.

Nota

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

O exemplo a seguir demonstra como fornecer a lista de cidades para inglês e espanhol. Ambos definem a Restriction coleção da cidade reivindicada com uma lista de itens para inglês e espanhol. O 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, 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óximos passos

Saiba mais sobre o elemento ClaimsSchema na referência do IEF.
Saiba como usar atributos personalizados no Azure AD B2C.

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

Pré-requisitos

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

Fornecer declarações opcionais ao seu aplicativo

Configurar o tipo de entrada de atributos do usuário

Fornecer uma lista de valores usando coleções localizadas

Carregue as alterações

Teste seu fluxo de usuários

Descrição geral

Definir uma reivindicação

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

Ler e escrever uma reivindicação

Incluir uma declaração no token

Carregue e teste sua política personalizada atualizada

Testar a política personalizada

[Opcional] Localizar a interface do usuário

Próximos passos

Próximos passos

Recursos adicionais