Tworzenie niestandardowego przycisku logowania przez Google

Aby utworzyć przycisk logowania przez Google z ustawieniami niestandardowymi, dodaj element zawierający przycisk logowania na stronie logowania, napisz funkcję wywołującą signin2.render() z ustawieniami stylu i zakresu oraz dodaj skrypt https://apis.google.com/js/platform.js z ciągiem zapytania onload=YOUR_RENDER_FUNCTION.

Oto przykład przycisku logowania przez Google, który określa niestandardowe parametry stylu:

Powyższy przycisk tworzy się za pomocą poniższego kodu HTML, JavaScript i CSS:

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

Możesz też określić ustawienia niestandardowego przycisku logowania przez Google, definiując atrybuty data- do elementu div z klasą g-signin2. Na przykład:

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

Tworzenie przycisku z niestandardową grafiką

Możesz utworzyć przycisk logowania Google dopasowany do wyglądu Twojej witryny. Musisz przestrzegać wytycznych dotyczących promowania marki oraz używać odpowiednich kolorów i ikon na przycisku. We wskazówkach dotyczących promowania marki znajdują się również zasoby ikon, których możesz użyć do zaprojektowania przycisku. Musisz też umieścić przycisk tak, aby był równie widoczny jak inne opcje logowania dostępne w przypadku innych firm.

Oto przykład przycisku logowania przez Google utworzonego z niestandardową grafiką:

Powyższy przycisk tworzy się za pomocą poniższego kodu HTML, JavaScript i CSS:

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