Social Login User Data

[James]

Hello, 

I've been working on a hybrid app for android that integrates Facebooks O-Auth login. I'm using the javascript sdk and I have been able to successfully log users in, however, The Identity field that is attached to the user does not contain the expected Identity information from the social service... My facebook login function contains the following:

var facebookConfig = {
            name: 'Facebook',
            loginMethodName: 'loginWithFacebook',
            endpoint: 'https://www.facebook.com/dialog/oauth',
            response_type: 'token',
            client_id: 'xxxxxxxxxxx',
            redirect_uri: "http://www.facebook.com/connect/login_success.html",
            access_type: 'online',
            scope: 'email&public_profile',
            display: 'touch'
        };
        var facebook = new IdentityProvider(facebookConfig);

        facebook.getAccessToken(function (token) {

            Everlive.$.Users.loginWithFacebook(token)
                .then(function () {
                    notify('logged in');
                    window.app.data.router.replace('views/userView/view.html');
                })
                .then(null, function (err) {
                    if (err.code === 214) {
                        notify('The specified identity provider is not enabled in the backend portal.');
                    } else {
                        notify(err.message);
                    }
                })

 

Which works, but when I go into the Users data item that is created this is the only information i see in the Identity object: 

 

{

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

The Email attribute that is attached the user is null, but the DisplayName Field for some reason gets assigned to the facebook users name. I can't seem to find in the documentation anything as per how to request the user data returned from facebook. Anyone have any insight into how I can get the Identity object with the user profile data?

Thanks in advance, 

 

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

 {

Identity:

    Facebook:{

       name:'Facebook Name'

       id:'762705022690'

      }

}

[Anton Dobrev]

Hi James,

You can supply the required scope permissions as comma-separated values:

scope: 'email, public_profile',

Another optional scope configuration could be:

scope: "email, user_friends, public_profile"

The format which you used to pass the scope definition is obviously resolved to the basic_info scope and does not include the required information.

For example, with the above configuration you will receive:

id, email, first_name, last_name, etc.

In addition, you can take benefit of the Facebook plugin available in the Telerik Marketplace and provide your users with Facebook experience from the native Facebook SDKs. The plugin along with a sample app is available here.

Let me know if this answers your question.

Regards,
Anton Dobrev
Telerik

 

 

[James]

Hi Anton, 

Thanks for your reply, 

 As suggested I have replaced the scope within the config object to be comma separated. I removed all current Facebook users from the users backend resource then removed the permissions from the facebook user control panel to my app and tried to re-login for the first time using the above format. However the Identity object in the telerik backend still contains the same information, see attached BackendUserIdentity.png. 

The request to FB seems to happen correctly with the scope values... When first registering and approving access the facebook login screen shows what information the application is requesting... and in the facebook settings panel the app the application has acccess to public profile, friends list, and email address. That said, none of this is getting attached to Identity object that is being attached to the newly created user.

 

 

[Anton Dobrev]

Hello James,

Thank you for specifying this. Indeed, it seems the configuration is correct and should be working as expected. The strangeness in this issue is that even the default scope provides more information than the one you have obtained.

I am afraid that I wasn't able to reproduce the issue and the requested scope is always added to the backend project. Actually, as explained in this aarticle, the backend server tries to reach the Facebook API with the provided token and obtain the public user information.

I am assuming that in some way a token was cached and/or interferes with the token obtained by the login workflow. That is why I'd suggest that you log out any Facebook pages and applications and try again.

Also, you can try to use the obtained token to call directly the FB API and see what public information is returned for the token. This will identify more precisely the area we should investigate.

To test this use a GET request to

https://graph.facebook.com/me?access_token=<access-token>

where the <access-token> is changed for the actual token you obtained for the user that logged in your app.

In your app you will have the access token received in the callback of the facebook.getAccessToken method.

Please, try this on your side and let me know the results.

Regards,
Anton Dobrev
Telerik

 

 

[James]

Hi Anton, 

Thanks for your reply. I have reviewed the article that you sent and I think that I am completing all the steps outlined in the document. I have attached some annotated code below that breaks down the code into the 5 steps in your article.

When using the access token obtained on line 22 below and making a request to  Http://graph.facebook.com/me?access_token=<access_token>. The response that was obtained from facebook is the same data that is being populated in the identity object of the User. ie. {'name': 'Some name', 'id': '902839423'}... 

 

01.//User clicks facebook login button which is bound to the fbLogin function onClick
02.fbLogin: function () {
03.  //Facebook auth config providing app id and scope requirements
04.  var facebookConfig = {
05.    name: 'Facebook',
06.    loginMethodName: 'loginWithFacebook',
07.    endpoint: 'https://www.facebook.com/dialog/oauth',
08.    response_type: 'token',
09.    client_id: '677xxxxxxxxxxxx',
10.    redirect_uri: "http://www.facebook.com/connect/login_success.html",
11.    access_type: 'online',
12.    scope: 'email, user_friends, public_profile',
13.    display: 'touch'
14.  };
15.
16.  //Identity provider from friends app
17.  var facebook = new IdentityProvider(facebookConfig);
18.
19.  //Step One: Request access token and upon completion call passed callback function
20.  facebook.getAccessToken(function (token) {
21.    //Step Two: got the auth token
22.    console.log(token); //Where I grabbed the token to test the /me endpoint
23.
24.    //Step Three: Pass token to Backend Services
25.    Everlive.$.Users.loginWithFacebook(token)
26.      .then(function (data) {
27.         // Step 4 @ 5 user reg / login successful
28.         //Navigate upon successful login/reg
29.         window.app.data.router.replace('views/userView/view.html');
30.      }).then(null, function (err) {
31.         if (err.code === 214) {
32.            notify('The specified identity provider is not enabled in the backend portal.');
33.         } else {
34.            alert(err.message);
35.            notify(err.message);
36.         }
37.       });
38.    });
39.},

 

[Anton Dobrev]

Hello James,

Thanks for trying this on your side. It seems that the server logic is correct and the fields returned by the Facebook server are correctly added to the Identity of the user account. I am assuming that the issue stands in the permissions/settings of the Facebook account or perhaps app. I wasn't able to reproduce the issue for now.

Here are my suggestions:

Check if the permissions/security settings of the profile restrict this:
 - Try with another Facebook account
 
Check if the Facebook Developers app is properly configured:
 - Try your backend project with the Friends sample app by just entering your Backend Services API key and see if the account's Identity is populated with more details as expected when using another Facebook app as the one configured in the sample.

Check if obtaining the token via the Facebook plugin will resolve the issue:
 - Use the Cordova plugin to obtain the token and pass it to the Everlive JavaScript method. This will work only on an actual device when the app is deployed as an app package

Check the platform/device
 - Is this behavior the same in the simulator, device, iOS/Android, etc.

I hope that this helps.

Regards,
Anton Dobrev
Telerik

 

 

[James]

I think I found the reason for my problem...

 Facebook has changed their API in version 2.4 to require the addition of a fields paramater to define the fields included in the response. No longer will facebook return all fields associated with the identity. As my application was created recently the API version is set to 2.4 and all calls to versions previous to this (by appeding /v2.3/ or /v2.2/ will be upgraded to 2.4)... Unfortunately everlive does not seem to deal with this new field requirement... and thus the identity being returned will always only ever contain the name and id and not the fields associated with the requested scope.... 

 I am in the process of trying to determine how I can change the API version of of my facebook application... I'll update once I have determined the process to do that ( or if it is possible...). Regardless, the facebook API version 2.4 breaks the facebook everlive social login and registration and this will need to be addressed at some point on your end it looks like.

 

[James]

Alas, there appears to be no option to revert the Facebook application in the developer console to a previous version of the API... that I have found so far... They seem to enforce the current version at the time of apps creation... even converting specific requests to a previous version to the current... in this case v2.4. 

Anton it would appear that the reason you were unable to replicate the issue would be that the APP ID associated with the friends app is defaulting to a earlier version of the FB API. However if you tried to create a new app and use the APP ID in the friends app the same issue will occur.

 

[Anton Dobrev]

Hello James,

Thank you for posting your findings to the forum.

Indeed, newly-created Facebook Apps will be automatically bound to version 2.4 of the Facebook API. This means that the Identity object in user accounts in a Backend Services project would be populated with the Facebook id and name of the user account. However, the identity of the user is verified and the user account is successfully created in the backend project.

If a developer needs to retrieve further details which the app user has granted to the app (email, birthday, country), this can be achieved by accessing the Facebook Graph API directly with a GET HTTP call like this:

https://graph.facebook.com/me?access_token=<access-token-here>&fields=email, first_name

The Facebook plugin also has utility methods that can allow the developer to obtain a token on behalf of the user and with a certain scope and read user data from the Graph API.

Let me know if further questions arise.

Regards,
Anton Dobrev
Telerik

 

 

[James]

Thanks for the reply Anton, 

I understand that I can make additional calls to the graph API to get the information I need however I would prefer to resolve the issue within the library itself if possible. I dislike the idea of having to make an additional calls to the facebook API to grab this information as a custom "second step"... 

While I understand that this is situation is really out of your control as Facebook can do anything with their API. One of the reasons we adopted the Telerik Platform is that we were trying to avoid the time involved in setting up things like social login. Does Telerik have a idea of when we might be able to expect a update to fix the Everlive library? I'm very new to the Telerik platform as a service an have no idea what expectations I should have in this regard. 

I have been parsing through the everlive.all.js library to see where this information is acquired and stored in the User resource. I'm hoping as this is just an additional URL field parameter that needs to be included in the request that this should be relatively easy to fix. I'll post any updates when they occur if I make any progress on this.

 

Thanks again, 

 

[Anton Dobrev]

Hi James,

The token obtained from Facebook on behalf of the user account as used by the loginWithFacebook(accessToken) method is passed to the Backend Services server which accesses the Facebook API. The call to Facebook is not made from the client SDK. The whole workflow is exemplified here - http://docs.telerik.com/platform/backend-services/features/users/users-social#authentication-pattern

That is why I suggested that you use additional logic to obtain the required information about the user Facebook profile and eventually alter the user account in the backend.

Let me know if you have further questions, I will be happy to help.

Regards,
Anton Dobrev
Telerik