Adicionar atributos de usuário e personalizar a entrada do usuário no 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 da web.

• Conclua as etapas em Comece a usar políticas personalizadas no Active Directory B2C. Esse tutorial mostra como atualizar arquivos de política personalizados para usar sua configuração de locatário do Azure AD B2C.
• Registrar um aplicativo da web.

Adicionar atributos de usuário ao fluxo do 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 seu 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 usuário e, em seguida, selecione o atributo de 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 o fluxo do 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 o 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 a 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 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. No menu suspenso Tipo de entrada do usuário, selecione DropdownSingleSelect.
   4. No 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.

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

6. Clique em Salvar.

   

Forneça uma lista de valores usando coleções localizadas

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

1. Habilitar 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 do usuário, selecione o idioma que você deseja personalizar.
4. Em Arquivos de recursos de nível de página, selecione Página de inscrição de conta local.
5. Selecione Baixar padrões (ou Baixar substituições se você editou esse idioma anteriormente).
6. Crie um LocalizedCollections atributo.

O LocalizedCollections é uma matriz de pares Name e Value. A ordem para os itens é a ordem em que eles são exibidos.

• 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. Depois de concluir as alterações no seu arquivo JSON, volte para o seu locatário B2C.
2. Selecione Fluxos de usuário e selecione sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
3. Selecione 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 inscrição 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.

Teste o fluxo do 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. Selecionar Executar fluxo de usuário

Visão geral

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

1. Defina uma reivindicação de "cidade".
2. Peça ao usuário sua cidade.
3. Persista a cidade no perfil do usuário no diretório do 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 a execução de uma política do Azure AD B2C. O esquema de declarações é o local onde você declara suas declarações. Os seguintes elementos 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 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 da 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 selecionar previamente o item de Londres , altere o Enumeration elemento como o seguinte exemplo:

<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 um usuário deve fornecer entrada:

• LocalAccountSignUpWithLogonEmail – Fluxo de inscrição de conta local.
• SelfAsserted-Social - Login de usuário pela primeira vez na conta federada.
• SelfAsserted-ProfileUpdate – Editar fluxo de perfil.

Para coletar a reivindicação da cidade durante a inscrição, ela deve ser adicionada como uma reivindicação de saída ao LocalAccountSignUpWithLogonEmail perfil técnico. Substitua esse 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. 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 reivindicação da cidade após o login inicial com uma conta federada, ela deve ser adicionada como uma reivindicação de saída ao SelfAsserted-Social perfil técnico. Para que os usuários da conta local e federada possam editar seus dados de perfil mais tarde, 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 a lista inteira 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>

Leia e escreva uma reclamação

Os perfis técnicos a seguir são perfis técnicos do Active Directory, que leem e gravam dados na ID do Microsoft Entra.
Use PersistedClaims para gravar dados no perfil do usuário e OutputClaims ler dados do perfil do usuário nos 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 reivindicação dentro do token

Para retornar a reivindicação da cidade ao aplicativo da parte confiável, adicione uma reivindicação de saída ao arquivo SocialAndLocalAccounts/SignUpOrSignIn.xml. A declaração de saída será adicionada ao token após uma jornada bem-sucedida do usuário e será enviada ao aplicativo. Modifique o elemento do perfil técnico na seção da parte confiável para adicionar a cidade como uma reivindicaçã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 sua 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 seu locatário do Azure AD B2C no menu Diretórios + assinaturas.
2. Procure e selecione o 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 entrada, selecione Inscrever-se agora para se inscrever. Conclua a inserção das informações do usuário, incluindo o nome da cidade e selecione Criar. Você deve ver o conteúdo do token que foi retornado.

[Opcional] Localizar a interface do usuário

O Azure AD B2C permite que você acomode sua política para idiomas diferentes. Para obter mais informações, saiba mais sobre 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 do idioma.

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

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

Próximas etapas

• Personalize a interface do usuário no Azure Active Directory B2C.
• Personalize a interface do usuário com modelos HTML no Azure Active Directory B2C.
• Habilitar JavaScript.