Ta strona została przetłumaczona przez Cloud Translation API.

Tworzenie niestandardowego przycisku logowania przez Google

Dostosowywanie automatycznie renderowanego przycisku logowania (zalecane)

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 w Google, definiując atrybuty data- dla 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 grafiką niestandardową

Możesz utworzyć przycisk Logowanie przez Google, który będzie pasował do projektu witryny. Musisz przestrzegać wskazówek dotyczących marki i użyć odpowiednich kolorów oraz ikon na przycisku. Wytyczne dotyczące marki zawierają też komponenty 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.

Poniżej znajdziesz przykład przycisku logowania się przez 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>