पसंद के मुताबिक 'Google साइन इन' बटन बनाना

पसंद के मुताबिक सेटिंग की मदद से 'Google साइन इन' बटन बनाने के लिए, अपने साइन इन पेज पर 'साइन इन करें' बटन को शामिल करने के लिए कोई एलिमेंट जोड़ें. ऐसा फ़ंक्शन लिखें जो स्टाइल और दायरे की सेटिंग के signin2.render() हो. साथ ही, क्वेरी स्ट्रिंग onload=YOUR_RENDER_FUNCTION के साथ https://apis.google.com/js/platform.js स्क्रिप्ट शामिल करें.

यहां Google साइन इन बटन का एक उदाहरण दिया गया है, जिसमें पसंद के मुताबिक स्टाइल के पैरामीटर तय किए गए हैं:

ऊपर दिया गया बटन, एचटीएमएल, JavaScript, और सीएसएस कोड से जनरेट होता है:

<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 क्लास वाले div एलिमेंट में data- एट्रिब्यूट तय करके, कस्टम 'Google साइन इन' बटन की सेटिंग भी तय की जा सकती है. उदाहरण के लिए:

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

कस्टम ग्राफ़िक के साथ बटन बनाना

अपनी साइट के डिज़ाइन के हिसाब से, 'Google साइन इन' बटन बनाया जा सकता है. आपको ब्रैंडिंग के दिशा-निर्देशों का पालन करना होगा और अपने बटन में सही रंगों और आइकॉन का इस्तेमाल करना होगा. ब्रैंडिंग के दिशा-निर्देशों में, आइकॉन ऐसेट भी दी गई हैं. इनका इस्तेमाल करके, बटन को डिज़ाइन किया जा सकता है. आपको यह भी पक्का करना होगा कि आपका बटन, तीसरे पक्ष के अन्य लॉगिन विकल्पों की तरह ही प्रमुखता से दिखता है.

यहां कस्टम ग्राफ़िक के साथ बनाए गए 'Google साइन-इन' बटन का उदाहरण दिया गया है:

नीचे दिया गया एचटीएमएल, JavaScript, और सीएसएस कोड, ऊपर दिया गया बटन बनाता है:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet&q>uot<; type="text/css"
  script src="https:><//apis.>goo<gle.co>m/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(<).getNa>me(<);
        }, functio>n(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;
 <     f>ont<-weig>ht:< bol>d;
<      /* Use the Roboto font that is loaded in the head */
      font-family: 'Roboto&#>39;<, sans-serif;
    }
  />style<
  /head
  body
  >!-- In the ca<llbac>k, yo<u would hide the gSignInWrapper element on a>
  succ<essful sign in --><
  di>v id=&q<uot;gSignInWrapper">;
    <span >class<=&qu>ot;<labe>l&q<uot;Sign in w><ith:>/sp<an
   > div id=&qu<ot;cust>o<mBtn&>q<uot; >class="customGPlusSignIn"
      span class="icon"/span
      span class="buttonText"Google/span
    /div
  /div
  div id="name"/div
  scriptstartApp();/script
/body
/html