Considerações do agente de autenticação da Web para provedores online (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Como um provedor de autenticação, existem alguns detalhes a serem considerados durante a criação de seu serviço de autenticação a ser consumido pelos aplicativos da Windows Store. Além disso, você pode personalizar a página da Web que é exibida ao usuário do aplicativo da Windows Store com sua marcação preferida.

Considerações para provedores de autenticação online

O agente de autenticação da Web é criado com base nas mesmas tecnologias do Internet Explorer no Windows. Entretanto, devido a uma finalidade bastante especial desse componente, alguns recursos do Internet Explorer foram desabilitados ou bloqueados para uma configuração específica. Além disso, o agente de autenticação da Web fornece um canal de log de eventos dedicado para ajudar a solucionar os problemas com as páginas que ele processa.

Modo de documento de padrões do Internet Explorer

O agente de autenticação da Web exibe todas as páginas no modo de padrões do IE para a versão específica do Windows. Por exemplo, no Windows 8 o agente de autenticação da Web exibe as páginas no "Modo de Padrões do IE10". Você pode usar as ferramentas de desenvolvedor no Internet Explorer para ver como sua página funciona em diferentes modos de documento. Para saber mais sobre a compatibilidade do Internet Explorer, veja os tópicos do MSDN sobre Internet Explorer.

Recursos desabilitados e bloqueados

Vários recursos do Internet Explorer são totalmente desabilitados ou bloqueados para valores específicos que não podem ser alterados nas Opções de Internet do sistema operacional.

Requisito HTTPS

A primeira URL que um aplicativo usará para se comunicar com o provedor online precisa ser HTTPS.

Dimensão para diferentes estados VIEW

Um aplicativo do Windows 8 pode aparecer em vários aplicativos de tamanhos diferentes, com orientação retrato ou paisagem ou dentro de um botão, como o botão Compartilhar. Dependendo do modo de exibição em que o agente de autenticação da Web aparece, o tamanho com o qual as páginas da Web precisa trabalhar poderia ser diferente. Para obter mais informações, consulte o tópico Diretrizes para tamanhos de janelas e dimensionamento de telas e o tópico Diretrizes para compartilhar conteúdo.

A página da Web deve usar consultas de mídia CSS para verificar o tamanho com que ele precisa trabalhar e definir o próprio layout adequadamente. Entretanto, a página não deve ser projetada com base nos pixels exatos documentados aqui e deve ser capaz de ser dimensionada para diferentes tamanhos. Os tamanhos especificados neste documento estão sujeitos a alterações em versões futuras do sistema operacional.

Se uma página não puder ajustar todas as informações no espaço alocado (por exemplo, uma extensa lista de permissões que um aplicativo está solicitando), o agente de autenticação da Web fornecerá barras de rolagem para permitir que o usuário role pela página conforme necessário. O recurso de zoom também é fornecido pelo zoom por pinçagem para dispositivos à base de toque e Ctrl + roda do mouse para computadores desktop e notebooks.

Para testar diferentes fatores de escala, use o aplicativo de exemplo SDK de agente de autenticação da Web carregado no Microsoft Visual Studio Professional 2012, que permite simular os tamanhos de exibição diferentes.

Exibição de exemplo

O exemplo a seguir mostra a interface do usuário do agente de autenticação da Web onde as dimensões da página da Web são:

• Largura: 260 pixels
• Altura: altura da tela (depende da resolução da tela)

Observe que a interface do usuário do Agente de Autenticação da Web está apenas no lado direito da captura de tela.

Modo de exibição de botão

Para o modo de exibição de Botão, as dimensões da página da Web são:

• Largura: 566 pixels
• Altura: altura da tela (depende da resolução da tela)

O exemplo a seguir mostra a interface do usuário do agente de autenticação da Web em modo de exibição de Botão.

Modo de exibição do seletor de arquivos

Para o modo de exibição do seletor de arquivos, as dimensões de páginas da Web são:

• Largura: 566 pixels
• Altura: altura da tela (depende da resolução da tela)

O exemplo a seguir mostra a interface do usuário do agente de autenticação da Web no modo de exibição do seletor de arquivos.

Nenhuma janela nova por padrão

Por padrão, nenhuma URL fará abrir uma nova janela, mas sim será exibida na janela do agente de autenticação da Web. Isso inclui o método JavaScript window.open, o atributo "target" dos hiperlinks ou quando o usuário emprega o mecanismo Ctrl+clique para forçar a abertura de uma nova janela. A exceção a essa regra é quando uma página da Web declara um link como sendo seguro de ser navegado em um navegador conforme descrito tópico sobre personalização do destino dos hiperlinks.

Personalizando páginas de autenticação da Web

Uma página da Web personaliza a interface do usuário com o título, o ícone e a cor do cabeçalho usando marcas de metadados definidos na página da Web. Os desenvolvedores da Web podem usar marcas <meta> HTML para exibir a personalidade e marca do provedor na interface do usuário do agente de autenticação da Web. Além disso, os desenvolvedores podem direcionar ações de usuário mais complexas, por exemplo, inscrevendo e recuperando senhas. O conceito é muito semelhante ao recurso Sites Fixos do Windows Internet Explorer 9 e do Windows 7.

Além de personalizar a interface do usuário em torno da área da página da Web, esta também deve aproveitar os estilos de controles do Windows 8, ser habilitada para toque e permitir que links sejam abertos no navegador onde for apropriado.

A seguir está um exemplo de uma página da Web que aproveita o modelo de personalização de agente de autenticação da Web.

Personalizando o ícone

A página da Web pode fornecer um ícone usando uma marca meta mswebdialog-logo.

<meta name="mswebdialog-title" content="Contoso Social"/>

O conteúdo é uma URL que pode ser uma página relativa ou absoluta. O esquema da URL pode ser HTTP ou HTTPS. O formato do arquivo deve ser PNG ou JPG. O tamanho da imagem deve ser de 30x30 pixels. Se a imagem tiver tamanho diferente, ela será ampliada ou reduzida pelo sistema operacional para que se ajuste ao espaço de 30x30. A imagem devem ser projetada para permitir ótima renderização quando ampliada para 140% e 180% para comportar telas de maior resolução. Para testar diferentes fatores de dimensionamento, use o aplicativo de exemplo SDK do agente de autenticação da Web carregado no Visual Studio 11 que permite simular diferentes resoluções e fatores de escala usando as janelas de Dispositivo do modo Design.

Personalizar o texto do título

A página da Web pode fornecer o título usando a marca meta mswebdialog-title.

<meta name="mswebdialog-title" content="Contoso Social"/>

O título deve ser curto e refletir a marca do provedor (por exemplo, Contoso).

Personalizar a cor do cabeçalho

A página da Web pode fornecer a cor que representa sua identidade de marca para ser usada para o cabeçalho da caixa de diálogo usando a marca meta mswebdialog-header-color.

<meta name="mswebdialog-header-color" content="#1267DF"/>

A cor pode ser de qualquer valor especificado aqui. Entretanto, o agente de autenticação da Web ignorará qualquer valor de canal alfa. Com essa cor especificamente e com as cores usadas na página em geral, é recomendável seguir as mesmas cores usadas no aplicativo do Windows 8 se ele existir.

Observação  Os ícones e as cores são armazenados em cache por servidor no cliente depois que as marcas META são analisadas. Limpe o cache de cliente antes de iniciar a interface do usuário para que as mudanças tenham efeito. Para fazer isso, modifique as seguintes configurações do Registro.

// Registry location under HKLM used for setting various AuthHost parameters.
#define AUTH_HOST_LOCAL_MACHINE_REGPATH \
    L"SOFTWARE\\Microsoft\\Windows NT\\CurrentVersion\\Image File Execution Options\\authhost.exe"
// MaxAge to use for downloading logo images
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_REG_VALUE_NAME \
    L"LogoImageMaxAgeSeconds"
// 24 hours
#define AUTH_HOST_LOGO_IMAGE_MAX_AGE_SECONDS_DEFAULT        \
    (24 * 60 * 60)

Depois que um ícone for baixado, ele não será escolhido novamente por 24 horas. Para testar as imagens de logotipo, defina a chave do Registro acima com um valor menor.

Personalizar a página da Web

Além de personalizar a interface do usuário em torno da página da Web, os desenvolvedores também devem criar páginas da Web que sejam perfeitas e integradas com a experiência geral do Windows 8. Isso inclui usar estilos recomendados, garantir que as páginas da Web funcionem bem com dispositivos habilitados para toque e abrir determinadas páginas da Web no navegador da Web.

• Estilos

  Incentivamos muito o uso dos estilos recomendados aqui para proporcionar uma experiência do usuário mais constante nas páginas da Web de agende de autenticação da Web e outros componentes de interface do usuário do Windows 8. A página da Web deve usar um fundo branco e não deve usar bordas. Os botões como Fazer Login ou Cancelar devem ser posicionados no canto inferior direito e usar a mesma cor do cabeçalho. Por fim, como o agente de autenticação da Web fornece um botão Voltar, avalie a eliminação total de um botão Cancelar da página da Web.

• Habilitando o toque

  A página da Web deve ser projetada pensando em uma interação de usuário baseada em toque. Para saber mais sobre o design para toque no Windows 8, veja o tópico Design da interação por toque.

• Personalizando o destino dos hiperlinks

  O agente de autenticação da Web é excelente para disponibilizar páginas da Web que exigem uma única ação de usuário como logon ou páginas de autorização OAuth. Entretanto, para fluxos de usuário mais complexos como criar contas, recuperar uma senha perdida ou esquecida, mostrar declarações de privacidade e assim por diante, em que o usuário deve supostamente investir parte do tempo para entender e concluir o fluxo, é recomendável que essas páginas sejam iniciadas no navegador preferido do usuário para dar suporte para navegação completa e navegação rica. O agente de autenticação da Web por padrão não permite que novas janelas de navegador sejam abertas de uma página da Web (para saber mais, veja a seção Sem novas janelas por padrão). Entretanto, usando a marca meta mswebdialog-newwindowurl, a página da Web pode declarar quais URLs devem ser abertas no navegador.

  O mswebdialog-newwindowurl permite que a página da Web especifique uma URL ou parte da URL que o agente de autenticação da Web usará para fazer a correspondência (correspondência de cadeia de caracteres à esquerda) sempre que for solicitado a abrir uma URL em uma nova janela usando o atributo de destino ou o método window.open(). Se houver uma correspondência, a URL será aberta no navegador padrão do usuário. Se não houver correspondência, o agente de autenticação da Web navegará para a URL em si (comportamento padrão). Por exemplo:<meta name="mswebdialog-newwindowurl" content="https://www.contoso.com/privacy"/>

  No caso dessa marca meta, o agente de autenticação da Web abrirá https://www.contoso.com/privacy/policy.html no navegador, mas navegará diretamente para https://www.contoso.com/termsofuse.html. Observe que os links não tentam ser abertos em uma nova janela (por exemplo, links que não estão usando o método window.open() ou o atributo de destino) não são afetados por essa marca meta. O conteúdo é uma URL que pode ser uma página relativa ou absoluta. O esquema da URL pode ser HTTP ou HTTPS. Você deve definir marcas meta mswebdialog-newwindowurl para cobrir quaisquer links que não fazem parte do fluxo de usuário principal, como declarações de privacidade e formulários de inscrição, por exemplo. Se você der suporte a logon com um provedor de autenticação de terceiros (por exemplo, provedores OpenID), verifique se manteve essas interações no agente de autenticação da Web. Para habilitar todos os links na sua página como sendo seguras para ser abertas no navegador, use a sintaxe de asterisco, como, <meta name="mswebdialog-newwindowurl" content="*"/> Observe que o “*” só pode ser usado exclusivamente e não pode ser combinado com outra URL, por exemplo, "https://www.contoso.com/*" não é uma sintaxe válida.

Regras aplicadas a todas as marcas meta

Quando o agente de autenticação da Web processa as marcas meta, as seguintes regras se aplicam:

• O efeito da marca meta persistirá em todas as páginas sob o mesmo domínio de segundo nível (por exemplo, contoso.com) a menos que outra marca meta de mesmo nome porém com conteúdo diferente seja encontrada.
• Se várias marcas meta do mesmo nome forem encontradas na mesma página, o agente de autenticação da Web escolherá somente uma delas e ignorará o restante. A marca meta específica escolhida é indefinida. Observação  Essa regra não se aplica à marca meta mswebdialog-newwindowurl que permite várias instâncias na mesma página.  

Tópicos relacionados

Agente de autenticação da Web

Exemplo de agente de autenticação da Web

Windows.Security.Authentication.Web