Crea un botón personalizado de Acceso con Google

Para crear un botón de Acceso con Google con una configuración personalizada, agrega un elemento que contenga el botón de acceso a tu página de acceso, escribe una función que llame a signin2.render() con tu configuración de estilo y alcance, e incluye la secuencia de comandos https://apis.google.com/js/platform.js con la cadena de consulta onload=YOUR_RENDER_FUNCTION.

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

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

<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 puedes especificar la configuración para un botón personalizado de Acceso con Google. Para ello, define atributos data- en un elemento div con la clase g-signin2. Por ejemplo:

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

Cómo compilar un botón con un elemento gráfico personalizado

Puedes compilar un botón de Acceso con Google para que se ajuste al diseño de tu sitio. Debes seguir los lineamientos de desarrollo de la marca y usar los colores y los íconos adecuados en el botón. Los lineamientos de desarrollo de la marca también proporcionan elementos de íconos que puedes usar para diseñar tu botón. También debes asegurarte de que el botón sea tan visible como las otras opciones de acceso de terceros.

A continuación, se muestra un ejemplo de un botón de Acceso con Google creado con un elemento gráfico personalizado:

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

<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