इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

एक कस्टम 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>

आप वर्ग g-signin2 साथ एक div तत्व के data- को परिभाषित करके एक कस्टम Google साइन-इन बटन के लिए सेटिंग्स भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए:

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

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

अपनी साइट के डिज़ाइन को फिट करने के लिए आप Google साइन-इन बटन का निर्माण कर सकते हैं। आपको ब्रांडिंग दिशानिर्देशों का पालन करना चाहिए और अपने बटन में उपयुक्त रंगों और आइकन का उपयोग करना चाहिए। ब्रांडिंग दिशानिर्देश आइकन संपत्ति भी प्रदान करते हैं जिनका उपयोग आप अपने बटन को डिजाइन करने के लिए कर सकते हैं। आपको यह भी सुनिश्चित करना चाहिए कि आपका बटन अन्य तृतीय-पक्ष लॉगिन विकल्पों के समान प्रमुख है।

निम्नलिखित Google साइन-इन बटन का एक उदाहरण है जो कस्टम ग्राफ़िक के साथ बनाया गया है:

निम्न HTML, जावास्क्रिप्ट और CSS कोड ऊपर दिए गए बटन का निर्माण करता है:

063927 डीबी 70