Login in customers with their Facebook

Jurgen_Feuchter
Shopify Partner
229 1 40

Hello people! 😄 

I want to create an API of my own to login users using the Facebook login from our storefront. Can anyone suggest to me any tutorial or documentation where I can find how to login a user using an API or something like that? I already have the Facebook plugin to login with it, but its useless unless I get a way to login the user with some sort of shopify js or API which gives me a temporary key to login the user. 

Im researching on the documentation for the login using the Multipass, but havent finish testing that out yet. I really need a boost for this hehe. Im really open to any possibilites 😛 Ill keep on searching and post my findings here. 

Thanks in advance! 😄

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄
Replies 14 (14)

Jurgen_Feuchter
Shopify Partner
229 1 40

Anyone? 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Mathews_Joseph
Tourist
11 0 1

You can use the Firebase to log in to your shop (Supports Facebook, Twitter, Google, Github and even custom login) and do the rest of the work in association to the token returned by the Firebase.

Jurgen_Feuchter
Shopify Partner
229 1 40

Right now Im having trouble with the return implementation. I can work out the facebook login instore which gives the users token and info needed to either create or login an existing user using their facebook info. Also I worked an endpoint which makes the multipass token for the url checking the information that would be sent from the facebook login (Wich is fully functional I tried it with my information and the multipass token works prefectly), but I havent found a way to connect them both. Since my endpoint is HTTP and my store is HTTPS. Is there a way to connect this two? Or any other way to work the multipass login token? Thanks for the suggestion though. 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Mathews_Joseph
Tourist
11 0 1

You can buy an SSL Certificate and install it on your server to make it HTTPS at a very low price.. (Even LetsEncrypt does that for free) and then connect it to your store, then it would work perfectly fine if your issue is the Http and Https conflict. Or else for easy implementation you can use firebase which will also return a token when the user is authenticated.

Jurgen_Feuchter
Shopify Partner
229 1 40

Yeah Im implementing the SSL Certificate now on my domain. The problem with FireBase is I would be using it as a middle service no? The token it returns is the token from the social site it got logged into right? There is no way for me to program it to send the multipass token? I would still need an own enpoint which gets the token from the FireBase service, saves the data and returns the multipass token. Hmm Since my endpoint already does this and I already installed the Facebook Login feature, Ill continue to use my endpoint. Thanks for the suggestion though Mathews. Ill keep a log here to tell how it went haha

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Jurgen_Feuchter
Shopify Partner
229 1 40

Im trying to implement the call though proxy call using the app I have installed in our store and the enpoint which grants the login. But I still get a 403 error. Here is the code:

$.ajax({
    method: "POST",
    url: "/apps/myapp/endpoint",
    data: response,
    dataType: 'jsonp',
    crossDomain: true,
  })
    .fail(function(XHR, status, error) {
      alert( "error" );
    })
    .done(function( msg ) {
      alert( "Data Saved: " + msg );
      
    });
});

Could anyone tell me what I might be calling wrong? Any error I have here? 😧 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Zac12
Shopify Partner
65 0 20

Are you using an App Proxy?

https://help.shopify.com/api/tutorials/application-proxies#proxy-request

I was under the impression it could only pass through GET requests, rather than POST. I may be wrong though.

The application Locksmith is using the app proxy at a pretty insane level (all the iFrames).

https://apps.shopify.com/locksmith

Zyber Developer | https://apps.shopify.com/trademe | https://apps.shopify.com/productfilter | https://apps.shopify.com/splittest

Jurgen_Feuchter
Shopify Partner
229 1 40

Hey Zac,

Thanks for the suggestions. I find it really wierd. Even with getJSON I get thrown a CORS exception! 😧 I really do not understand this anymore. I get the next error:

XMLHttpRequest cannot load {url}. Redirect from '{url}' to '{url}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{mystore_url}' is therefore not allowed access.

Im not sure why I get this error 😧 there is another call with the exact same syntax to another domain and that one works fine, but my call to my same domain gets a CORS error?  This is the code I used:

$.getJSON( 
  "url with all the data", function(data){
  console.log(data);
});

Any ideas what I might try ?

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Jurgen_Feuchter
Shopify Partner
229 1 40

Ok I seem to have solved this. Zac was right, or well I could not in any way call through the proxy using the POST method of my endpoint. At the end I decided to change it to GET and even then I could not connect I think cause of the redirecctions there are to getting to my endpoint cause the one giving the CORS error was my endpoint. At the end I changed the url endpoint to the direct one (without using the proxy) and I suppose since both are HTTPS there was no problem in connecting it using GET method. I added a few security messures for the call and now Im able to connect to my endpoint directly. Im one step closer to finishing the Facebook Login haha. Ill keep this thread posted and hope it helps someone 😛 If anyone could explain to me if its possible or not to call POST methods through Shopifys App Proxy?  

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄

Jurgen_Feuchter
Shopify Partner
229 1 40

YAY! 😄 I was able to fully integrate a Social Login solution for our website! I cant give out all the code, but Ill explain how I did it in case its any use for anyone else 😄

1. I use the code given in the Facebook Developer site to have the login. You can see it here: 

https://developers.facebook.com/docs/facebook-login/web

With this you can grab the information you need using this code:

 FB.api('/me',{fields: "id,age_range,picture,birthday,email,first_name,gender,hometown,location,middle_name,last_name,name"}, function(response) {});

It goes without saying that if you ask for all that information, youll have to add them to the permision list of the login. 

For all of this youll need a Facebook Developer Account and a Facebook App which you can create with your facebook account on: https://developers.facebook.com/

2. I made an endpoint on my API I use for my site where I send all the information of the user, if all the information is in place I check the information against the information given by the Facebook access token and if all goes well I store it on a data base and if the user is not allready register on our Shopify Store I simply create a user for them with the information from Facebook that I sent and the Shopify API. I add the Facebook access token that the FB login makes and see if the information being sent matches that one of the access token. If it matches I proceed to generating a Multipass code and send back the multipass in URL form. 

NOTE: I tried using Proxy calls but was unsuccesfull, maybe you will have better luck hehe. But I used an HTTPS endpoint and a GET AJAX call. 

I use the Multipass PHP code you can get HERE: https://help.shopify.com/api/reference/multipass It explains how the Multipass code works and how to use it. 

If you guys have any questions about the code I use or anything Ill be happy to help 😄 I had fun while doint this little add on for our site and I consider its not that hard if you know how to program in any lenguage supported by the API. Well Good luck people 😛 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! 😛

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com 😄
Abdullah565
Tourist
5 0 1

hi jurgen!
first of all thank you for providing solution with code.
I need your help for this functionality to embed in my shopify app. I'm new to this feature and don't know where to start and how to make my app ship with this feature.
Please guide me how can I embed this functionality in my shopify app. 
Waiting for your kind response.
Thanks  again.

harishshinde
Visitor
1 0 0

Hi,

Thanks for your detailed information. I have 1 question here, for social login eg. Facebook, google or any other I need multipass for integration. If I don't have multipass I cant do any social login integration. And multipass comes in Shopify Plus. 

Maria90
Visitor
2 0 1

Hello I'm new to shopify, can you send me your code to add in my store to get facebook login functionality?

AnhTien
Tourist
19 0 0

I don't