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:
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
1 2 3 4 5 6 7 8 |
<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