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ę który dzwoni signin2.render() z ustawieniami stylu i zakresu, i dołącz skrypt https://apis.google.com/js/platform.js z ciągiem zapytania onload=YOUR_RENDER_FUNCTION.

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

Ten kod HTML, JavaScript i CSS tworzy przycisk widoczny powyżej:

<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 również określić ustawienia niestandardowego przycisku logowania przez Google, definiując data- wskazuje element div o klasie 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ć wskazówek dotyczących marki i użyć odpowiednich kolorów oraz ikon na przycisku. Wytyczne dotyczące budowania marki udostępnij zasoby ikon, których możesz użyć do zaprojektowania przycisku. Musisz też Upewnij się, że przycisk jest tak widoczny, jak opcje logowania innych firm.

Poniżej znajdziesz przykład przycisku logowania do Google z grafiką niestandardową:

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>