Experiência de cadastro ou login embutida

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

Para uma experiência de inscrição ou entrada mais simples, você pode evitar redirecionar usuários para uma página de inscrição ou entrada separada ou gerar uma janela 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.

Login integrado ao aplicativo Web

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

Ao usar o iframe, considere o seguinte:

• Inscrição ou login incorporado dá suporte somente a contas locais. A maioria dos provedores de identidade social (por exemplo, Google e Facebook) impede que suas páginas de login sejam renderizadas em quadros embutidos.
• Determinados navegadores, como Safari ou Chrome no modo anônimo, exibem cookies de sessão do Azure AD B2C em um iframe como cookies de terceiros. Esses navegadores podem bloquear ou limpar esses cookies, o que pode levar a uma experiência de usuário menor que a ideal. Para evitar esse problema, verifique se o nome de domínio do aplicativo e seu domínio do Azure AD B2C têm a mesma origem. Para usar a mesma origem, habilite domínios personalizados para o locatário do Azure AD B2C e configure seu aplicativo Web com a mesma origem. Por exemplo, um aplicativo hospedado em 'https://app.contoso.com' tem a mesma origem que o Azure AD B2C em execução em 'https://login.contoso.com'.

Pré-requisitos

• Conclua as etapas na Introdução às políticas personalizadas no Active Directory B2C.
• Habilite domínios personalizados para suas políticas.

Configurar sua política

Para permitir que sua interface de usuário do Azure AD B2C seja inserida em um iframe, uma política Content-Security-Policy de segurança de conteúdo e opções X-Frame-Options de quadro devem ser incluídas nos cabeçalhos de resposta HTTP do 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 seguir o DefaultUserJourney. O elemento UserJourneyBehaviors deve ser semelhante a 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:

• Seu aplicativo deve confiar e possuir o URI.
• O URI deve usar o esquema https.
• O URI completo do aplicativo Web deve ser especificado. Não há suporte para caractere curinga.
• O elemento JourneyFraming só permite que AS URLs do site com um TLD (domínio de nível superior) de dois a sete caracteres se alinhem com TLDs comumente reconhecidos.

Além disso, recomendamos que você também bloqueie que seu próprio nome de domínio seja incorporado em um iframe definindo os cabeçalhos Content-Security-Policy e X-Frame-Options respectivamente nas páginas do aplicativo. Essa técnica reduz as preocupações de segurança em relação aos navegadores mais antigos relacionados à inserçã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 que apresenta 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 ao tamanho do iframe, forneça uma página HTML limpa sem um plano de fundo e espaços extras.

O código CSS a seguir oculta os elementos HTML do Azure AD B2C 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 seu 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 atual do Azure AD B2C, habilite sua política para JavaScript e use HTML5 para postar mensagens. O código JavaScript a seguir envia uma mensagem de postagem 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 a experiência de entrada do Azure AD B2C. Após o login ser concluído, o Azure AD B2C retorna um token de identificação ou um código de autorização para o URI de redirecionamento configurado no seu aplicativo.

Para dar suporte ao logon inserido, o atributo iframe 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 aplicativo recebe e valida o token de ID, ele conclui o fluxo de autorização e 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 login é alterado para "sair" e o nome de usuário é exibido na interface.

O exemplo a seguir mostra como o URI de redirecionamento de login pode atualizar a página inicial.

window.top.location.reload();

Adicionar login com contas sociais a um aplicativo web

Provedores de identidade social bloqueiam suas páginas de entrada da renderização em quadros embutidos. Você pode usar uma política separada para contas sociais ou usar uma única política para entrar e se inscrever com contas locais e sociais. Em seguida, você pode usar o parâmetro de string de consulta domain_hint. 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 botões de login com conta social. Quando um usuário clica em um dos botões da 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 o recarregamento da página.

Configurar um aplicativo de página única

Para um aplicativo de página única, você também precisa de uma segunda página HTML de "login" 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.

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

Confira os seguintes artigos relacionados:

• Personalização da interface do usuário
• Referência do elemento RelyingParty
• Habilitar sua política para JavaScript
• Exemplos de código