facebookarchive / react-native-fbsdk

A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access to Facebook login, sharing, graph requests, app events etc.
https://developers.facebook.com/docs/react-native
Other
2.99k stars 907 forks source link

Facebook App instead of webview #471

Open atrimn opened 5 years ago

atrimn commented 5 years ago

I cant seem to figure this one out. I have the facebook app installed on my ios device but when i use the login manager to log in it opens up a webview instead of the facebook app.

stokesbga commented 5 years ago

I sure hope this gets some love. Im on framework 0.49 but Im going to try rolling back to 0.46 and see if that makes a difference

SnaiNeR commented 5 years ago

me too, only on ios but on android works via app

StevenMasini commented 5 years ago

Yes it works for me on Android if I put the behavior in uppercase, but doesn't work on iOS no matter if the behavior is in uppercase or lowercase.

import { LoginManager } from 'react-native-fbsdk';
import { Platform } from 'react-native';

let result;
try {
  let behavior = Platform.OS === 'ios' ? 'native' : 'NATIVE_ONLY';
  LoginManager.setLoginBehavior(behavior);
  result = await LoginManager.logInWithReadPermissions(['public_profile', 'user_birthday', 'user_gender', 'user_friends']);
} catch (err1) {
  try {
    let behavior = Platform.OS === 'ios' ? 'browser' : 'WEB_ONLY';
    LoginManager.setLoginBehavior(behavior);
    result = await LoginManager.logInWithReadPermissions(['public_profile', 'user_birthday', 'user_gender', 'user_friends']);
  } catch (err2) {
    // Facebook login failed with both native app and web browser
  }
}
if (result && !result.isCancelled) {
  //  Facebook login succeed, perform your login here
}

Nevertheless yesterday we received a warning from Facebook, which ask us to use the latest version of their SDK on iOS. But I double checked and we already do use the latest version 4.40.0. I don't know if anyone else has received this email.

Apparently their warning might be related to the fact that the Native App doesn't launch properly in our Facebook login on iOS. See https://developers.facebook.com/policy#7-2-photo

StevenMasini commented 5 years ago

After putting some breakpoints in the source code of the native iOS SDK I succeed to track down the issue to the method - (void)logInWithBehavior:(FBSDKLoginBehavior)loginBehavior in FBSDKLoginManager where the [FBSDKInternalUtility isFacebookAppInstalled] return false even if the app is installed on the device and even if the user is connected to the app.

I opened a ticket on the bug report platform of Facebook and I am waiting for their reply.

https://developers.facebook.com/bugs/1541604222639302/

atrimn commented 5 years ago

@StevenMasini i think its not a bug, facebook thinks its better ux to have the webview

Sixbitunder commented 5 years ago

@atrimn I don't think so, in this way, the user always has to fill his login details in the browser. This is really bad for the user experience especially if they have facebook app installed on their phones. In fact, facebook block your login app because they don't want this.. And it's absurd! They ask for something that actually you cannot achieve in any way on iOS anymore. I've read that from iOS 11 the 'native' behavior started to point to webview and not to facebook app. Probably is something related to Apple and their new restrictions and this probably could be the reason why [FBSDKInternalUtility isFacebookAppInstalled] always returns false

StevenMasini commented 5 years ago

@atrimn Facebook don't think the webview is a better approach. @Sixbitunder is right.

We received an email from Facebook warning us that our iOS app trigger the webview instead of the native app. They asked us to update the code to launch the native app, but there is this bug with react-native-fbsdk.

EugenePisotsky commented 5 years ago

Any updates on this?

StevenMasini commented 5 years ago

@RevanScript I opened a ticket on their developer platform, but so far still no update.

You can follow the progression here https://developers.facebook.com/bugs/1541604222639302/

poptocrack commented 5 years ago

Hi, Quick update from the Facebook team:

Hi John, We just got back from our team and this is unfortunately a won't fix for now. We'll keep tracking it internally and update whenever this gets fixed.

Please let me know if you have any other questions in the meantime.

Best, Gunay

gsunsnackv commented 5 years ago

So @StevenMasini , FB ask you to use their app instead of webview, but refuse to fix their bug that always says the app is not installed?

StevenMasini commented 5 years ago

@gsunsnackv Yeah that was the irony of the situation. But I have checked our log in with Facebook recently, and it seems to be fixed now.

At least it is fixed on my app after updating to the latest version of react-native-fbsdk.

Maybe others could confirm ?

HelloAfrica commented 5 years ago

@StevenMasini so the current state of your ios app allows for facebook login to happen with the native app and not the browser? Are you sure you weren't logged in via the browser the last time you checked?

StevenMasini commented 5 years ago

@HelloAfrica I just checked now on my app, it does open a web page first, but then inside the web page it gives me the option to log in via the native app.

HelloAfrica commented 5 years ago

@StevenMasini could you share a screenshot?

belal-mazlom commented 5 years ago

That was default behaviour on iOS Open web page then ask to log via native app or from webview I think it should open native app directly without open web page

But checking source code, I think it's not supported on iOS 😕 https://github.com/facebook/react-native-fbsdk/blob/master/js/FBLoginManager.js#L50

https://developers.facebook.com/docs/reference/iossdk/current/FBSDKLoginKit/enums/fbsdkloginbehavior.html

It was available before in v 4.39.1 : https://developers.facebook.com/docs/reference/iossdk/4.39.1/FBSDKLoginKit/enums/fbsdkloginbehavior.html/

bigorangemachine commented 5 years ago

I totally ripped off @StevenMasini snippet (thanks!). Tweaked it a little after trying a reduce async/await (come on es-next!).

I also noticed the README.md is showing the master not the stable. If you are pre react-native 0.60.0 I got hung up on this being missing from the xcode/android code.

With: react-native-fbsdk: 0.10.1 react-native: 0.59.9

I'm leveraging an environment variable as the emulators have varying levels of support for the facebook app. Which oddly enough my alpha didn't use LoginManager.setLoginBehavior() and it worked on a real-life iPad. Once I applied

In my README.md

* `FB_LOGIN_FORCE`: Can be `none`, `both`, `web`, `native` but defaults to `both`

In src/App.js -> populate process.env with values from Config

import Config from 'react-native-config';

Object.assign(process.env, Object.keys(Config).reduce((acc, key) => {
  if (typeof Config[key] === 'string' && !process.env[key]) {
    acc[key] = Config[key];
  }

  return acc;
}, {}));

export default process.env;

In my src/utils/facebookSDK.js

import FBSDK from 'react-native-fbsdk';

const { LoginManager } = FBSDK;
const fbLoginWebview = async (behavior = null) => {
  let auth;

  try {
    // falsey behavior should not set a mode
    if (behavior === 'native') {
      LoginManager.setLoginBehavior(Platform.OS === 'ios' ? 'native' : 'NATIVE_ONLY');
    } else if (behavior === 'web') {
      LoginManager.setLoginBehavior(Platform.OS === 'ios' ? 'browser' : 'WEB_ONLY');
    }

    auth = await LoginManager.logInWithPermissions(['public_profile']);
  } catch (caughtError) {
    // Facebook login failed -> Log for the local development
    __DEV__ && console.info(`Facebook Auth Failed - ${behavior}: `, caughtError.message || caughtError);

    return null;
  }

  return auth;
};
const fbLogin = async() => {
  let auth;
  const method = 'facebook';
  const cleanForce = (typeof process.env.FB_LOGIN_FORCE === 'string' && process.env.FB_LOGIN_FORCE.toLowerCase()) || '';

  if (cleanForce === 'both' || !cleanForce) {
    auth = await fbLoginWebview('native');
    if (!auth) {
      auth = await fbLoginWebview('web');
    }
  } else if (['native', 'web'].includes(cleanForce)) {
    auth = await fbLoginWebview(cleanForce);
  } else {
    // let OS/Device decide -> basically if(cleanForce === 'none'){}
    auth = await fbLoginWebview();
  }

  return auth;
}
export default fbLogin;
tiffanym19 commented 4 years ago

I'm having also an issue like this, what is the update for this. Even the Facebook app installed in the ios device it opens the safari login instead.

sun20171001 commented 4 years ago

Same issue

vohoangankhanh commented 4 years ago

Same problem

emech-en commented 4 years ago

Same problem

mifi commented 4 years ago

Had the same problem, my app would use the webview on iOS no matter if I had the Facebook app installed. For me what helped is to go to Safari, then log out of facebook and remove my account. Now the webview redirects to the Facebook app to login