Experiência incorporada de entrada ou inscrição

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.

Esse recurso só está disponível para políticas personalizadas. Para obter as etapas de instalação, escolha Política personalizada no seletor anterior.

Para ter uma experiência de entrada ou inscrição mais simples, é possível evitar o redirecionamento de usuários para uma página de entrada ou inscrição separada ou a geração de uma janela de pop-up. Usando o elemento HTML de quadro embutido <iframe>, é possível inserir a interface do usuário de entrada do Azure AD B2C diretamente no aplicativo Web.

Dica

Use o elemento HTML <iframe> para inserir as políticas personalizadas de inscrever-se ou entrar, editar perfil ou alterar senha no aplicativo Web ou de página única.

Observação

Esse recurso está em uma versão prévia.

Entrada inserida do aplicativo Web

O elemento de quadro embutido <iframe> é usado para inserir um documento em uma página da Web do HTML5. É possível usar o elemento iframe para inserir a interface do usuário de entrada do Azure AD B2C diretamente em seu aplicativo Web, como mostrado no exemplo a seguir:

Login with hovering DIV experience

Ao usar o fluxo iframe, considere o seguinte:

  • A entrada/inscrição embutida só dá suporte a contas locais. A maioria dos provedores de identidade social (por exemplo, Google e Facebook) bloqueiam suas páginas de entrada de serem renderizadas em quadros embutidos.
  • Como Azure AD B2C cookies de sessão em um iframe são considerados cookies de terceiros, determinados navegadores (por exemplo, Safari ou Chrome no modo Incognito) bloqueiam ou desmarcam esses cookies, resultando em uma experiência de usuário indesejável. Para evitar esse problema, verifique se o nome de domínio do aplicativo e seu domínio Azure AD B2C têm a mesma origem. Para usar a mesma origem, habilite domínios personalizados para Azure AD B2C locatário e, em seguida, configure seu aplicativo Web com a mesma origem. Por exemplo, um aplicativo hospedado em 'https://app.contoso.com ' tem a mesma origem que Azure AD B2C em execução em 'https://login.contoso.com '.

Pré-requisitos

Configurar sua política

Para permitir que a interface do usuário do Azure AD B2C seja inserida em um iframe, uma política de segurança de conteúdo Content-Security-Policy e opções de quadro X-Frame-Options devem ser incluídas nos cabeçalhos de resposta HTTP Azure AD B2C. Esses cabeçalhos permitem que a interface do usuário do Azure AD B2C seja executada sob o nome de domínio do aplicativo.

Adicione um elemento JourneyFraming dentro do elemento RelyingParty. O elemento UserJourneyBehaviors deve vir logo após o DefaultUserJourney. Seu elemento UserJourneyBehaviors deve ficar parecido com este exemplo:

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

O atributo Sources contém o URI do seu aplicativo Web. Adicione um espaço entre URIs. Cada URI deve atender aos seguintes requisitos:

  • O URI deve ser confiável e pertencente ao seu aplicativo.
  • O URI deve usar o esquema HTTPS.
  • O URI completo do aplicativo Web deve ser especificado. Não há suporte para caracteres curinga.

Além disso, é recomendável que você também impeça que seu próprio nome de domínio seja inserido em um iframe, definindo os cabeçalhos Content-Security-Policy e X-Frame-Options, respectivamente, nas páginas do aplicativo. Isso reduzirá as preocupações de segurança em relação aos navegadores mais antigos relacionados à incorporação aninhada de iframes.

Ajustar a interface do usuário da política

Com a personalização da interface do usuário do Azure AD B2C, você tem controle quase total sobre o conteúdo HTML e CSS apresentado aos usuários. Siga as etapas para personalizar uma página HTML usando definições de conteúdo. Para ajustar a interface do usuário do Azure AD B2C no tamanho do iframe, forneça uma página HTML limpa sem uma tela de fundo nem espaços extras.

O código CSS a seguir oculta o Azure AD B2C elementos HTML e ajusta o tamanho do painel para preencher o iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

Em alguns casos, talvez você queira notificar o aplicativo sobre a página do Azure AD B2C que está sendo apresentada no momento. Por exemplo, quando um usuário seleciona a opção de inscrição, talvez você queira que o aplicativo responda ocultando os links para entrar com uma conta social ou ajustando o tamanho do iframe.

Para notificar seu aplicativo sobre a página de Azure AD B2C atual, habilite sua política para JavaScript e, em seguida, use HTML5 para postar mensagens. O código JavaScript a seguir envia uma mensagem post para o aplicativo com signUp:

window.parent.postMessage("signUp", '*');

Configurar um aplicativo Web

Quando um usuário seleciona o botão de entrada, o aplicativo Web gera uma solicitação de autorização que leva o usuário para Azure AD B2C experiência de entrada. Após a conclusão da entrada, Azure AD B2C retorna um token de ID ou código de autorização para o URI de redirecionamento configurado em seu aplicativo.

Para dar suporte ao logon incorporado, o atributo src aponta para o controlador de entrada, como /account/SignUpSignIn, que gera a solicitação de autorização e redireciona o usuário para a política do Azure AD B2C.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Depois que o token de ID é recebido e validado pelo aplicativo, o fluxo de autorização é concluído e o aplicativo reconhece e confia no usuário. Como o fluxo de autorização ocorre dentro do iframe, você precisa recarregar a página principal. Depois que a página é recarregada, o botão de entrada muda para "sair" e o nome de usuário é apresentado na IU.

Veja a seguir um exemplo que mostra como o URI de redirecionamento de entrada pode atualizar a página principal:

window.top.location.reload();

Adicionar credenciais com contas sociais a um aplicativo da web

Provedores de identidade social bloqueiam suas páginas de entrada da renderização em quadros embutidos. É possível usar uma política separada para contas sociais ou pode usar uma única política para entrada e inscrição com contas locais e sociais. Em seguida, é possível usar o domain_hint parâmetro de cadeia de caracteres de consulta. O parâmetro de dica de domínio leva o usuário diretamente para a página de entrada do provedor de identidade social.

Em seu aplicativo, adicione os botões de entrada com a conta social. Quando um usuário clica em um dos botões de conta social, o controle precisa alterar o nome da política ou definir o parâmetro de dica de domínio.

O URI de redirecionamento pode ser o mesmo URI de redirecionamento usado pelo iframe. Você pode ignorar a recarga da página.

Configurar um aplicativo de página única

Para um aplicativo de página única, você também precisará de uma segunda página HTML "entrar" que é carregada no iframe. Essa página de entrada hospeda o código da biblioteca de autenticação que gera o código de autorização e retorna o token.

Quando o aplicativo de página única precisar do token de acesso, use o código JavaScript para obter o token de acesso do iframe e do objeto que o contém.

Observação

No momento, não há suporte para a execução do MSAL 2.0 em um iframe.

O código a seguir é um exemplo que é executado na página principal e chama o código JavaScript de um iframe:

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Próximas etapas

Consulte os seguintes artigos relacionados: