Tworzenie niestandardowego przycisku logowania przez Google

Aby utworzyć przycisk logowania przez Google z ustawieniami niestandardowymi, dodaj do strony logowania element zawierający przycisk logowania, napisz funkcję, która wywołuje signin2.render() z Twoimi ustawieniami stylu i zakresu, oraz dołącz skrypt https://apis.google.com/js/platform.js z ciągiem zapytania onload=YOUR_RENDER_FUNCTION.

Poniżej znajdziesz przykład przycisku logowania przez Google, który określa niestandardowe parametry stylu:

Powyższy przycisk tworzy ten przycisk:

<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- elementu div klasy 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 przez Google tak, aby pasował do projektu Twojej witryny. Musisz przestrzegać wytycznych dotyczących marki i używać odpowiednich kolorów i ikon w przycisku. We wskazówkach dotyczących marki znajdują się również zasoby ikon, których możesz użyć do zaprojektowania przycisku. Upewnij się też, że Twój przycisk jest tak samo widoczny jak inne opcje logowania oferowane przez inne firmy.

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

Powyższy przycisk tworzy ten przycisk:

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