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

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

• Conclua as etapas em Iniciar com políticas personalizadas no Active Directory B2C. Este tutorial orienta você sobre como atualizar arquivos de política personalizados para usar sua configuração de locatário do Azure AD B2C.
• Registar uma aplicação Web.

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

1. Inicie sessão no portal Azure.
2. Se tiver acesso a vários inquilinos, selecione o ícone Definições no menu superior para mudar para o inquilino do Azure AD B2C no menu Diretórios + subscrições.
3. Em de serviços do Azure , selecione Azure AD B2C. Ou use a caixa de pesquisa para localizar e selecionar Azure AD B2C.
4. Em seu locatário do Azure AD B2C, selecione Fluxos de usuário.
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. 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:

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

Configurar o tipo de entrada de atributos do 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 do utilizador, 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 acima/abaixo" para reordenar os itens de lista suspensa.

5. 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.

6. Selecione Guardar.

   

Fornecer uma lista de valores usando coleções localizadas

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

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 de usuário, selecione o idioma que deseja personalizar.
4. Em Arquivos de recursos no nível da página, selecione Página de inscrição da conta local.
5. Selecione Padrões de download (ou Substituições de download se você tiver editado esse idioma anteriormente).
6. Crie um LocalizedCollections atributo.

O LocalizedCollections é uma matriz de Name e Value pares. A ordem dos itens é 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

1. Depois de concluir as alterações no arquivo JSON, volte para o ambiente B2C.
2. Selecione Fluxos de utilizador e selecione a sua política (por exemplo, "B2C_1_SignupSignin") para abri-la.
3. Selecione Idiomas.
4. Selecione o idioma para o qual deseja traduzir.
5. Em Arquivos de recursos no nível da página, selecione Página de inscrição da conta local.
6. 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

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

Visão geral

Você pode coletar dados iniciais dos seus utilizadores usando o percurso de registo ou início de sessão. Você pode coletar mais declarações 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ê:

1. Defina uma reivindicação de "cidade".
2. Pergunte ao usuário sua cidade.
3. Persista a cidade no perfil do utilizador no diretório B2C do Azure AD.
4. Leia o atributo de cidade no diretório do Azure AD B2C em cada início de sessão.
5. Retorne à cidade no seu aplicativo confiável de terceiro após iniciar sessão ou efetuar o registo.

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.

1. Procure 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 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 Enumeration elemento como o 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 registo de conta local.
• SelfAsserted-Social - Início de sessão do utilizador pela primeira vez na conta federada.
• SelfAsserted-ProfileUpdate - Edite o fluxo de perfil.

Para coletar o atributo da cidade no registo, ele deve ser adicionado como um atributo de saída ao perfil técnico LocalAccountSignUpWithLogonEmail. Sobrescreva 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 da cidade após o login inicial com uma conta federada, é necessário adicioná-la 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 da 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 a sua política personalizada atualizada

1. Se tiver acesso a vários inquilinos, selecione o ícone Definições no menu superior para mudar para o inquilino do Azure AD B2C no menu Diretórios + subscrições.
2. Procure 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.

Testar a política personalizada

1. Selecione sua política de terceira parte confiável, por exemplo B2C_1A_signup_signin.
2. Em Aplicativo, selecione um aplicativo Web que você registrou anteriormente. O URL de resposta deve mostrar https://jwt.ms.
3. Selecione o botão Executar agora .
4. 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 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 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.

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.

Próximos passos

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