Calling LoginManager.logInWithPermissions(["public_profile"])on android opens the facebook modal, then when I click on continue, the modal closes, howewer it seems like a hidden modal is still present on the screen, since only after using the manual goback gesture is it possible to interact with the app again, then only a response is returned as follow {"isCancelled": true}.
It seems like the interface is bugged. Any help on this issue ?
I'm using the lastest "react-native-fbsdk-next": "^11.1.0" version.
Complete code
LoginManager.logInWithPermissions(["public_profile"]).then(
function(result) {
console.log('result', result)
if (result.isCancelled) {
console.log("Login cancelled");
} else {
console.log(
"Login success with permissions: " +
result.grantedPermissions.toString()
);
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log('data', data)
if(data.accessToken) {
facebookConnect(
{
access_token: data.accessToken,
},
dispatch,
navigation
)
} else {
console.log('data', data)
Alert.alert(t(trans.error_message))
}
}
)
}
},
function(error) {
console.log("Login fail with error: " + error);
}
);
Related
I am attempting to utilize the ShareDialog export from the 'react-native-fbsdk' library.
Our implementation (shown below) works perfectly well when the user doesn't have Facebook installed on their device and when they successfully share their photo.
However, when the user begins to share and discards the Facebook window, result.isCancelled is only captured on iOS. result.postId isn't populated on either iOS and Android.
Is there something that needs to be done in order for result.isCancelled to be populated on Android and/or result.postId to be populated on either platform?
ShareDialog.canShow(shareContent).then(
(canShow) => {
if (canShow) {
return ShareDialog.show(shareContent);
} else {
return false;
}
},
).then(
(result) => {
if (!result) {
Alert.alert('Error', 'You must have Facebook installed on this device in order to share this post')
} else if (result.isCancelled) {
Alert.alert('Cancelled', 'Share cancelled');
} else {
Alert.alert('Success!', 'Share successful');
}
},
(error) => {
Alert.alert(`Share fail with error: ${error}`);
},
)
I am building a React Native app, I previously implemented Facebook login using login Manager
export const onLogin = () => {
return (dispatch) => {
console.log('inside login');
dispatch({ type: ON_LOGIN });
LoginManager.logInWithReadPermissions(['public_profile',
'email']).then((res) => {
console.log(res);
MakeGraphRequest(dispatch);
},
(error) => {
console.log(error);
LoginFail(dispatch, error);
});
};
};
function MakeGraphRequest(dispatch) {
const responseInfoCallback = (error: ?Object, result: ?Object) => {
if (error) {
console.log(error);
LoginFail(dispatch, error);
} else {
axios({
method: 'post',
url: 'url',
data: {
first_name: result.first_name,
last_name: result.last_name,
profile_photo: result.picture.data.url,
email: result.email,
spend_history: []
}
}).then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
LoginSuccess(dispatch, result);
}
});
}
};
const infoRequest = new GraphRequest(
'/me',
{
parameters: {
fields: {
string: 'email, first_name, last_name, picture.type(large), birthday'
}
}
},
responseInfoCallback
);
new GraphRequestManager().addRequest(infoRequest).start();
}
Also I've used Login Button and Expo Facebook login but I could not find a way to implement this kind of a login.
Should I use Login Manager or Login Button. The Facebook docs are valid for web only. Is there a way to integrate this in my RN(react native) project?
You already have the user data in the response. So you can just start your screen (like in the picture) and ask if the user really wants to sign in with this account. Only after that, call your LoginSuccess events. If the user doesn't want to login just dispose the result data.
.then((res) => {
if (res.data.userid) {
const userid = res.data.userid;
// add screen logic here
// LoginSuccessForUnregisteredUser(dispatch, result, userid);
} else {
// add screen logic here
// LoginSuccess(dispatch, result);
}
});
Same would go with the Facebook Login Button or AuthSession.
Using AsyncStorage to save/fetch the state and get wether he goes or goes not to the "continue as" screen.
try {
await AsyncStorage.setItem('#MySuperStore:key', 'I like to save it.');
} catch (error) {
// Error saving data
}
try {
const value = await AsyncStorage.getItem('#MySuperStore:key');
if (value !== null){
// We have data!!
// show "continue as" screen
console.log(value);
}
} catch (error) {
// Error retrieving data
}
I'm using the following module in my React Native app in order to login users with Facebook. https://github.com/facebook/react-native-fbsdk
I logged the following issue.
https://github.com/facebook/react-native-fbsdk/issues/58
I have the following in my view and I get the GlobalStore can't find error.
var FBSDKLogin = require('react-native-fbsdklogin');
//init facebook login
fbTouchHandler(event) {
FBSDKLoginManager.setLoginBehavior(GlobalStore.getItem('behavior', 'native'));
FBSDKLoginManager.logInWithReadPermissions([], (error, result) => {
if (error) {
alert('Error logging in.');
} else {
if (result.isCancelled) {
alert('Login cancelled.');
} else {
alert('Logged in.');
}
}
});
}
I have a single component which is just a login form.
When login is unsuccessful I get a full application reload for some reason.
This is the application main entry. All it does is the initial authentication ping. If session is up it loads the actual application, otherwise it mounts Authentication component which is just a login form.
var Application = {
run() {
m.request({
method: "GET",
url: cfg.apiurl("/session/ping"),
extract(xhr) {
return xhr.status > 200 ? xhr.status : xhr.responseText;
}
}).then(r => {
var init = {
uname: r.data.uname
};
router(init);
}, e => {
if (e === 401) {
m.mount(document.body, Authenticate);
}
});
}
};
Application.run();
Below is the Authentication component minus the view. It binds login variables to the view and defines submit action. When I run submit action with incorrect credentials it reloads the application.
Why does it reload the application??
Chrome console says: Navigated to http://localhost:3000/? right after "Login Failure !!!" console message. This causes full application reload. So any on-screen error messages and popups about incorrect login simply disappear. It does print the last error message to the console "Login Failure !!!". After that, when submit function exits, it navigates to the root of the URL causing a full reload.
What am I doing wrong?
var Authenticate = {
controller, view
};
function controller() {
this.info = m.prop("");
this.data = {
uname: m.prop(""),
passw: m.prop(""),
local: m.prop(false)
};
this.submit = () => {
Login.auth(this.data).then(r => {
if (this.data.uname() === r.data.uname) {
var init = {
uname: r.data.uname
};
router(init);
} else {
console.log("Login Mismatch !!!");
}
}, e => {
if (e === 401) {
console.log("Login Failure !!!");
popa();
} else {
console.log(`Server Errror ${e} !!!`);
}
});
};
}
Thank you very much.
If you use HTML form-element, submit always triggers a page reload. You have to preventDefault here
m('form', {
onsubmit: function(event) {
event.preventDefault();
}, 'form content'
})
My app is in the early development stage. I'm using the latest PhoneGap Build and Facebook Connect plugin. I managed to get the login working - you tap the Login With Facebook button, it switches to the Facebook app, Facebook passes my app an object with the basic login key/token & userID, and then my app tries to reach out for the user's full name and age.
I can't seem to get Facebook to give me any information other than the user's ID and full name. I need the user's age! For some reason, adding a projection isn't working... What's wrong with my code?
var fbLoginSuccess = function (userData) {
facebookConnectPlugin.getAccessToken(function(token) {
if(userData['status'] == 'connected'){
getBasicUserInfo_fb(userData);
}
}, function(err) {
alert("Could not get access token: " + err);
});
}
function getBasicUserInfo_fb(userData){
facebookConnectPlugin.api(userData['authResponse']['userID'] + "/?fields=id,birthday", ["user_birthday"], function (response) {
if (response && !response.error) {
alert("response: " + JSON.stringify(response));
console.log(response);
var user_name = response['name'];
var user_age = response['birthday'];
var user_picture = response['picture'];
}
},
function (error) {
console.log(error);
alert("Failed: " + JSON.stringify(error));
});
}
The Github page (https://github.com/Wizcorp/phonegap-facebook-plugin) says:
Getting a User's Birthday
Using the graph api this is a very simple task:
facebookConnectPlugin.api("<user-id>/?fields=id,email", ["user_birthday"],
function (result) {
alert("Result: " + JSON.stringify(result));
/* alerts:
{
"id": "000000123456789",
"email": "myemail#example.com"
}
*/
},
function (error) {
alert("Failed: " + error);
});
I might be losing my mind but the example on Github is saying how to get the birthday, and the scope is set up to get that, BUT then the parameters are set up to get the email address. Basically all I've done is changed "id,email" to "id,birthday"... What am I doing wrong?!
Apparently I was wrong to have "user_profile" in my initial login request... I guess it only accepts one parameter?
The bad version:
facebookConnectPlugin.login(["public_profile","user_birthday"],
fbLoginSuccess,
function (error) { alert("" + error) }
);
The good version:
facebookConnectPlugin.login(["user_birthday"],
fbLoginSuccess,
function (error) { alert("" + error) }
);