WebView Xamarin Forms - Acessando sites que requerem autenticação

fev 03 2019 3 de fevereiro de 2019 3 de fevereiro de 2019 Não Comentário por tiagocrizanto

WebView Xamarin Forms – Acessando sites que requerem autenticação

Neste post mostro como desenvolver uma webview híbrida para Android e iOS com Xamarin.Forms para acessar sites que requerem autenticação (proxy, por exemplo)

Em ambientes corporativos é muito comum a utilização de servidores proxy, porém, a utilização de proxy nas empresas geralmente gera muita dor de cabeça para os desenvolvedores. A webview do Xamarin Forms não oferece suporte a autenticação de proxy, por isso, é necessário desenvolver renderers customizados para Android e iOS.

Para testar a solução, crie um novo projeto do tipo Mobile App no Visual Studio. No exemplo a ser desenvolvido não estou utilizando MVVM, porém, é possível utilizar a webview híbrida utilizando MVVM.

Com o novo projeto criado adicione um arquivo chamado HybridWebView.cs e uma view chamada MainPage.xaml no projeto compartilhado e nos projetos Android e iOS adicione um arquivo chamado HybridWebViewRenderer.cs

Desenvolvendo a webview

Abra no arquivo HybridWebView será necessário adicionar duas BindableProperty para o usuário e a senha. Adicione o seguinte código:

Agora vamos desenvolver os renderers customizados para cada plataforma. Aproveitando que estamos customizando a webview eu também adicionei um código para permitir o zoom das páginas renderizadas. O cabeçalho HTML abaixo não permite o zoom:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

1	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

Então adicionei um javascript logo após o término de carregamento da página para que seja permitido o zoom. Caso queira que a webview renderize o comportamento padrão da página, basta remover o código dos renderers do Android e iOS.

Android renderer

Abra o arquivo HybridWebViewRenderer.cs do projeto Android e adicione o código abaixo:

iOS renderer

Agora vamos criar o renderer para a plataforma iOS.

Pronto a webview está quase pronta e agora só precisamos adicionar a webview a MainPage.xaml

No código acima deixei comentado o código da webview genérica do Xamarin para que você possa testar. No code behind da página coloque o código abaixo

Também é possível colocar o usuário / senha e source no arquivo XAML

<local:HybridWebView 
            x:Name="hwebview" 
            x:Uid="hwebview"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand" 
            Username="user"
            Password="P@$$w0rd"
            Source="source_uri"/>

<local:HybridWebView

x:Name="hwebview"

x:Uid="hwebview"

HorizontalOptions="FillAndExpand"

VerticalOptions="FillAndExpand"

Username="user"

Password="P@$$w0rd"

Source="source_uri"/>

O código do projeto está aqui no meu github

Tiago Crizanto