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