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&q>uot<; type="text/css"
  script src="https:><//apis.>goo<gle.co>m/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(<).getNa>me(<);
        }, functio>n(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;
 <     f>ont<-weig>ht:< bol>d;
<      /* Use the Roboto font that is loaded in the head */
      font-family: 'Roboto&#>39;<, sans-serif;
    }
  />style<
  /head
  body
  >!-- In the ca<llbac>k, yo<u would hide the gSignInWrapper element on a>
  succ<essful sign in --><
  di>v id=&q<uot;gSignInWrapper">;
    <span >class<=&qu>ot;<labe>l&q<uot;Sign in w><ith:>/sp<an
   > div id=&qu<ot;cust>o<mBtn&>q<uot; >class="customGPlusSignIn"
      span class="icon"/span
      span class="buttonText"Google/span
    /div
  /div
  div id="name"/div
  scriptstartApp();/script
/body
/html