Migrate from Google+ Sign-In | Google Sign-In for Websites

The changes you must make to migrate your site from Google+ Sign-In to Google Sign-In depend on which Google+ Sign-In flow you use. Generally, the migration involves updating your sign in button, requested scopes and how to retrieve profile information from Google.

When updating your sign in button, do not refer to G+ or use the color red. Please conform to our updated branding guidelines.

Most G+ Sign In applications requested some combination of the scopes: plus.login, plus.me and plus.profile.emails.read. You will need to remap your scopes as follows:

Old scope	New scope
`plus.login`	`profile`
`plus.me`	`openid`
`plus.profile.emails.read`	`email`

Many implementers of Google+ Sign In used the code flow. This means the Android, iOS or Javascript apps obtain an OAuth code from Google and the client sends that code back to the server (with cross site request forgery protection). The server then validates the code and obtains refresh and access tokens to pull user profile information from the people.get API.

Google now recommends requesting an ID token and sending that ID token from your client to your server. ID tokens have cross site forgery protections built-in and also can be statically verified on your server, thus avoiding an extra API call to get user profile information from Google’s servers. Follow the instructions for validating ID tokens on your server.

If you would still prefer to use the code flow to obtain profile information, you may do so. Once your server has an access token, you will need to obtain user profile information from the userinfo endpoints specified in our Sign In Discovery document. The API response will be formatted differently than the Google+ profile response, so you will need to update your parsing to the new format.

Migrate an HTML sign-in button

If you included a Google+ Sign-In button in your page by assigning the class g-signin to an element, make the following changes:

When you specify your client ID, either in a <meta> tag, a data- attribute, or a parameters object, change the string clientid to client_id. For example:

<!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">

<!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

Assign the class g-signin2 to the sign-in button element instead of g-signin. Also, specify separate success and failure callbacks instead of a single callback. For example:

<!-- Google+ Sign-in (old) -->
<div
  class="g-signin"
  data-callback="signinCallback">
</div>

<!-- Google Sign-in (new) -->
<div
  class="g-signin2"
  data-onsuccess="onSignIn"
  data-onfailure="onSignInFailure">
</div>

Instead of a single callback handler, define success and failure handlers. For example:

// Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}

// Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

These changes will update your default scopes to profile email openid. You can get the user’s basic profile information, like name, email, and photo image URL as below:

// Google Sign-in (new)
function onSignIn(googleUser) {
  let profile = googleUser.getBasicProfile();
  let fullName = profile.getName();
  let email = profile.getEmail();
  let imageUrl = profile.getImageUrl();
}

Migrate a dynamically-rendered sign-in button

If you included a Google+ Sign-In button in your page by calling gapi.signin.render(), make the following changes:

When you specify your client ID, either in a <meta> tag, a data- attribute, or a parameters object, change the string clientid to client_id. For example:

<!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">

<!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

Render the sign-in button with gapi.signin2.render() rather than gapi.signin.render(). For example:

// Google+ Sign-in (old)
gapi.signin.render('myButton', additionalParams);

// Google Sign-in (new)
gapi.signin2.render('myButton', additionalParams);

Instead of a single callback handler, define success and failure handlers. For example:

// Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}

// Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

These changes will update your default scopes to profile email openid. You can get the user’s basic profile information by getBasicProfile() method.

Migrate a JavaScript-initiated sign-in flow

If you initiated the sign-in flow by calling gapi.auth.signIn() when users click the sign-in button, make the following changes:

When you specify your client ID, either in a <meta> tag, a data- attribute, or a parameters object, change the string clientid to client_id. For example:

<!-- Google+ Sign-in (old) -->
<meta name="google-signin-clientid" content="YOUR_CLIENT_ID">

<!-- Google Sign-in (new) -->
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

Use gapi.auth2.attachClickHandler() to start the sign-in flow when a button is pressed. For example:

// Google+ Sign-in (old)
var signinButton = document.getElementById('signinButton');
signinButton.addEventListener('click', function() {
  gapi.auth.signIn(additionalParams);
});

// Google Sign-in (new)
auth2 = gapi.auth2.init();
auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);

Instead of a single callback handler, define success and failure handlers. For example:

// Google+ Sign-in (old)
function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Handle successful sign-in
  } else {
    // Handle sign-in errors
    console.log('Sign-in error: ' + authResult['error']);
  }
}

// Google Sign-in (new)
function onSignIn(googleUser) {
  // Handle successful sign-in
}
function onSignInFailure() {
  // Handle sign-in errors
}

These changes will update your default scopes to profile email openid. You can get the user’s basic profile information by getBasicProfile() method.

Migrate a hybrid server-side flow

If you used the JavaScript API to acquire a one-time authorization code for you to pass to your server, make the following changes:

Change the scope from https://www.googleapis.com/auth/plus.login to profile.

Use the gapi.auth2.grantOfflineAccess() method with your existing callback function. For example:

<!-- Google+ Sign-in (old) -->
<div class="g-signin"
  data-scope="https://www.googleapis.com/auth/plus.login"
  data-clientid="YOUR_CLIENT_ID"
  data-redirecturi="postmessage"
  data-accesstype="offline"
  data-callback="signInCallback">
</div>

// Google Sign-in (new)
auth2 = gapi.auth2.init({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'profile'
});

...

auth2.grantOfflineAccess().then(signInCallback);

If you also need access to the user’s email, add email to the scope parameter.