How do I implement ‘sign in with google’ on my site?

Solution 1:

If you plan to use OpenID, use that. Google is already an OpenID 2.0 provider.

Google's OpenID provider is located at: https://www.google.com/accounts/o8/ud

(NOTE: There's no point visiting that URI in your browser, but it does work for OpenID.)

This is primarily addressed on the Accounts API page, which also addresses OAuth and the hybrid and proprietary login systems. Depending on your site, you may also want to use Friend Connect, which is an OpenSocial container that internally uses OpenID for authentication.

I'm of course biased towards Friend Connect, since I'm the DPE for that project, but you're probably better served directly using the OpenID provider unless you're also doing stuff that involves a social graph.

Edit for 2012: You want to use OAuth 2.0 for login. GFC is being shut down.

Solution 2:

You may be interested in RPX which is an all-in-one solution that lets people choose which identity provider they would like to use to log in to your site. Not only are Google and OpenID supported, but many others as well.

RPX takes care of all the details of interfacing with each identity provider, and gives you a common API to work with.

Solution 3:

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

Other Possible Solution is

Using OAuth 2.0 to Access Google APIs

Auth Protocols

OAuth 2.0 Overview

OpenID Connect

OAuth 2.0 for Server-side Web Apps

OAuth 2.0 for JavaScript Web Apps

OAuth 2.0 for Mobile & Desktop Apps