Where to get a google branded disonnect button?

Question

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 :

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.

Answer 1

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.