Backendless Support
 
Assigned to Dev

Unable to login with facebook for ionic 3 app

Hi , I am building an ionic 3 app with cordova support.

I have integrated the facebook login using cordova plugin (https://github.com/jeduan/cordova-plugin-facebook4) , and it works fine.

Now I am using backendless 4 to persist this fetched facebook user details.

Ref doc : https://backendless.com/docs/js/doc.html#users_facebook_login

My code looks like this

  1. facebookLoginCordova() {
  2. this.facebook.login(['public_profile', 'user_friends', 'email',])
  3. .then(res => {
  4. var userId = "/" + res.authResponse.userID + "?fields=name,first_name,last_name,email,picture"
  5. this.facebook.api(userId,['public_profile']).then(res => {
  6. this.user = res
  7. this.loginFBBackendless()
  8. })
  9. console.log('Logged into Facebook!', res)
  10. }).catch(e => console.log('Error logging into Facebook', e));
  11. }
  12. loginFBBackendless() {
  13. var facebookFieldsMapping = {
  14. email : 'email',
  15. name : 'name',
  16. first_name: ' first_name',
  17. last_name : 'last_name'
  18. }
  19. Backendless.UserService.loginWithFacebookSdk(facebookFieldsMapping,true)
  20. .then( res => {
  21. this.message = "Successfully saved user to backendless"
  22. console.log("Successfully saved user to backendless")
  23. })
  24. .catch( function( error ) {
  25. this.message = "Error while saving user to backendless"
  26. console.log("Error while saving user to backendless")
  27. });
  28. }

I am unable to persist the user , there is no error either. I tested the Backendless connectivity with the TestTable

  1. Backendless.Data.of('TestTable').save({ foo: 'bar' })

and this worked and i can see the table entries in the backendless console.

Am I doing something wrong or is it issue with backendless 4 for ionic.

Leave a Comment

Comments (5)

photo
1

Hi Bhavya,

Have you configured your Backendless app per the instructions from here (see the "Login with Facebook setup" section):

https://backendless.com/docs/js/doc.html#dynanchor11

Regards,

Mark

photo
1

Hi Mark ,

As per the link provided above , up on adding the api.backendless.com into the App Domains field , facebook console threw this error while saving

App domains must match the domain of the Facebook Web Games URL (https), Mobile Site URL, Unity Binary URL, Site URL or Secure Page Tab URL. Please correct these domains: api.backendless.com.

I added the https://api.backendless.com. to valid OAUTH redirects list , but the changes dint help.

Regards,

Bhavya.

photo
photo
1

Hi, I was not able to reproduce the problem in facebook application you've attached.

This domain should correspond to URI set to the 'Site URL'. You need to add a platform 'website' and add https://api.backendless.com as a site url. Please go attentively through the instructions to configure your facebook application. Then paste facebook appid and secret to social settings located in Manage > App settings.

To see how login through social networks should be implemented - you may generate a sample for JS. Codegeneration tab > Language JS > select facebook login.

It's a working example, if you face any difficulties - please track exceptions and post it here

Best regards

photo
1

Hi Anton ,

Thank you for the help ! I added the site url in 'website' platform and the error is gone.

The backendless facebook login using Backendless.UserService.loginWithFacebook() works like a charm.

But my actual use case is that , for my android app I should login through cordova plugin facebook sdk (https://github.com/jeduan/cordova-plugin-facebook4) and persist the logged in user to the backendless.

So now I replaced Backendless.UserService.loginWithFacebook() with Backendless.UserService.loginWithFacebookSdk() and followed the steps mentioned here (https://backendless.com/docs/js/doc.html#users_facebook_login > Integration API ) and ran the ionic project on android emulator.

My code looks like this :

  1. var facebookFieldsMapping = {
  2. id :'userId',
  3. email : 'email',
  4. name : 'name',
  5. first_name : 'first_name',
  6. last_name : 'last_name'
  7. }
  8. this.message = authRes.authResponse.accessToken
  9. Backendless.UserService.loginWithFacebookSdk(facebookFieldsMapping ,true)
  10. .then( res => {
  11. this.message = "Successfully saved user to backendless"
  12. console.log("Successfully saved user to backendless")
  13. })
  14. .catch( err => {
  15. this.message = "Error while saving user to backendless"
  16. console.log("Error while saving user to backendless" + err)
  17. });

After successfully login with cordova facebook plugin , when Backendless.UserService.loginWithFacebookSdk(fieldsMapping,true) was invoked ,

it internally made a POST call to backendless that resulted in an error with error code 8002.

  1. POST https://api.backendless.com/<APP_ID>/<API_KEY>/users/social/facebook/login/<APP_ID>;
  2. {
  3. "authResponse": {
  4. "accessToken": "<access token>",
  5. "userID": "<userId>",
  6. "expiresIn": 5742,
  7. "signedRequest": "<signed url>"
  8. },
  9. "status": "connected",
  10. "fieldsMapping": {
  11. "id": "userId",
  12. "email": "email",
  13. "name": "name",
  14. "first_name": "first_name",
  15. "last_name": "last_name"
  16. }
  17. }

Response:

status : 404

  1. {
  2. "code": 8002,
  3. "message": "Could not parse request with message: , status code 404, headers POST /<APP_ID>/<API_KEY>/users/social/facebook/login/<APP_ID>",
  4. "errorData": {
  5. }
  6. }

NOTE : I made no changes to my social setting in backendless console for this . But on facebook dev console I added "http://<my-ip>:8100/"; to the valid oauth url list.

Can you help me out .

Regards,

Bhavya.

photo
1

For some reason JS SDK using a non-existing route for facebook login. I've created an internal task with id BKNDLSS-16440 to fix this issue. We'll roll out an updated version of JS SDK and will notify you here ASAP.

Thanks for your report and sorry for the inconvenience

Best Regards

photo