安装了Facebook本机应用程序后，服务器端Facebook登录是否无法在“ cordova android应用程序”上运行？

Question

Problem: Facebook login stops working when a Facebook native app is installed on android device

Entities involved: 1. Facebook login 2. Cordova app 3. InAppBrowser 4. Android (version 5.1) 5. Facebook native app

Observation:

1. UI :-

A blank white screen displayed when I click on my login button

2. Logs :-

Two log excerpts are provided (at the end). The first one is quite standard (the one during app initialization). In the second log, the InAppBrowser's loadstart event is immediately followed by a loadstop event . This leads to a blank page.

3. Code used :-

The code used is derived from OpenFb ( https://github.com/ccoenraets/OpenFB ) . The code is provide at the end of this question (below the logs).

4. Questions :-

a) Why is 'loadstop' called immediately after 'loadstart' (without any lag) - when facebook native app is installed?

b) Does it have anything to do with deeplinking of facebook app?

c) Possible resolutions would be appreciated.

PS... other similar questions on SO don't have answers.

---

Appendix (Log and Code)

Log from app initialization (nothing unique here though)

    I/WebViewFactory(20666): Loading com.google.android.webview version 57.0.2987.132 (code 298713250)
    I/art     (20666): Rejecting re-init on previously-failed class java.lang.Class<com.android.webview.chromium.TokenBindingManagerAdapter>
    ...
    I/art     (20666): Rejecting re-init on previously-failed class
    ...
    D/WebView (20666): WebView<init>
    D/WebView (20666): setInitialScale=0
    D/SystemWebViewEngine(20666): CordovaWebView is running on device made by: OPPO
    D/WebView (20666): addJavascriptInterface=_cordovaNative
    D/CordovaWebViewImpl(20666): >>> loadUrl(file:///android_asset/www/index.html)
    D/WebView (20666): loadUrl=file:///android_asset/www/index.html
    D/WebView (20666): onResume
    ...
    D/CordovaWebViewImpl(20666): onPageDidNavigate(file:///android_asset/www/index.html)
    ...
    D/CordovaWebViewImpl(20666): onPageFinished(file:///android_asset/www/index.html#/)iew (20666): evaluateJavascript=cordova.callbackFromNative('InAppBrowser114205225',true,1,[{"type":"loadstop","url":"https:\/\/www.halfchess.com\/auth\/facebook?r=https%3A%2F%2Fwww.halfchess.com%2F"}],true);

Log when I click LOGIN button.

    D/SystemWebChromeClient(20666): file:///android_asset/www/bundle.js: Line 76246 : LOGIN_ATTEMPT
    D/WebView (20666): WebView<init>
    D/WebView (20666): loadUrl=https://www.halfchess.com/auth/facebook?r=https%3A%2F%2Fwww.halfchess.com%2F
    D/WebView (20666): evaluateJavascript=cordova.callbackFromNative('InAppBrowser114205225',true,1,[""],true);
    V/InputMethodManager(20666): onWindowFocus: android.webkit.WebView{11dadeb5 VFEDHVC. .F....ID 0,0-720,1244 #6} softInputMode=16 first=true flags=#0
    V/InputMethodManager(20666): START INPUT: android.webkit.WebView{11dadeb5 VFEDHVC. .F....ID 0,0-720,1244 #6} ic=null tba=android.view.inputmethod.EditorInfo@604488f controlFlags=#105
    D/WebView (20666): evaluateJavascript=cordova.callbackFromNative('InAppBrowser114205225',true,1,[{"type":"loadstart","url":"https:\/\/www.halfchess.com\/auth\/facebook?r=https%3A%2F%2Fwww.halfchess.com%2F"}],true);
    D/SystemWebChromeClient(20666): file:///android_asset/www/bundle.js: Line 39091 : loadHandler: https://www.halfchess.com/auth/facebook?r=https%3A%2F%2Fwww.halfchess.com%2F
    D/WebView (20666): evaluateJavascript=cordova.callbackFromNative('InAppBrowser114205225',true,1,[{"type":"loadstop","url":"https:\/\/www.halfchess.com\/auth\/facebook?r=https%3A%2F%2Fwww.halfchess.com%2F"}],true);

The Code used in app.

    function cordovaFbLogin(redirectUrl) {
      const promise = new Promise((resolve, reject) => {
        //console.log('Inside cordovaFbLoginApi');
        let loginWindow = window.open(
                  `${fbLoginUrl}?r=${redirectUrl}`,
                  '_blank',
                  'location=no,hardwareback=no,clearsessioncache=yes');

        const startTime = new Date().getTime();
        let isPending = true;
        let visitedFacebook = false;

        const loadHandler = (event) => {
          const url = event.url;
          console.log('loadHandler: ' + url);

          if (url.indexOf('https://www.facebook.com') === 0) {
            visitedFacebook = true;
            return;
          }

          // NOTE: redirection sequence is a follows
          // facebook domain --> Halfchess --> redirectUrl
          // We close the window at '2nd step' (see below)
          if (url.indexOf('https://halfchess.com') === 0 && visitedFacebook) {
              // exit when the browser redirects back to us
            if (url.indexOf('code=') > 0) {
              // we have the cookie - make next API call or reject
              isPending = false;
              resolve();
            } else if (url.indexOf('error=') > 0) {
              isPending = false;
              reject();
            }
          }

          if (!isPending) {
            // in the Cordova app, and trying to close it while it's animating
            // generates an exception. Wait a little...
            const timeout = 600 - (new Date().getTime() - startTime);
            setTimeout(() => {
              loginWindow.close();
            }, timeout > 0 ? timeout : 0);
          }

        };

        const loadError = (error) => {
          console.log('fbLogin window - load error')
          console.log(error);
        }

        const exitHandler = () => {
          console.log('fbLogin window - exit');
          loginWindow.removeEventListener('loaderror', loadError)
          loginWindow.removeEventListener('loadstart', loadHandler)
          loginWindow.removeEventListener('exit', exitHandler)
          loginWindow.close();
          loginWindow = undefined;
        };

        loginWindow.addEventListener('loadstart', loadHandler);
        loginWindow.addEventListener('loaderror', loadError);
        loginWindow.addEventListener('exit', exitHandler);
      });
      return promise;
    }

Answer 1

I finally used a solution where I would detect if I have a facebook app (the plugin to use for the same is cordova-plugin-appavailability) and then follow one of the below flows :-

1. If I have a native fb app, then use cordova-plugin-facebook4 . The client receives the token from facebook and passes it to the server (I created a new route)

2. If I don't have a native fb app, then I use the function I have written above (or a variation of the same - refactored it since I last posted).

We weed to implement both the approaches because (1) will not work if there is no facebook native app and (2) will not work if there is a facebook native app on the phone.