Estamos interrumpiendo la Biblioteca de la plataforma de acceso de Google JavaScript para web . Para la autenticación y el usuario de inicio de sesión, utilice el nuevo Google SDK servicios de identidad, tanto para web y Android en su lugar.

Creación de un botón de inicio de sesión de Google personalizado

Para crear un botón de inicio de sesión de Google con configuraciones personalizadas, agregue un elemento que contenga el botón de inicio de sesión a su página de inicio de sesión, escriba una función que llame a signin2.render() con su estilo y configuración de alcance, e incluya https://apis.google.com/js/platform.js script con la cadena de consulta onload=YOUR_RENDER_FUNCTION .

El siguiente es un ejemplo de un botón de inicio de sesión de Google que especifica parámetros de estilo personalizados:

El siguiente código HTML, JavaScript y CSS produce el botón de arriba:

<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>

También puede especificar la configuración de un botón de inicio de sesión de Google personalizado definiendo atributos de data- para un elemento div con la clase g-signin2 . Por ejemplo:

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

Construyendo un botón con un gráfico personalizado

Puede crear un botón de inicio de sesión de Google que se adapte al diseño de su sitio. Debe seguir las pautas de marca y usar los colores e íconos apropiados en su botón. Las pautas de marca también brindan recursos de íconos que puede usar para diseñar su botón. También debe asegurarse de que su botón sea tan destacado como otras opciones de inicio de sesión de terceros.

El siguiente es un ejemplo de un botón de inicio de sesión de Google creado con un gráfico personalizado:

El siguiente código HTML, JavaScript y CSS produce el botón de arriba:

<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>