Créer un bouton Google Sign-In personnalisé

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Pour créer un bouton Google Sign-In avec des paramètres personnalisés, ajoutez un élément qui contiendra 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 spécifiant 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 Google Sign-In 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 une image personnalisée

Vous pouvez créer un bouton Google Sign-In adapté à l'apparence de votre site. Vous devez respecter les consignes relatives à la marque, et utiliser les couleurs et les 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 un graphique personnalisé :

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>