So, I've been using Firebase in my AngularJS/Ionic project to access my app with Facebook authentication.
The authentication goes fine, it retrieves some data (Display_name, email, urid, url photo, etc.), but I need more.
I need to get the first name and last name for my project, because I'll need to work with it. When the person accepts to share the information it says that she's sharing her public profile, but the data that comes doesn't have what Facebook documentation says that public profile provides.
I used Firebase documentation to program this. There's a part where it says to use addScope to add what you want, public profile is asked by default, but I added it anyway. (I can't post the link, StackOverflow says that my reputation is too low).
$scope.FBLogin = function (){
firebase.auth().signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
var profile = result.user.public_profile;
console.log("success")
console.log(result);
console.log(user);
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
};
Log here:
So, since I don't want to have to use the "display name". as people sometimes don't use their real names there.
Does anyone know how to retrieve that information using Firebase and AngularJS?
Currently this is not supported by Firebase. You have to make the extra api call to Facebook to get that data.
result.credential.accessToken contains the Facebook access token. Using that access token, you can get facebook profile data. Here is an example how to do that with facebook:
How to get user profile info using access token in php-sdk
AJAX GET 'https://graph.facebook.com/me?access_token=' + result.credential.accessToken
For people looking for how to do it in AngularJS or how do you filter what you want this is how i did it using the information bojeil gave me!(Thank you again!)
var token = result.credential.accessToken;
var user = result.user;
$http.get('https://graph.facebook.com/v2.5/me? access_token='+token+'&fields=id,name,first_name,last_name,email')
.success(function(jsonService){
$scope.user.firstName= jsonService.first_name;
$scope.user.lastName= jsonService.last_name
$scope.user.email = jsonService.email;
});
Related
I'm working with an unofficial n26 API (https://github.com/PierrickP/n26/tree/develop). The api requires the email and password to login to the account.
I don't want the user to login every single time so I need to store these information somehow.
I can't find any way to get a session token or something for later use from the api. (maybe someone of you can find it??)
So my question: How do I store Email/Password for later use in a secure way?
const N26 = require('n26');
// Log into the account
const account = new N26('example#mail.com', 'password');
// Get the last 10 transactions
account.then(account => account.transactions({limit: 10}))
.then(transactions => {
// Do something with it
});
http://www.passportjs.org/ Check out this package.
things to consider:
- json web tokens with refresh token
- API-keys
I have used google sign in popup method in vuejs. In live google sign in pop up window flashes and never signed in. But everything works fine in local.
Here is firebase google sign in & sign up method code:
const database = firebase.initializeApp(config);
const firestore = database.firestore();
var provider = new firebase.auth.GoogleAuthProvider();
database.signIn = async (email, password) => {
try {
await firebase.auth().signInWithPopup(provider).then((result) => {
// This gives you a Google Access Token. You can use it to access Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log("user",user.displayName);
console.log('result google',result.user);
// ...
store.commit("setCurrentUser", result.user);
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
});
return true;
} catch (error) {
return error;
}
}
Tried by changing chrome pop up, cookies setting nothing works. Any help much appreciated please...
If it's working locally, you should make sure your hosting domain is registered with Google OAuth.
In Firebase console:
Develop -> Authentication -> Sign-in method -> Authorized domains
And add your domain to the list. It may take some time to verify.
If that doesn't work, try logging error.message for more information.
After updating firebase it works fine. npm i firebase#latest..
I am creating a web app using Firebase auth to authenticate my users and a MongoDB database to store some relevant user information specific to my site. I am trying to add Facebook as another means of authentication.
Logging in with Facebook is working, but what I want to do is intercept the user generation/authentication with Firebase to check if Firebase is creating a new user on a first-time Facebook login. This way if a new user is being created in Firebase I can also create a new user in my mongo database (essentially handling a signup). My facebook login function looks like this:
handleFacebookLogin() {
firebase.auth().signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
// check if new user here
// handleNewFacebookUser()
this.props.update(user);
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
var email = error.email;
var credential = error.credential;
});
}
I couldn't find anything that allowed me to check if a new user was being generated in the Firebase docs. It seems to silently handle new Firebase auth user generation when logging in through Facebook for the first time. If there is no built-in way for Firebase to handle this I will just check if the user exists in my database, but I wanted to be sure there wasn't a simpler alternative.
You can detect if a user is new or existing as follows:
firebase.auth().signInWithPopup(provider)
.then(function(result) {
console.log(result.additionalUserInfo.isNewUser);
})
.catch(function(error) {
// Handle error.
});
For more on this refer to the documentation.
I am trying to get a person's first name and last name when the person would like to sign up through Facebook, but wondering if there can be some security issue.
Based on the document from Firebase, the answer from Stack Overflow, and the explanation about parameters from Facebook website, I wrote the following codes:
firebase.auth().getRedirectResult().then(function(result) {
var token = result.credential.accessToken;
FB.api('/me', {fields: 'last_name', access_token: token}, function(response) {
console.log(response);
})
})
My main concern is that according to Facebook, it says:
One parameter of note is access_token which you can use to make an API call with a Page access token. App access tokens should never be used in this SDK as it is client-side, and your app secret would be exposed."
It looks like I cannot use this approach to get a user's first and last name.
Starting with Firebase 4.0.0, additional IdP data will be directly returned in the result of type UserCredential. You shouldn't need to make an additional API call to Facebook to get data like first/last name:
firebase.auth().getRedirectResult().then(function(result) {
if (result.user) {
// Additional user info like first name, last name,
// Facebook account url, gender, etc.
console.log(result.additionalUserInfo.profile);
// Facebook access token returned in the process
// for the scopes requested.
console.log(result.credential.accessToken);
}
});
I am working with Firebase and AngularJS. I am using Auth authentication for google login and i completed the process.Now i need to retrieve the user data that is stored in local storage like firebase:authUser:.
Once i login with google account in local storage you have firebase:authUser:.created and i need to fetch these details.
I used the following method to store user data
firebase.database().ref('users/' + user.uid).set
({
name: user.displayName,
email: user.email,
token: token
});
The documentation for the Web SDK does not mention that upon successfully authentication, Firebase sets the User object in localStorage. The API reference does not mention this either. I discovered this the same way you have by examining localStorage while trying to configure my Vue app with Firebase.
To retrieve the user from localStorage, you can do the following:
const authUser = Object.keys(window.localStorage)
.filter(item => item.startsWith('firebase:authUser'))[0]
You could have multiple entries in localStorage so that's the reason for filter()
Edit: See Metallica's answer below.
Update (2018-02-21): It seems there is now a section (Web) Authentication State Persistence
. Unsure if this was there when I originally posted my answer, but I'm updating this answer to link it since this questions gets moderate attention.
Update 2 (2018-02-21): As stated under Overview of persistence behavior
:
If no user is signed in and no persistence is specified, the default setting will be applied (local in a browser app).
So localStorage is the default which confirms my original answer before the Firebase JS SDK was open sourced.
Just to augment #Franciso Mateo's answer: the mentioned filtering, just returns the key (string) with which the serialized user object is stored in local storage. To get the actual deserialized user object, we need to read the item with this key from local storage:
const userKey = Object.keys(window.localStorage)
.filter(it => it.startsWith('firebase:authUser'))[0];
const user = userKey ? JSON.parse(localStorage.getItem(userKey)) : undefined;
To get a user's profile information, use the properties of an instance of User. For example:
var user = firebase.auth().currentUser;
var name, email, photoURL, uid;
if(user != null) {
name = user.displayName;
email = user.email;
photoUrl = user.photoURL;
uid = user.uid;
}
If you'd like to learn more about how to manage users in Firebase using Web SDK, visit this documentation.