facebook: ~5.0.1andexpo: 33.0.0`
onFacebookSignIn = async () => {
try {
const {
type,
token,
} = await Facebook.logInWithReadPermissionsAsync(facbookAppId, {
permissions: ['public_profile', 'email'],
browser: 'browser'
});
if (type === 'success') {
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
} else {
console.log('cancel');
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
**on click of a button it opens facebook login page login via my email and password works fine but in case of login via install facebook app, it takes me to next allow page but than next page show blank:(
i have spent couple of days on this on and off, thankyou.
screen**
Since Facebook actually opens and you are prompt with the login page then it is most probably that you make a mistake setting up your Facebook app on your Facebook developer account.
Follow this to set your Facebook app correctly
Make sure to set host.exp.Exponent for your app field iOS Bundle ID
Make sure to set rRW++LUjmZZ+58EbN5DVhGAnkX4= for your app field Android key hash
Please follow this since you are using expo SDK 33
Related
I am working on ionic and firebase project, made a login page to sign in with google. I am using this Below.
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider).then(function (result) {
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
$state.go('app.homepage');
}).catch(function (error) {
});
firebase.auth().getRedirectResult().then(function (result) {
if (result.credential) {
var token = result.credential.accessToken;
}
// The signed-in user info.
var user = result.user;
}).catch(function (error) {
});
When I run it in the browser it is working fine, but when I run it in android device I am getting auth/operation-not-supported-in-this environment.
The application is running on "location.protocol".
I researched a bit but could not find an exact answer. What could be wrong ?
popup and redirect operations are not currently supported in Ionic/Cordova environment. As a a fallback you can you an oauth cordova plugin to obtain a google/facebook OAuth access token and then sign in the user via signInWithCredential. Check this thread for more on this:
auth.signInWithCredential(firebase.auth.FacebookAuthProvider.credential(fbAccessToken));
https://groups.google.com/forum/#!searchin/firebase-talk/facebook$20cordova/firebase-talk/mC_MlLNCWnI/DqN_8AuCBQAJ
Try the following because local storage is not enabled in webView, which is required for firebase
webSettings.setDomStorageEnabled(true);
I'm testing my web app login flow on the iOS8. I notice that on iOS8, the login dialogue pops up, but after logging in, it just stays there, showing a blank page.
The login works, because the page behind it shows the user information, but the popup just stays there, while it should close automatically. On iOS7 and iOS6 it does close. On desktop browsers it closes too.
I've tested some other random sites (for example brainfall.com) using FB.login(): same thing.
Does anyone have a fix for this?
Any help is much appreciated!
Check this:
fb_window_redirect
Override de window.open method. This allows you to know what windows are opened.
Then you can redirect the window opened by the FB SDK.
...
window._open = window.open; // saving original function
//Override the function
window.open = function(url,name,params) {
var new_window = window._open(url,name,params);
if (typeof onWindowOpen === "function") {
onWindowOpen(url, name, params, new_window);
}
return new_window;
};
...
var openedWindows = [];
var fbWindows = [];
function onWindowOpen(url, name, params, new_window) {
...
// Filter the facebook oauth request
if (url.contains('facebook.com')
&& url.contains('oauth')) {
fbWindows.push(new_window);
}
openedWindows.push(new_window);
}
...
//On fb login button pressed callback:
FB.login(function(response) {
//Try login
if(response.authResponse) {
//Login succesful
// Fb window redirect.
// see onWindowOpen
var fbwin = fbWindows[0];
var redirect_url = ''
fbwin.location = redirect_url;
}
},
{scope: 'email,publish_stream,user_birthday'});
...
im quite new to angular.js and firebase, so im starting to edit some code from an open source script to expens my knowledge ... i used a chat script with a facebook login.
i decided to go change the facebook login to a twitter login. (firebase lets you use logins pretty easy)
function onLoginButtonClicked() {
auth.login("Twitter");
}
the code also automaticly gets the user image from facebook with
<div id="comments">
<script id="template" type="text/template">
<img class="pic" src="https://graph.facebook.com/{{userid}}/picture">
<span><b>{{name}}</b><br/>{{body}}</span>
</script>
But now i changed it to an twitter app i wonder how i can get the twitter user icons instead?
--edit--
whats wrong with the question?
If you check out the user info returned from the login process, you'll see that it contains a an object called thirdPartyUserData. It contains all of the information provided by twitter during login; this is their purview and could change when their API or policies change in the future, but has (for as long as I've been familiar with the Twitter API) contained URLs for user's avatars:
var ref = new Firebase(URL);
var auth = new FirebaseSimpleLogin(ref, function(err, user) {
if( err ) console.error(err);
console.log('avatar is ', user && user.thirdPartyData.profile_image_url);
});
$('button').click(function() {
console.log('clicked it');
auth.login('twitter');
});
(Side note: the login provider is twitter vs Twitter)
There is another way to get the Twitter avatar which works better since getting it from the login user object is only for the logged in user and so would require that the URLs be saved which would then be a problem if the user ever changed their twitter avatar since the URL would then be missing. After some searching around I found that the twitter avatar (or facebook) avatar can be reached from the firebase user id as follows:
var info = userId.split(':');
var provider = info[0];
var id = info[1];
if ( provider === 'facebook' ) {
return 'https://graph.facebook.com/' + id + '/picture?type=square';
} else if ( provider === 'twitter' ) {
return 'http://twitter.com/api/users/profile_image/' + id + '?size=normal';
}
I have tried basic steps of Firebase Facebook authentication. So in my app the user can successfully log in using Firebase Facebook authentication. But I have a problem in logout.
I used logout button and bind click event on that, as shown below:
$(function(){
$('#lgout').click(function(){
auth.logout();
});
});
For login I use this code:
var chatRef = new Firebase('https://my-firebase-url');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
if (error) {
// an error occurred while attempting login
alert("please login first");
} else if (user) {
// user authenticated with Firebase
//alert('User ID: ' + user.id + ', Provider: ' + user.provider);
$.ajax({
type: "GET",
url: "https://graph.facebook.com/"+user.id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('#user').text("Welcome "+data.name);
}
});
} else {
// user is logged out
//auth.login('facebook');
}
});
auth.login('facebook');
In login also, I got one problem as you can see in else part I used auth.login('facebook'); that is not working showing error
auth is not defined. But if I used outside of else then it working fine.
Please help me to figure out this problem.
Separate from the issue regarding auth.logout(), you should never call auth.login('facebook'); from within this callback. Rather, it should be called after a user click event, as your browser will prevent the Facebook pop-up from launching.
From https://www.firebase.com/docs/security/simple-login-overview.html:
Third-party authentication methods use a browser pop-up window to
prompt the user to sign-in, approve the application, and return the
user's data to the requesting application. Most modern browsers will
block the opening of this pop-up window unless it was invoked by
direct user action.
For that reason, we recommend that you only invoke the "login()"
method for third-party authentication methods upon user click.
I am building a mobile site where a user has to be able to login with his facebook account as described on http://developers.facebook.com/docs/guides/mobile/web/. It works on Iphone and Android devices but on Windows Phone it does not. This is what happens:
When I press the login button I get the facebook page where I have to give permission to use my facebook account.
After I give promission, it redirects to "https://www.facebook.com/dialog/permissions.request" and a blank page is shown. On Android the "window.FB.login" callback is called (see code below) where I can get the info and redirect the user but on Windows Phone it only shows that blank page. When I go to my facebook page, my site is registered in the app list. So the registration did work correctly.
The same thing happens when I try to login on the example page: http://www.facebookmobileweb.com/hello/.
Does anyone know how to make it work on Windows Phone? And is it even possilble? Because I found a lot of sites where this happens.
This is my code: (Once again this works on Android and Iphone devices).
var fbApi = {
init: function () {
$.getScript(document.location.protocol + '//connect.facebook.net/en_US/all.js', function () {
if (window.FB) {
window.FB.init({
appId: MY_APP_ID,
status: true,
cookie: true,
xfbml: false,
oauth: true,
});
}
});
},
login: function () {
/// <summary>
/// Login facebook button clicked
/// </summary>
log("login facebook button clicked");
if (window.FB) {
//Windows phone does not enter this method, Android and Iphone do
window.FB.login(function (response) {
if (response.status) {
log('it means the user has allowed to communicate with facebook');
fbAccessToken = response.authResponse.accessToken;
window.FB.api('/me', function (response) {
//get information of the facebook user.
loginService.subscribeSocialUser(response.id, response.first_name, response.last_name, fbAccessToken, "", "FaceBook", fbSucces, fbFail);
});
} else {
log('User cancelled login or did not fully authorize.');
}
},
{ scope: 'email'
});
}
}
};
I did it in an other way as described here: http://developers.facebook.com/docs/authentication/