How to add Social login services from Google, Facebook, Yahoo etc. to my website?

Question

I want to add the following buttons to my website for providing users with option to login using more services like Google, Facebook etc.

Please answer the following questions:

1. How can I add various services like this free of cost? (Please note that I do not want to use any paid service like Janrain and )
2. How can I store user information of the user (like email, phone no.) that are stored in the accounts to my database?
3. Please provide any links/libraries that can be used.

I appreciate any other information that you can provide.

Thank you!

Solution 1

You'll be using the APIs of the respective services (Google, Facebook, Twitter) or may be OpenID if you plan to add that as well. Some links:

http://code.google.com/apis/accounts/docs/OpenID.html

https://developers.facebook.com/docs/authentication/

http://dev.twitter.com/pages/auth

http://openid.net/add-openid/

Also take a look here. There are several similar questions already present on SO, check the related questions on the right.

Solution 2

for Google

Integrating Google Sign-In into your web app

Create a Google Developers Console project and client ID.

Load the Google Platform Library

You must include the Google Platform Library on your web pages that integrate Google Sign-In.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Specify your app's client ID

Specify the client ID you created for your app in the Google Developers Console with the google-signin-client_id meta element.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Note: You can also specify your app's client ID with the client_id parameter of the gapi.auth2.init() method.

Add a Google Sign-In button

The easiest way to add a Google Sign-In button to your site is to use an automatically rendered sign-in button. With only a few lines of code, you can add a button that automatically configures itself to have the appropriate text, logo, and colors for the sign-in state of the user and the scopes you request.

To create a Google Sign-In button that uses the default settings, add a div element with the class g-signin2 to your sign-in page:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Other Info. could be found here