Créer un bouton Google Sign-In personnalisé

Pour créer un bouton de connexion Google avec des paramètres personnalisés, ajoutez un élément contenant le bouton de connexion à votre page de connexion, écrivez une fonction qui appelle signin2.render() avec vos paramètres de style et de champ d'application, puis incluez le script https://apis.google.com/js/platform.js avec la chaîne de requête onload=YOUR_RENDER_FUNCTION.

Voici un exemple de bouton Google Sign-In qui spécifie des paramètres de style personnalisés :

Le code HTML, JavaScript et CSS suivant génère le bouton ci-dessus:

<html>
<head>
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

Vous pouvez également spécifier des paramètres pour un bouton de connexion Google personnalisé en définissant des attributs data- sur un élément div avec la classe g-signin2. Exemple :

<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">

Créer un bouton avec un graphique personnalisé

Vous pouvez créer un bouton de connexion Google adapté à la conception de votre site. Vous devez respecter les consignes relatives à la marque et utiliser les couleurs et icônes appropriées dans votre bouton. Les consignes relatives à la marque fournissent également des éléments d'icône que vous pouvez utiliser pour concevoir votre bouton. Vous devez également vous assurer que votre bouton est aussi visible que les autres options de connexion tierces.

Voici un exemple de bouton Google Sign-In créé avec une image personnalisée :

Le code HTML, JavaScript et CSS suivant génère le bouton ci-dessus:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <script src="https://apis.google.com/js/api:client.js"></script>
  <script>
  var googleUser = {};
  var startApp = function() {
    gapi.load('auth2', function(){
      // Retrieve the singleton for the GoogleAuth library and set up the client.
      auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
      });
      attachSignin(document.getElementById('customBtn'));
    });
  };

  function attachSignin(element) {
    console.log(element.id);
    auth2.attachClickHandler(element, {},
        function(googleUser) {
          document.getElementById('name').innerText = "Signed in: " +
              googleUser.getBasicProfile().getName();
        }, function(error) {
          alert(JSON.stringify(error, undefined, 2));
        });
  }
  </script>
  <style type="text/css">
    #customBtn {
      display: inline-block;
      background: white;
      color: #444;
      width: 190px;
      border-radius: 5px;
      border: thin solid #888;
      box-shadow: 1px 1px 1px grey;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-family: serif;
      font-weight: normal;
    }
    span.icon {
      background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }
  </style>
  </head>
  <body>
  <!-- In the callback, you would hide the gSignInWrapper element on a
  successful sign in -->
  <div id="gSignInWrapper">
    <span class="label">Sign in with:</span>
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <span class="buttonText">Google</span>
    </div>
  </div>
  <div id="name"></div>
  <script>startApp();</script>
</body>
</html>