Common techniques to integrate social media login to a website that requires account registration

Question

I have developed websites where users would register with a username of their choice and an entry would be created in a database table that holds their username and some sort of salted password. They would then use this account to interact with the services that the site provides.

Now I am interested in providing the ability to sign up an account using facebook, twitter, and basically anything else that might be popular. However, I don't know how to integrate the login workflow into my system.

I have read the docs for Facebook Login but am still not sure how I would integrate it with my user-account design.

This is how my own registration workflow works

1. Choose username/password
2. Create an entry in the "users" table
3. Authenticate by checking the username and see if the password matches

With facebook login, they would ideally simply click a button that says "login with facebook" and they would authenticate with their facebook credentials. However, I don't know where I would go about creating a user to associate with their facebook identity.

So my question is...

What is a common way to use facebook (or other social media such as twitter or linkedin) to register an account into the system? I would like to manage all users uniformly, so no matter how they choose to register an account, they would all be handled in a single users table where I could do queries and associations without having to worry about how the account was created or how they logged in.

Answer 1

Using server side Facebook api a typical workflow can be:

1. User click in "login with Facebook"
2. A popUp window with the Facebook login appears
3. The user put his Facebook username and password and click submit
4. You receive a callback from Facebook with a token.
5. With this token you go to Facebook auth service (https://graph.facebook.com/oauth/access_token with your concrete parameters), you receive and access_token.
6. with this access_token you can get the user information, user id in Facebook, username, email, picture, etc,etc.
7. With this information you can check if this user already exists in your system or create a new one if is the fist time.

This is the typical Oauth2 workflow, very confusing the first time you use it. The good thing is that other social networks like LinkedIn, Twitter or Google+ use a very similar approach based in Oauth (with some differences for example in the way you express the concrete permissions you want and some other details).

Another option its to use the Facebook js api to do the login, this option its explained in the Facebook docs: https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.1 (the option with FB.login() it's in my opinion easier and cleaner). The problem with this approach its that it's not very standard and each provider can have very different approaches. (and if you use a lot of login providers you need to load a lot of js libraries only for login).

Answer 2

If you use python for your server side, checkout Python Social Auth

This way you won't need to get into the complexities of OAuth. I have integrated it into my website, which uses the Django framework, without needing to write even a single line of additional code for social login.