Özel bir Google ile Oturum Açma düğmesi oluşturma

Özel ayarlara sahip bir Google ile Oturum Açma düğmesi oluşturmak için oturum açma sayfanıza oturum açma düğmesini içeren bir öğe ekleyin, stil ve kapsam ayarlarınızla signin2.render() işlevini çağıran bir işlev yazın ve onload=YOUR_RENDER_FUNCTION sorgu dizesiyle https://apis.google.com/js/platform.js komut dosyasını dahil edin.

Aşağıda, özel stil parametrelerini belirten bir Google ile Oturum Açma düğmesi örneği verilmiştir:

Aşağıdaki HTML, JavaScript ve CSS kodu yukarıdaki düğmeyi oluşturur:

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

g-signin2 sınıfına sahip bir div öğesi için data- özellikleri tanımlayarak özel bir Google ile Oturum Açma düğmesi ayarlarını da belirtebilirsiniz. Örneğin:

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

Özel grafiğe sahip düğme oluşturma

Sitenizin tasarımına uygun bir Google ile Oturum Açma düğmesi oluşturabilirsiniz. Markalama kurallarına uymalı ve düğmenizde uygun renklerle simgeleri kullanmalısınız. Markalama kuralları, düğmenizi tasarlamak için kullanabileceğiniz simge öğeleri de sağlar. Ayrıca, düğmenizin diğer üçüncü taraf giriş seçenekleri kadar belirgin olduğundan emin olmanız gerekir.

Aşağıda, özel grafikle oluşturulmuş bir Google ile Oturum Açma düğmesi örneği verilmiştir:

Aşağıdaki HTML, JavaScript ve CSS kodu yukarıdaki düğmeyi oluşturur:

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