ساخت دکمه ورود به سیستم Google سفارشی

برای ایجاد یک دکمه ورود به سیستم Google با تنظیمات سفارشی، عنصری را به صفحه ورود به سیستم خود اضافه کنید که حاوی دکمه ورود باشد، تابعی بنویسید که signin2.render() را با تنظیمات سبک و محدوده شما فراخوانی کند و https://apis.google.com/js/platform.js را شامل شود. اسکریپت https://apis.google.com/js/platform.js با رشته جستجو onload=YOUR_RENDER_FUNCTION .

در زیر نمونه‌ای از دکمه ورود به سیستم Google است که پارامترهای سبک سفارشی را مشخص می‌کند:

کد HTML، جاوا اسکریپت و 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>

همچنین می‌توانید با تعریف ویژگی‌های data- برای یک عنصر div با کلاس g-signin2 ، تنظیمات یک دکمه ورود به سیستم سفارشی Google را مشخص کنید. به عنوان مثال: 

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

ساخت یک دکمه با یک گرافیک سفارشی

شما می توانید یک دکمه ورود به سیستم گوگل را متناسب با طراحی سایت خود بسازید. شما باید دستورالعمل های برندینگ را دنبال کنید و از رنگ ها و نمادهای مناسب در دکمه خود استفاده کنید. دستورالعمل های برندسازی همچنین دارایی های نمادی را ارائه می دهند که می توانید برای طراحی دکمه خود از آنها استفاده کنید. همچنین باید مطمئن شوید که دکمه شما به اندازه سایر گزینه های ورود شخص ثالث برجسته است.

نمونه زیر نمونه ای از دکمه ورود به سیستم گوگل است که با یک گرافیک سفارشی ساخته شده است:

کد HTML، جاوا اسکریپت و 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>