हम कर रहे हैं वेब के लिए Google साइन-इन जावास्क्रिप्ट मंच लाइब्रेरी बंद किए जा रहे । के लिए प्रमाणीकरण और उपयोगकर्ता साइन-इन, दोनों के लिए नए Google पहचान सेवाएं SDK का उपयोग वेब और एंड्रॉयड के बजाय।

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 डेवलपर कंसोल में अपने ऐप के लिए आपके द्वारा बनाई गई क्लाइंट आईडी को 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 साइन-इन बटन का एक उदाहरण है:

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

डिफ़ॉल्ट स्कोप का उपयोग करके Google के साथ उपयोगकर्ता में साइन इन करने के बाद, आप उपयोगकर्ता की Google ID, नाम, प्रोफ़ाइल URL और ईमेल पते पर पहुँच सकते हैं।

उपयोगकर्ता के लिए प्रोफ़ाइल जानकारी प्राप्त करने के लिए, 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>