Facebook login button does not work in WKWebView

Question

We are developing an application for iOS 8.0 and higher. This application requires authentication (or what the user registers for it). On the website, we use html forms to register and login users. These forms are responsive. The user can also click “Log in using the Facebook button” to log in with FB credentials. This button is implemented using the FB SDK for Javascript (v2.4)

Thus, we do not want to implement our own screen in our iOS application for registration and registration, but we rather implemented a view controller with a WKWebView element to handle this view.

However, we noted that when users click on the “Log in using Facebook button” button, nothing happens. The typical pop-up window that FB opens to ask the user to log in and grant access permissions never appears.

This is how we initialize WKWebView :

 class LoginViewController: UIViewController, WKNavigationDelegate, WKUIDelegate { var webView: WKWebView @IBOutlet weak var cancelButton: UIButton! override func viewDidLoad() { super.viewDidLoad() view.addSubview(webView) webView.setTranslatesAutoresizingMaskIntoConstraints(false) let height = NSLayoutConstraint(item: webView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1, constant: 0) let width = NSLayoutConstraint(item: webView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1, constant: 0) view.addConstraints([height, width]) loadDefaultUrl() } required init(coder aDecoder: NSCoder){ let config = WKWebViewConfiguration() config.preferences.javaScriptCanOpenWindowsAutomatically = true self.webView = WKWebView(frame: CGRectZero, configuration: config) super.init(coder: aDecoder) webView.navigationDelegate = self webView.UIDelegate = self } 

Would thank all pointers on how to get the FB login button to work in WKWebView (or, if possible, within UIWebView ).

Answer 1

It is a bit late to answer, but I ran into the same problem recently and could not find a satisfactory answer.

I have a solution, but with iOS 9.0, implementing two WKUIDelegate methods that you already registered for your webView . The authentication flow with the JS Facebook library will first open a pop-up window that allows the user to enter their credentials, allow the transfer of information, etc., and then the window closes the return to the parent window.

To enable this thread, you first need to intercept the call to open the popup in the following way:

 func webView(webView: WKWebView, createWebViewWithConfiguration configuration: WKWebViewConfiguration, forNavigationAction navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? { // A nil targetFrame means a new window (from Apple doc) if (navigationAction.targetFrame == nil) { // Let create a new webview on the fly with the provided configuration, // set us as the UI delegate and return the handle to the parent webview let popup = WKWebView(frame: self.view.frame, configuration: configuration) popup.UIDelegate = self self.view.addSubview(popup) return popup } return nil; } 

Now, when this is done, the new request will be automatically loaded in the pop-up WKWebView pop-up window. The next step is to close it as soon as the thread is completed. Since we registered self as popup.UIDelegate , we can remove the view when it is closed by an external authentication flow:

 func webViewDidClose(webView: WKWebView) { // Popup window is closed, we remove it webView.removeFromSuperview() } 

Hope this helps.

Answer 2

Great answer from bernyfox. This helped me after a few days of finding a solution.

Here is the objective-c version:

 - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures { if (navigationAction.targetFrame == nil) { WKWebView *popup = [[WKWebView alloc]initWithFrame:self.view.frame configuration:configuration]; popup.UIDelegate = self; [self.view addSubview:popup]; return popup; } } -(void) webViewDidClose:(WKWebView *)webView{ // Popup window is closed, we remove it [webView removeFromSuperview]; } 

Answer 3

This is caused by blocking WKWebView links with target = _blank. The solution is to fix this situation and instead load the link directly into the view, like this>

 func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? { if navigationAction.targetFrame?.isMainFrame == nil { webView.load(navigationAction.request) } return nil } 

Solution obtained here Why WKWebView does not open links with target = "_blank"