Migrate from Google+ Sign-In

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.

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
    }
    

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
    }
    

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
    }
    

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:

  • 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.

  • 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-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) -->
    <div class="g-signin2"
      data-scope="https://www.googleapis.com/auth/plus.login"
      data-clientid="YOUR_CLIENT_ID"
      data-accesstype="offline"
      data-onsuccess="onSignIn"
      data-onfailure="onSignInFailure">
    </div>
    

    Alternatively, you can use the gapi.auth2.grantOfflineAccess() method with your existing callback function:

    // Google Sign-in (new)
    auth2 = gapi.auth2.init({
      client_id: 'YOUR_CLIENT_ID',
      scope: 'https://www.googleapis.com/auth/plus.login'
    });
    
    ...
    
    auth2.grantOfflineAccess().then(signInCallback);