5

I setup my website to use google+signin.

For the login google provides a more or less nice, translated button to log in.

The code 

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

is expandet to :

enter image description here

To follow googles developer policies, the app must provide a way to delete the association between your app and the account. (From: google account logout and redirect)

The implemenatation is easy, but as far as I understood does Google not provide a (styled/desigend) disconnect button. Or did I miss it? It should look similar/like the login button.

Community
  • 1
  • 1
smartmeta
  • 1,149
  • 1
  • 17
  • 38

2 Answers2

4

To follow the policies, you have to provide a way for your user's to revoke your app's access to their information and account. This is different than logging out.

See how to provide that disconnection and revoking of access

After the user disconnects, then you would perform the clean up steps required by the terms.

Here is an example that uses jQuery from the documentation. It assumes that you stored your access token in the global variable access_token:

<script type="text/javascript">
function disconnectUser(access_token) {
  var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
      access_token;

  // Perform an asynchronous GET request.
  $.ajax({
    type: 'GET',
    url: revokeUrl,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(nullResponse) {
      // Do something now that user is disconnected

      // Start account clean up
    },
    error: function(e) {
      // Handle the error
      // console.log(e);
      // You could point users to manually disconnect if unsuccessful
      // https://plus.google.com/apps
    }
  });
}
// Could trigger the disconnect on a button click
$('#revokeButton').click(disconnectUser);
</script>
<button id="revokeButton">Disconnect</button>

Edit:

If you'd like resources to assist with customizing the look of a disconnect button to match up with the look of the sign-in button, you can use the resources that are provided on the Google+ Platform branding guidelines page. On that page, you can download PhotoShop source files that you can use to create a disconnect button for your site. You will need to follow the instructions on that page to comply with the branding guidelines.

How sites choose to offer a disconnect option is up to the designer. One site might prefer a disconnect link and another to use a button, the design is up to you.

BrettJ
  • 6,801
  • 1
  • 23
  • 26
  • 1
    Yes, you are right. My question was missleading. I want to have a button to 'disconnect'. I will update the question. Thanks BrettJ – smartmeta Feb 27 '13 at 17:57
  • Thanks BrettJ for showing the code. I have that already. As mentioned above it is about the design of the button. And when you try your example, you see that your revokeButton does NOT look like the login button. – smartmeta Feb 28 '13 at 06:56
  • Thanks for your link. Thats a first step, but not every developer who wants to use these buttons can edit .psd files. I gave my feedback to Google on the ' Google+ Platform branding guidelines' page. – smartmeta Mar 01 '13 at 16:07
  • You can use GIMP and many free editors to also open .PSD files. – BrettJ Mar 01 '13 at 16:50
  • So I guess there's not really a good solution for i18n on the Google+ SSO buttons then? They have to be rendered out as images? – Nathan Nov 07 '14 at 08:15
  • Localization is handled for you in the G+ Sign-In button if you use it stock. If you need to do something custom then you'll need to localize the text yourself. Android can load the localized strings directly from the resource files, but I don't think that's your situation here. – BrettJ Nov 07 '14 at 23:12
1

FYI even though their rules do say you must provide a way for a user to revoke access, it doesn't force you to make it easy for the user to do so. Most sites tend to tuck away the ability to disconnect in a user settings menu somewhere, keeping it as a text link. You really don't want users to disconnect and leave forever that easily.

If you're still bent on having the button though, have a look here for a CSS solution https://developers.google.com/+/web/signin/#customizing_the_sign-in_button

Customize as necessary. Good luck!

psychobunny
  • 1,247
  • 9
  • 16
  • The url for that page has changed: https://developers.google.com/+/web/signin/customize – FK- May 24 '15 at 18:41