आपके वेब ऐप्लिकेशन में 'Google साइन इन' को इंटिग्रेट करना

'Google साइन-इन', OAuth 2.0 फ़्लो और टोकन लाइफ़साइकल को मैनेज करता है. इससे, Google API के साथ आपके इंटिग्रेशन को आसान बनाने में मदद मिलती है. उपयोगकर्ता के पास हमेशा किसी भी समय ऐप्लिकेशन का ऐक्सेस निरस्त करने का विकल्प होता है.

इस दस्तावेज़ में, बुनियादी 'Google साइन इन' इंटिग्रेशन को पूरा करने का तरीका बताया गया है.

अनुमति देने वाले क्रेडेंशियल बनाएं

Google API को ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के पास ऐसे ऑथराइज़ेशन क्रेडेंशियल होने चाहिए, जिनसे Google के OAuth 2.0 सर्वर पर ऐप्लिकेशन की पहचान की जा सके. इन चरणों में, अपने प्रोजेक्ट के लिए क्रेडेंशियल बनाने का तरीका बताया गया है. इसके बाद आपके ऐप्लिकेशन उन एपीआई को ऐक्सेस करने के लिए क्रेडेंशियल का इस्तेमाल कर सकते हैं जिन्हें आपने उस प्रोजेक्ट के लिए चालू किया है.

  1. Go to the Credentials page.
  2. क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी पर क्लिक करें.
  3. वेब ऐप्लिकेशन ऐप्लिकेशन का टाइप चुनें.
  4. अपने OAuth 2.0 क्लाइंट को नाम दें और बनाएं पर क्लिक करें

कॉन्फ़िगरेशन पूरा होने के बाद, बनाए गए क्लाइंट आईडी पर ध्यान दें. अगले चरण पूरे करने के लिए, आपको क्लाइंट आईडी की ज़रूरत होगी. (एक क्लाइंट सीक्रेट भी बनाया जाता है, लेकिन आपको इसकी ज़रूरत सिर्फ़ सर्वर साइड की कार्रवाइयों के लिए होती है.)

Google प्लैटफ़ॉर्म लाइब्रेरी लोड करें

आपको अपने उन वेब पेजों पर Google प्लैटफ़ॉर्म लाइब्रेरी शामिल करनी होगी जो 'Google साइन-इन' को इंटिग्रेट करते हैं.

<script src="https://apis.google.com/js/platform.js" async defer></script>

अपने ऐप्लिकेशन का क्लाइंट आईडी बताना

google-signin-client_id मेटा एलिमेंट के साथ, Google Developers Console में अपने ऐप्लिकेशन के लिए बनाए गए क्लाइंट आईडी की जानकारी दें.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

'Google साइन इन' बटन जोड़ें

अपनी साइट पर 'Google साइन-इन' बटन जोड़ने का सबसे आसान तरीका है, अपने-आप रेंडर होने वाले 'साइन-इन' बटन का इस्तेमाल करना. कोड की सिर्फ़ कुछ लाइनों की मदद से, एक ऐसा बटन जोड़ा जा सकता है जो अपने-आप कॉन्फ़िगर होता है. इस बटन में, उपयोगकर्ता की साइन-इन स्थिति और आपके अनुरोध के दायरे के हिसाब से, सही टेक्स्ट, लोगो, और रंग होते हैं.

डिफ़ॉल्ट सेटिंग का इस्तेमाल करने वाला 'Google साइन-इन' बटन बनाने के लिए, अपने साइन इन पेज पर g-signin2 क्लास के साथ div एलिमेंट जोड़ें:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

प्रोफ़ाइल की जानकारी पाएं

डिफ़ॉल्ट स्कोप का इस्तेमाल करके, Google पर किसी उपयोगकर्ता के साइन इन करने के बाद, उस उपयोगकर्ता का Google आईडी, नाम, प्रोफ़ाइल का यूआरएल, और ईमेल पता ऐक्सेस किया जा सकता है.

किसी उपयोगकर्ता की प्रोफ़ाइल की जानकारी पाने के लिए, getBasicProfile() तरीके का इस्तेमाल करें.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

किसी उपयोगकर्ता को साइन आउट करना

Google से साइन आउट किए बिना, उपयोगकर्ताओं को अपने ऐप्लिकेशन से साइन आउट करने की सुविधा दी जा सकती है. ऐसा करने के लिए, 'साइन-आउट करें' बटन या अपनी साइट का लिंक जोड़ें. साइन-आउट करने का लिंक बनाने के लिए, लिंक के onclick इवेंट में वह फ़ंक्शन अटैच करें जो GoogleAuth.signOut() तरीके को कॉल करता है.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>