모바일

모바일에서 FBE를 시작하는 옵션은 다음과 같습니다.

모바일 브라우저

FBE는 모바일 앱이나 모바일 브라우저에서 인증하는 기능이 있습니다.

FBE의 비즈니스 로그인을 시작할 때 URL 방식을 사용하는 것을 권장합니다.

  1. Facebook URL에서 wwwm으로 바꿉니다. 구체적으로 말하면, https://www.facebook.com/ 대신 https://m.facebook.com/을 사용합니다.

www 또는 m 없이 https://facebook.com을 전달할 경우, Facebook이 원래 브라우저 또는 플랫폼에 따라 적절한 m 또는 www URL을 자동으로 읽어들입니다.

사용자 인터페이스의 예

다음 UI 예시를 통해 모바일 사이트에서 읽어들인 FBE의 모습을 확인하세요.

WebViews(Android) 또는 WK/UIWebviews(iOS)

Android

(webview.getSettings().setUserAgentString("< user_agent>")) 코드에 webviews WebSettings()에 대해 DEFAULT UserAgent 문자열을 전달하는 것이 좋습니다. setUserAgentString() 메서드를 통해 이를 변경하지 마세요. UserAgent 문자열이 수정되면 렌더링 문제가 발생할 수 있습니다.

다음 예는 Google Nexus 4와 Samsung Galaxy S9 모바일 기기의 기본 UserAgent 값을 나타냅니다. getUserAgentString()을 사용하여 UserAgent 값을 가져옵니다.

Google Nexus 4 — Android v5.1(API 22) 768x1280

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 — Android v8.0(API 26) 1440x2960

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

두 가지 경우에서 모두 UI가 예상대로 렌더링되었습니다. Samsung Galaxy S9의 스크린샷은 다음을 참조하세요.



다음은 최소 업데이트로 Webview를 설정하여 위의 UI를 적절히 렌더링하는 코드 샘플입니다.

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());

또한 렌더링 문제를 일으키지 않고 다음 설정을 전달할 수 있습니다.

  • setLoadWithOverviewMode()
  • setUseWideViewPort()
  • setDomStorageEnabled()
  • setJavaScriptCanOpenWindowsAutomatically()
  • 기타 UI 외의 변경 설정 옵션

비즈니스가 사용자 지정 UserAgent를 전달해야 할 경우 getUserAgentString()에서 반환한 기본 UserAgent 문자열에 이를 추가하는 것이 좋습니다. 렌더링 문제를 방지하려면 UserAgent 문자열의 기존 부분을 수정하지 마세요.

렌더링 문제를 초래할 수 있으므로 추가적인 렌더링 설정을 전달해서는 안 됩니다. 예를 들어 Android Webview에 setLayoutAlgorithm()을 전달할 경우 HTML이 다시 구성되어 렌더링에 부정적 영향을 미칩니다.

iOS

위에서 설명한 Android 방식은 iOS UIWebview/WKWebview에도 적용됩니다.

iOS에서 기본 UserAgent를 가져오는 샘플 코드는 다음과 같습니다.

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

iOS의 경우 앞서 Android에서 언급한 모범 사례를 따르세요. 기본 UserAgent를 사용하고 Webview에 영향을 미칠 만한 렌더링 설정을 전달하지 않는 것이 중요합니다.