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

On my site I would like to allow users to sign in with a google account. I plan to use openid but I would like to allow signing in with google because it has more benefits. I've noticed in the past a few sites that have the ability to sign in with a google (gmail) acco开发者_如何学编程unt and IIRC though they did NOT support openID (but I could be wrong).

How do I implement 'sign in with google'?

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.

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.

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

I believe what you're looking for is the Google Accounts API.

I think what you want is Google Friend Connect

edit: No you don't any more as it has been deprecated.

but I would like to allow signing in with Google

In this case, add the following code

HTML

 <div id="mySignin" onclick="login()"><img src="google_image_here.png" alt="google" style="cursor:pointer;height: 60px;width: 309px;"/></div>

JS

        <script type="text/javascript">
        function login() 
        {
          var myParams = {
            'clientid' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
            'cookiepolicy' : 'single_host_origin',
            'callback' : 'loginCallback',
            'approvalprompt':'force',
            'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
          };
          gapi.auth.signIn(myParams);
        }

        function loginCallback(result)
        {
            if(result['status']['signed_in'])
            {
                var request = gapi.client.plus.people.get(
                {
                    'userId': 'me'
                });
                request.execute(function (resp)
                {
                    /* console.log(resp);
                    console.log(resp['id']); */
                    var email = '';
                    if(resp['emails'])
                    {
                        for(i = 0; i < resp['emails'].length; i++)
                        {
                            if(resp['emails'][i]['type'] == 'account')
                            {
                                email = resp['emails'][i]['value'];//here is required email id
                            }
                        }
                    }
                   var usersname = resp['displayName'];//required name
                });
            }
        }
        function onLoadCallback()
        {
            gapi.client.setApiKey('YOUR_API_KEY');
            gapi.client.load('plus', 'v1',function(){});
        }

            </script>

        <script type="text/javascript">
              (function() {
               var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
               po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
             })();
        </script>

Google SignIn simple steps to integrate:

1. First go to this link(https://console.developers.google.com/)
2. Select a project from the dropdown available in the top left. If you are not creating a project yet.Please create a project

3. After creating a project click the OAuth consent screen and fill those details like the Application name and application logo. optional details like domain URL, redirect URL

4. Go to credentials and click create credentials dropdown & click Oauth client id. Fill the details in form

   

5. Note down the client Id and secret key for signIn API integration

6. For API integration, look at this. For react and angular applications so many NPM packages are avilable for easy configuration.

You can look into openId (http://openid.net/) which is what SO uses, and is supported by Google.