आपके वेब ऐप्लिकेशन में '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 Platform लाइब्रेरी को लोड करें

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

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

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

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

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

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

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

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

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

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

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

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