Dispositivos móveis

Você tem as opções a seguir para implementar a FBE em dispositivos móveis:

Navegador para celular

A FBE pode fazer a autenticação via apps ou navegadores para celular.

Recomendamos usar a abordagem de URL ao implementar o login de empresa para a FBE.

  1. Substitua www por m na URL do Facebook. Ou seja, use https://m.facebook.com/ em vez de https://www.facebook.com/.

Se você passar https://facebook.com sem www ou m, o Facebook carregará automaticamente a URL com m ou www adequada ao navegador ou à plataforma de origem.

Exemplos de interface do usuário

Os exemplos de interface do usuário a seguir mostram a aparência da FBE ao ser carregada em um site para celular.

WebViews (Android) ou WK/UIWebviews (iOS)

Android

É recomendado passar a string DEFAULT de UserAgent para WebSettings() de modos de exibição da web no código (webview.getSettings().setUserAgentString("< user_agent>")). Não faça a alteração pelo método setUserAgentString(). Se a string de agente do usuário for modificada, isso poderá causar problemas de renderização.

Os exemplos a seguir mostram os valores-padrão de UserAgent para os dispositivos móveis Google Nexus 4 e Samsung Galaxy S9. Obtenha o valor de UserAgent usando getUserAgentString():

Google Nexus 4 – versão 5.1 do Android (API 22) 768 x 1280

Mozilla/5.0 (Linux; Android 5.1; Google Nexus 4 Build/LMY47D) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/39.0.0.0 
Mobile Safari/537.36

Samsung Galaxy S9 – versão 8.0 do Android (API 26) 1440 x 2960

Mozilla/5.0 (Linux; Android 8.0.0; Samsung Galaxy S9 Build/OPR6.170623.017; wv) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/58.0.3029.125 
Mobile Safari/537.36

Em ambos os casos, a interface do usuário foi renderizada conforme o esperado. Veja as seguintes capturas de tela do Samsung Galaxy S9:



A seguir, veja um exemplo de código que define um modo de exibição da web com atualizações mínimas, renderizando adequadamente a interface do usuário acima:

WebView webView;
webView = (WebView) v.findViewById(R.id.webview);
webView.loadUrl('<FBE2.0 URL>');
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Sample log to see the Default UserAgent string - Log.i("UserAgent", ""+webSettings.getUserAgentString());
webView.setWebViewClient(new WebViewClient());

Também é possível passar as configurações a seguir sem causar problemas de renderização:

  • setLoadWithOverviewMode()
  • setUseWideViewPort()
  • setDomStorageEnabled()
  • setJavaScriptCanOpenWindowsAutomatically()
  • Outras opções de configuração que não alteram a interface do usuário

Se a empresa tiver de informar um UserAgent personalizado, recomendamos que você o anexe à string-padrão de UserAgent retornada por getUserAgentString(). Para evitar problemas de renderização, não modifique a parte existente da string de UserAgent.

Evite passar configurações de renderização adicionais, pois isso pode causar problemas de renderização. Por exemplo, se você passar setLayoutAlgorithm() no modo de exibição da web do Android, isso reorganizará o HTML, afetando negativamente a renderização.

iOS

A abordagem para Android descrita acima também funciona para UIWebview/WKWebviews do iOS.

Veja o exemplo de código para obter a string-padrão de UserAgent no iOS:

// Sample example - appending UserAgent - Please see latest iOS docs for approach to pass this param
webView.customUserAgent = (UIWebView().stringByEvaluatingJavaScript(from: "navigator.userAgent") ?? "") + "/Custom agent"

Para iOS, siga as boas práticas mencionadas acima para Android. A chave é usar a string-padrão de UserAgent e evitar passar configurações de renderização que possam afetar modos de exibição da web.