fev 03 2019 3 de fevereiro de 2019 3 de fevereiro de 2019 2Comentários por tiagocrizanto

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

Postado em

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:

https://gist.github.com/tiagocrizanto/241ebb935bba5d309b96da95bc09bdbe

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" />

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:

https://gist.github.com/tiagocrizanto/6def58c7ed1b7d2e1a8e62496f069f7d

iOS renderer

Agora vamos criar o renderer para a plataforma iOS.

https://gist.github.com/tiagocrizanto/5500b6f7b98276e3f727960d523ddb13

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

https://gist.github.com/tiagocrizanto/bda29d4ba832a0fd5724ceecdf80ead4

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

https://gist.github.com/tiagocrizanto/d59eb3bc03eba4a3c63522291f87fd5b

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"/>

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