खास जानकारी
Google API को कॉल करने के लिए, हर उपयोगकर्ता का ऐक्सेस टोकन पाने के लिए, Google कई JavaScript लाइब्रेरी उपलब्ध कराता है:
इस गाइड में इन लाइब्रेरी से Google Identity Services की लाइब्रेरी में माइग्रेट करने के निर्देश दिए गए हैं.
इस गाइड की मदद से, ये काम किए जा सकते हैं:
- अब काम न करने वाली प्लैटफ़ॉर्म लाइब्रेरी को Identity Services लाइब्रेरी से बदलें और
- अगर API क्लाइंट लाइब्रेरी का इस्तेमाल किया जा रहा है, तो इस्तेमाल में न होने वाले
gapi.auth2मॉड्यूल, उसके तरीकों, और ऑब्जेक्ट को हटाएं. साथ ही, उन्हें Identity Services के मिलते-जुलते मॉड्यूल से बदलें.
पहचान सेवाओं की JavaScript लाइब्रेरी में क्या बदलाव हुए हैं, इसकी जानकारी के लिए खास जानकारी और उपयोगकर्ता की अनुमति के काम करने का तरीका पढ़ें. इससे ज़रूरी शर्तों और सिद्धांतों को देखा जा सकता है.
अगर आपको उपयोगकर्ता के साइन अप और साइन इन करने के लिए पुष्टि करने की सुविधा चाहिए, तो 'Google साइन-इन' से डेटा दूसरी जगह भेजना लेख पढ़ें.
अनुमति देने के तरीके की पहचान करना
उपयोगकर्ता की अनुमति के लिए, दो तरह के फ़्लो उपलब्ध हैं: इंप्लिसिट और ऑथराइज़ेशन कोड.
अनुमति देने के लिए फ़िलहाल किस तरह के फ़्लो का इस्तेमाल किया जा रहा है, यह जानने के लिए अपने वेब ऐप्लिकेशन की समीक्षा करें.
आपका वेब ऐप्लिकेशन इंप्लिसिट फ़्लो का इस्तेमाल कर रहा है, इसकी जानकारी देने वाले संकेत:
- आपका वेब ऐप्लिकेशन पूरी तरह से ब्राउज़र पर आधारित है और कोई बैकएंड प्लैटफ़ॉर्म नहीं है.
- यह ज़रूरी है कि Google API को कॉल करने के लिए, उपयोगकर्ता मौजूद हो. आपका ऐप्लिकेशन सिर्फ़ ऐक्सेस टोकन का इस्तेमाल करता है और उसे रीफ़्रेश टोकन की ज़रूरत नहीं होती.
- आपका वेब ऐप्लिकेशन
apis.google.com/js/api.jsलोड करता है. - आपने क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0 का इस्तेमाल किया है.
- आपका ऐप्लिकेशन, JavaScript के लिए Google API क्लाइंट लाइब्रेरी में मौजूद
gapi.clientयाgapi.auth2मॉड्यूल में से किसी एक का इस्तेमाल करता है.
आपका वेब ऐप्लिकेशन ऑथराइज़ेशन कोड फ़्लो का इस्तेमाल कर रहा है, इसकी जानकारी देने वाले संकेत:
आपके लिए यह सुविधा इन बातों पर निर्भर करती है:
आपका ऐप्लिकेशन, उपयोगकर्ता के ब्राउज़र और आपके बैकएंड प्लैटफ़ॉर्म, दोनों पर काम करता है.
आपका बैकएंड प्लैटफ़ॉर्म, ऑथराइज़ेशन कोड एंडपॉइंट होस्ट करता है.
आपका बैकएंड प्लैटफ़ॉर्म, उपयोगकर्ताओं की ओर से Google API को कॉल करता है. इसके लिए, उपयोगकर्ताओं को मौजूद रहने की ज़रूरत नहीं होती. इसे ऑफ़लाइन मोड भी कहा जाता है.
रीफ़्रेश टोकन, आपके बैकएंड प्लैटफ़ॉर्म में मैनेज और सेव किए जाते हैं.
कुछ मामलों में, आपका कोडबेस दोनों फ़्लो के साथ काम कर सकता है.
अनुमति का फ़्लो चुनना
माइग्रेशन शुरू करने से पहले, आपको यह तय करना होगा कि मौजूदा फ़्लो को जारी रखना है या किसी दूसरे फ़्लो को अपनाना है.
दोनों फ़्लो के बीच के मुख्य अंतर और फ़ायदों को समझने के लिए, अनुमति फ़्लो चुनना लेख पढ़ें.
ज़्यादातर मामलों में, ऑथराइज़ेशन कोड फ़्लो का सुझाव दिया जाता है, क्योंकि यह उपयोगकर्ता को सबसे ज़्यादा सुरक्षा देता है. इस फ़्लो को लागू करने से, आपके प्लैटफ़ॉर्म में नई ऑफ़लाइन सुविधाएं आसानी से जोड़ी जा सकती हैं. जैसे, उपयोगकर्ताओं को उनके कैलेंडर, फ़ोटो, सदस्यताओं वगैरह में हुए अहम बदलावों की सूचना देने के लिए अपडेट फ़ेच करना.
नीचे दिए गए सिलेक्टर का इस्तेमाल करके, अनुमति फ़्लो चुनें.
इंप्लिसिट फ़्लो
उपयोगकर्ता के मौजूद होने पर, ब्राउज़र में इस्तेमाल करने के लिए ऐक्सेस टोकन पाएं.
इंप्लिसिट फ़्लो के उदाहरण, Identity Services पर माइग्रेट करने से पहले और बाद के वेब ऐप्लिकेशन दिखाते हैं.
ऑथराइज़ेशन कोड का फ़्लो
Google, हर उपयोगकर्ता के लिए एक ऑथराइज़ेशन कोड जारी करता है. यह कोड आपके बैकएंड प्लैटफ़ॉर्म पर डिलीवर किया जाता है. इसके बाद, इसे ऐक्सेस टोकन और रीफ़्रेश टोकन से बदल दिया जाता है.
ऑथराइज़ेशन कोड फ़्लो के उदाहरण में, पहचान की पुष्टि करने वाली सेवाओं पर माइग्रेट करने से पहले और बाद के वेब ऐप्लिकेशन दिखाए गए हैं.
इस गाइड में, मौजूदा फ़ंक्शन को जोड़ने, हटाने, अपडेट करने या बदलने के लिए, बोल्ड किए गए निर्देशों का पालन करें.
ब्राउज़र में काम करने वाले आपके वेब ऐप्लिकेशन में होने वाले बदलाव
इस सेक्शन में, Google Identity Services JavaScript लाइब्रेरी पर माइग्रेट करते समय, ब्राउज़र में काम करने वाले वेब ऐप्लिकेशन में किए जाने वाले बदलावों की समीक्षा की जाती है.
जिस कोड पर असर पड़ा है उसकी पहचान करना और उसकी जांच करना
डीबग कुकी की मदद से, उस कोड का पता लगाया जा सकता है जिस पर असर पड़ा है. साथ ही, बंद होने के बाद के व्यवहार की जांच की जा सकती है.
बड़े या जटिल ऐप्लिकेशन में, gapi.auth2 मॉड्यूल के बंद होने की वजह से जिन सभी कोड पर असर पड़ा है उन्हें ढूंढना मुश्किल हो सकता है. जल्द ही बंद होने वाली सुविधा के मौजूदा इस्तेमाल को Console में लॉग करने के लिए, G_AUTH2_MIGRATION कुकी की वैल्यू को informational पर सेट करें. इसके अलावा, सेशन स्टोरेज में भी लॉग करने के लिए, कोलन के बाद कोई मुख्य वैल्यू जोड़ें. साइन इन करने और क्रेडेंशियल मिलने के बाद, बाद में विश्लेषण के लिए इकट्ठा किए गए लॉग को बैकएंड पर भेजें या उनकी समीक्षा करें. उदाहरण के लिए, informational:showauth2use, ऑरिजिन और यूआरएल को showauth2use नाम की सेशन स्टोरेज कुंजी में सेव करता है.
gapi.auth2 मॉड्यूल लोड न होने पर, ऐप्लिकेशन के व्यवहार की पुष्टि करने के लिए, G_AUTH2_MIGRATION कुकी की वैल्यू को enforced पर सेट करें. इससे, लागू होने की तारीख से पहले, बंद होने के बाद के व्यवहार की जांच की जा सकती है.
G_AUTH2_MIGRATION कुकी की संभावित वैल्यू:
enforcedgapi.auth2मॉड्यूल लोड न करें.informationalJS कंसोल में, बंद हो चुकी सुविधा के इस्तेमाल को लॉग करें. अगर कोई वैकल्पिक पासकोड सेट किया गया है, तो सेशन स्टोरेज में भी लॉग करें:informational:key-name.
उपयोगकर्ता पर पड़ने वाले असर को कम करने के लिए, यह सुझाव दिया जाता है कि आप इस कुकी को प्रोडक्शन एनवायरमेंट में इस्तेमाल करने से पहले, डेवलपमेंट और जांच के दौरान स्थानीय तौर पर सेट करें.
लाइब्रेरी और मॉड्यूल
gapi.auth2 मॉड्यूल, साइन-इन के लिए उपयोगकर्ता की पुष्टि करने और अनुमति देने के इंप्लिसिट फ़्लो को मैनेज करता है. साथ ही, यह काम न करने वाले इस मॉड्यूल और इसके ऑब्जेक्ट और तरीकों को Google Identity Services की लाइब्रेरी से बदलता है.
अपने दस्तावेज़ में Identity Services लाइब्रेरी को शामिल करके, उसे अपने वेब ऐप्लिकेशन में जोड़ें:
<script src="https://accounts.google.com/gsi/client" async defer></script>
gapi.load('auth2',
function) का इस्तेमाल करके, auth2 मॉड्यूल को लोड करने के सभी इंस्टेंस हटाएं.
Google Identity Services लाइब्रेरी, gapi.auth2 मॉड्यूल के इस्तेमाल की जगह ले लेती है.
JavaScript के लिए Google API क्लाइंट लाइब्रेरी के gapi.client मॉड्यूल का इस्तेमाल सुरक्षित तरीके से जारी रखा जा सकता है. साथ ही, डिस्कवरी दस्तावेज़ से कॉल किए जा सकने वाले JS तरीकों के अपने-आप बनने, एक से ज़्यादा एपीआई कॉल को एक साथ करने, और सीओआरएस मैनेजमेंट की सुविधा का फ़ायदा भी लिया जा सकता है.
कुकी
उपयोगकर्ता की अनुमति लेने के लिए, कुकी का इस्तेमाल करना ज़रूरी नहीं है.
उपयोगकर्ता की पुष्टि करने के लिए कुकी का इस्तेमाल कैसे किया जाता है, इस बारे में जानने के लिए Google Sign-In से माइग्रेट करना लेख पढ़ें. साथ ही, Google के अन्य प्रॉडक्ट और सेवाओं में कुकी के इस्तेमाल के लिए, Google कुकी का इस्तेमाल कैसे करता है लेख पढ़ें.
क्रेडेंशियल
Google Identity Services, उपयोगकर्ता की पुष्टि करने और अनुमति देने की प्रोसेस को दो अलग-अलग ऑपरेशन में बांटता है. साथ ही, उपयोगकर्ता के क्रेडेंशियल भी अलग-अलग होते हैं: किसी उपयोगकर्ता की पहचान करने के लिए इस्तेमाल किया जाने वाला आईडी टोकन, अनुमति देने के लिए इस्तेमाल किए जाने वाले ऐक्सेस टोकन से अलग होता है.
इन बदलावों को देखने के लिए, क्रेडेंशियल के उदाहरण देखें.
इंप्लिसिट फ़्लो
अनुमति देने की प्रोसेस से उपयोगकर्ता प्रोफ़ाइल मैनेज करने की सुविधा हटाकर, उपयोगकर्ता की पुष्टि और अनुमति देने की प्रोसेस को अलग करें.
इन Google साइन इन JavaScript क्लाइंट रेफ़रंस को हटाएं:
तरीके
GoogleUser.getBasicProfile()GoogleUser.getId()
ऑथराइज़ेशन कोड का फ़्लो
Identity Services, ब्राउज़र में मौजूद क्रेडेंशियल को आईडी टोकन और ऐक्सेस टोकन में बांटता है. यह बदलाव, आपके बैकएंड प्लैटफ़ॉर्म से Google OAuth 2.0 एंडपॉइंट को सीधे कॉल करने या आपके प्लैटफ़ॉर्म पर सुरक्षित सर्वर पर चलने वाली लाइब्रेरी से मिले क्रेडेंशियल पर लागू नहीं होता. जैसे, Google API Node.js क्लाइंट.
सेशन की स्थिति
पहले, Google Sign-In की मदद से, उपयोगकर्ता के साइन इन स्टेटस को मैनेज करने के लिए, इनका इस्तेमाल किया जाता था:
- उपयोगकर्ता के सेशन की स्थिति को मॉनिटर करने के लिए कॉलबैक हैंडलर.
- उपयोगकर्ता के Google खाते के लिए, साइन इन किए जाने की स्थिति में हुए बदलावों और इवेंट के लिसनर.
अपने वेब ऐप्लिकेशन के लिए, साइन इन की स्थिति और उपयोगकर्ता सेशन को मैनेज करने की ज़िम्मेदारी आपकी है.
इन Google साइन इन JavaScript क्लाइंट रेफ़रंस को हटाएं:
ऑब्जेक्ट:
gapi.auth2.SignInOptions
तरीके:
GoogleAuth.attachClickHandler()GoogleAuth.isSignedIn()GoogleAuth.isSignedIn.get()GoogleAuth.isSignedIn.listen()GoogleAuth.signIn()GoogleAuth.signOut()GoogleAuth.currentUser.get()GoogleAuth.currentUser.listen()GoogleUser.isSignedIn()
क्लाइंट कॉन्फ़िगरेशन
अपने वेब ऐप्लिकेशन को अपडेट करें, ताकि अनुमति कोड के फ़्लो या डिफ़ॉल्ट रूप से लागू होने वाले फ़्लो के लिए, टोकन क्लाइंट को शुरू किया जा सके.
इन Google साइन इन JavaScript क्लाइंट रेफ़रंस को हटाएं:
ऑब्जेक्ट:
gapi.auth2.ClientConfiggapi.auth2.OfflineAccessOptions
तरीके:
gapi.auth2.getAuthInstance()GoogleUser.grant()
इंप्लिसिट फ़्लो
टोकन क्लाइंट को शुरू करने के उदाहरण के मुताबिक, अपने वेब ऐप्लिकेशन को कॉन्फ़िगर करने के लिए, TokenClientConfig ऑब्जेक्ट और initTokenClient() कॉल जोड़ें.
Google साइन-इन JavaScript क्लाइंट रेफ़रंस को Google Identity Services से बदलें:
ऑब्जेक्ट:
TokenClientConfigके साथgapi.auth2.AuthorizeConfig
तरीके:
google.accounts.oauth2.initTokenClient()के साथgapi.auth2.init()
पैरामीटर:
gapi.auth2.AuthorizeConfig.login_hintमेंTokenClientConfig.login_hint.gapi.auth2.GoogleUser.getHostedDomain()मेंTokenClientConfig.hd.
ऑथराइज़ेशन कोड का फ़्लो
कोड क्लाइंट को शुरू करने के उदाहरण के मुताबिक, अपने वेब ऐप्लिकेशन को कॉन्फ़िगर करने के लिए, CodeClientConfig ऑब्जेक्ट और initCodeClient() कॉल जोड़ें.
इंप्लिसिट से ऑथराइज़ेशन कोड फ़्लो पर स्विच करते समय:
Google साइन-इन के JavaScript क्लाइंट के रेफ़रंस हटाएं
ऑब्जेक्ट:
gapi.auth2.AuthorizeConfig
तरीके:
gapi.auth2.init()
पैरामीटर:
gapi.auth2.AuthorizeConfig.login_hintgapi.auth2.GoogleUser.getHostedDomain()
टोकन का अनुरोध
बटन पर क्लिक करने जैसा, उपयोगकर्ता का जेस्चर ऐसा अनुरोध जनरेट करता है जिससे ऐक्सेस टोकन, इंप्लिसिट फ़्लो के साथ सीधे उपयोगकर्ता के ब्राउज़र पर वापस लौटा दिया जाता है. इसके अलावा, ऐक्सेस टोकन और रीफ़्रेश टोकन के लिए हर उपयोगकर्ता के ऑथराइज़ेशन कोड को एक्सचेंज करने के बाद, आपके बैकएंड प्लैटफ़ॉर्म पर भी ऐक्सेस टोकन वापस भेजा जाता है.
इंप्लिसिट फ़्लो
पाएं.जब उपयोगकर्ता ने Google में साइन इन किया हो और उसका सेशन चालू हो, तब ब्राउज़र में ऐक्सेस टोकन पाए और इस्तेमाल किए जा सकते हैं. इंप्लिसिट मोड के लिए, ऐक्सेस टोकन का अनुरोध करने के लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती है. भले ही, पहले कोई अनुरोध किया गया हो.
'Google साइन इन' JavaScript क्लाइंट के रेफ़रंस बदलें: Google Identity Services से:
तरीके:
TokenClient.requestAccessToken()के साथgapi.auth2.authorize()TokenClient.requestAccessToken()के साथGoogleUser.reloadAuthResponse()
requestAccessToken() को कॉल करने के लिए, कोई लिंक या बटन जोड़ें. इससे, ऐक्सेस टोकन का अनुरोध करने के लिए पॉप-अप यूज़र एक्सपीरियंस (यूएक्स) फ़्लो शुरू किया जा सकता है. इसके अलावा, मौजूदा टोकन की समयसीमा खत्म होने पर नया टोकन भी पाया जा सकता है.
अपने कोडबेस को अपडेट करके:
requestAccessToken()के साथ, OAuth 2.0 टोकन फ़्लो ट्रिगर करें.requestAccessTokenऔरOverridableTokenClientConfigका इस्तेमाल करके, कई स्कोप के लिए एक अनुरोध को कई छोटे अनुरोधों में बांटें. इससे, अनुमति को धीरे-धीरे बढ़ाने में मदद मिलती है.- मौजूदा टोकन की समयसीमा खत्म होने या उसे रद्द किए जाने पर, नए टोकन का अनुरोध करें.
एक से ज़्यादा स्कोप के साथ काम करने के लिए, हो सकता है कि आपको अपने कोडबेस के स्ट्रक्चर में बदलाव करने पड़ें. ऐसा इसलिए, ताकि एक साथ सभी स्कोप के ऐक्सेस का अनुरोध करने के बजाय, सिर्फ़ ज़रूरत के हिसाब से स्कोप के ऐक्सेस का अनुरोध किया जा सके. इसे इंक्रीमेंटल अनुमति कहा जाता है. हर अनुरोध में कम से कम स्कोप होने चाहिए. बेहतर होगा कि एक ही स्कोप हो. ऐप्लिकेशन को ज़्यादा अनुमति देने के लिए अपडेट करने के तरीके के बारे में ज़्यादा जानने के लिए, उपयोगकर्ता की सहमति मैनेज करने का तरीका देखें.
ऐक्सेस टोकन की समयसीमा खत्म होने पर, gapi.auth2 मॉड्यूल को आपके वेब ऐप्लिकेशन के लिए अपने-आप एक नया और मान्य ऐक्सेस टोकन मिल जाता है. उपयोगकर्ता की बेहतर सुरक्षा के लिए, अपने-आप टोकन रीफ़्रेश होने की यह प्रोसेस, Google Identity Services लाइब्रेरी पर काम नहीं करती है. एक्सेस टोकन की समयसीमा खत्म होने का पता लगाने और नए टोकन का अनुरोध करने के लिए, आपके वेब ऐप्लिकेशन को अपडेट करना ज़रूरी है. ज़्यादा जानकारी के लिए, यहां दिया गया टोकन हैंडलिंग सेक्शन देखें.
ऑथराइज़ेशन कोड का फ़्लो
Google से ऑथराइज़ेशन कोड का अनुरोध करने के लिए, requestCode() को कॉल करने के लिए लिंक या बटन जोड़ें. उदाहरण के लिए, OAuth 2.0 कोड फ़्लो को ट्रिगर करना देखें.
किसी खत्म या रद्द किए गए ऐक्सेस टोकन का जवाब देने के तरीके के बारे में ज़्यादा जानने के लिए, नीचे दिया गया टोकन हैंडलिंग सेक्शन देखें.
टोकन हैंडल करना
गड़बड़ी को मैनेज करने की सुविधा जोड़ें, ताकि समयसीमा खत्म हो चुके या रद्द किए गए ऐक्सेस टोकन का इस्तेमाल करने पर, Google API कॉल के पूरा न होने का पता लगाया जा सके. साथ ही, नए और मान्य ऐक्सेस टोकन का अनुरोध किया जा सके.
जब किसी ऐक्सेस टोकन की समयसीमा खत्म हो चुकी है या जिसे रद्द कर दिया गया है, तब Google API, 401 Unauthorized और invalid_token गड़बड़ी के मैसेज का एचटीटीपी स्टेटस कोड दिखाता है. उदाहरण के लिए, अमान्य टोकन रिस्पॉन्स देखें.
ऐसे टोकन जिनकी समयसीमा खत्म हो चुकी है
ऐक्सेस टोकन कम समय के लिए काम करते हैं और आम तौर पर सिर्फ़ कुछ मिनट के लिए मान्य होते हैं.
टोकन रद्द करना
Google खाते का मालिक, पहले दी गई सहमति को किसी भी समय वापस ले सकता है. ऐसा करने से मौजूदा ऐक्सेस टोकन और रीफ़्रेश टोकन अमान्य हो जाएंगे. अनुमति को वापस लेने की प्रोसेस, revoke() का इस्तेमाल करके आपके प्लैटफ़ॉर्म से या Google खाते से शुरू की जा सकती है.
'Google साइन इन' JavaScript क्लाइंट के रेफ़रंस बदलें: Google Identity Services से:
तरीके:
google.accounts.oauth2.revoke()के साथgetAuthInstance().disconnect()google.accounts.oauth2.revoke()के साथGoogleUser.disconnect()
जब कोई उपयोगकर्ता आपके प्लैटफ़ॉर्म से अपना खाता मिटाता है या आपके ऐप्लिकेशन के साथ डेटा शेयर करने की सहमति हटाना चाहता है, तो revoke को कॉल करें.
उपयोगकर्ता की सहमति का अनुरोध
जब आपका वेब ऐप्लिकेशन या बैकएंड प्लैटफ़ॉर्म, उपयोगकर्ता को ऐक्सेस टोकन के लिए अनुरोध करता है, तब Google, उपयोगकर्ता को सहमति वाला डायलॉग दिखाता है. Google के दिखाए गए सहमति वाले डायलॉग के उदाहरण देखें.
आपके ऐप्लिकेशन को ऐक्सेस टोकन जारी करने से पहले, उपयोगकर्ता की सहमति लेने और नतीजे को रिकॉर्ड करने के लिए, Google का मौजूदा और चालू सेशन ज़रूरी है. अगर कोई मौजूदा सेशन पहले से शुरू नहीं हुआ है, तो हो सकता है कि उपयोगकर्ता को Google खाते में साइन-इन करना पड़े.
उपयोगकर्ता का साइन इन
हो सकता है कि उपयोगकर्ताओं ने किसी अलग ब्राउज़र टैब में Google खाते में साइन इन किया हो या ब्राउज़र या ऑपरेटिंग सिस्टम के ज़रिए नेटिव तरीके से साइन इन किया हो. हमारा सुझाव है कि आप अपनी साइट पर Google से साइन इन करें विकल्प जोड़ें. इससे, जब कोई उपयोगकर्ता पहली बार आपका ऐप्लिकेशन खोलेगा, तो Google खाते और ब्राउज़र के बीच एक चालू सेशन बन जाएगा. ऐसा करने से ये फ़ायदे मिलते हैं:
- इससे उपयोगकर्ता को साइन इन करने की संख्या कम हो जाती है. अगर कोई चालू सेशन पहले से मौजूद नहीं है, तो ऐक्सेस टोकन का अनुरोध करने पर, Google खाते में साइन इन करने की प्रोसेस शुरू हो जाती है.
CodeClientConfigयाTokenClientConfigऑब्जेक्ट मेंlogin_hintपैरामीटर की वैल्यू के तौर पर, JWT आईडी टोकन क्रेडेंशियलemailफ़ील्ड का इस्तेमाल करें. यह खास तौर पर तब मददगार होता है, जब आपके प्लैटफ़ॉर्म पर उपयोगकर्ता खाता मैनेज करने का कोई सिस्टम न हो.- अपने प्लैटफ़ॉर्म पर, किसी मौजूदा स्थानीय उपयोगकर्ता खाते को खोजें और उससे जोड़ें. इससे आपके प्लैटफ़ॉर्म पर डुप्लीकेट खातों को कम करने में मदद मिलती है.
- नया स्थानीय खाता बनाने पर, साइन-अप डायलॉग और फ़्लो को उपयोगकर्ता की पुष्टि करने वाले डायलॉग और फ़्लो से अलग किया जा सकता है. इससे, ज़रूरी चरणों की संख्या कम हो जाती है और ड्रॉप-ऑफ़ रेट बेहतर होता है.
साइन इन करने के बाद और ऐक्सेस टोकन जारी होने से पहले, उपयोगकर्ताओं को आपके ऐप्लिकेशन के लिए, अनुरोध किए गए स्कोप की सहमति देनी होगी.
टोकन और सहमति का रिस्पॉन्स
सहमति मिलने के बाद, उपयोगकर्ता के अनुमति दिए गए या अस्वीकार किए गए स्कोप की सूची के साथ ऐक्सेस टोकन दिया जाता है.
ज़्यादा जानकारी वाली अनुमतियों की मदद से, उपयोगकर्ता अलग-अलग स्कोप को स्वीकार या अस्वीकार कर सकते हैं. एक से ज़्यादा स्कोप का ऐक्सेस पाने का अनुरोध करने पर, हर स्कोप को अन्य स्कोप से अलग स्वीकार या अस्वीकार किया जाता है. उपयोगकर्ता की पसंद के आधार पर, आपका ऐप्लिकेशन चुनिंदा सुविधाओं और फ़ंक्शन को चालू करता है. ये सुविधाएं और फ़ंक्शन, ऐप्लिकेशन के दायरे पर निर्भर करते हैं.
इंप्लिसिट फ़्लो
Google साइन-इन के JavaScript क्लाइंट रेफ़रंस को Google Identity Services से बदलें:
ऑब्जेक्ट:
TokenClient.TokenResponseके साथgapi.auth2.AuthorizeResponseTokenClient.TokenResponseके साथgapi.auth2.AuthResponse
तरीके:
google.accounts.oauth2.hasGrantedAllScopes()के साथGoogleUser.hasGrantedScopes()google.accounts.oauth2.hasGrantedAllScopes()वालाGoogleUser.getGrantedScopes()
Google साइन-इन के JavaScript क्लाइंट के रेफ़रंस हटाएं:
तरीके:
GoogleUser.getAuthResponse()
ज़्यादा जानकारी वाली अनुमतियों के इस उदाहरण का पालन करके, अपने वेब ऐप्लिकेशन को hasGrantedAllScopes() और
hasGrantedAnyScope() के साथ अपडेट करें.
ऑथराइज़ेशन कोड का फ़्लो
ऑथराइज़ेशन कोड मैनेज करने में दिए गए निर्देशों का पालन करके, अपने बैकएंड प्लैटफ़ॉर्म में ऑथराइज़ेशन कोड एंडपॉइंट को अपडेट या जोड़ें.
अपने प्लैटफ़ॉर्म को अपडेट करें, ताकि अनुरोध की पुष्टि करने, ऐक्सेस टोकन और रीफ़्रेश टोकन पाने के लिए, कोड मॉडल का इस्तेमाल करें गाइड में बताए गए तरीके का इस्तेमाल किया जा सके.
अपने प्लैटफ़ॉर्म को अपडेट करें, ताकि चुनिंदा सुविधाओं और फ़ंक्शन को चालू या बंद किया जा सके. ऐसा, ज़्यादा अनुमति के लिए दिए गए निर्देशों का पालन करके, उपयोगकर्ता के मंज़ूर किए गए अलग-अलग दायरों के आधार पर किया जा सकता है. साथ ही, उपयोगकर्ता के दिए गए ऐक्सेस के दायरों की जांच की जा सकती है.
इंप्लिसिट फ़्लो के उदाहरण
पुराना तरीका
GAPI क्लाइंट लाइब्रेरी
ब्राउज़र में चलने वाली JavaScript के लिए Google API क्लाइंट लाइब्रेरी का उदाहरण. यह उपयोगकर्ता की सहमति के लिए पॉप-अप डायलॉग का इस्तेमाल करके चल रहा है.
gapi.auth2 मॉड्यूल, gapi.client.init() की मदद से अपने-आप लोड और इस्तेमाल होता है. इसलिए, इसे छिपाया गया है.
<!DOCTYPE html>
<html>
<head>
<script src="https://apis.google.com/js/api.js"></script>
<script>
function start() {
gapi.client.init({
'apiKey': 'YOUR_API_KEY',
'clientId': 'YOUR_CLIENT_ID',
'scope': 'https://www.googleapis.com/auth/cloud-translation',
'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
}).then(function() {
// Execute an API request which is returned as a Promise.
// The method name language.translations.list comes from the API discovery.
return gapi.client.language.translations.list({
q: 'hello world',
source: 'en',
target: 'de',
});
}).then(function(response) {
console.log(response.result.data.translations[0].translatedText);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
};
// Load the JavaScript client library and invoke start afterwards.
gapi.load('client', start);
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>
JS क्लाइंट लाइब्रेरी
क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0, जो उपयोगकर्ता की सहमति के लिए पॉप-अप डायलॉग का इस्तेमाल करके ब्राउज़र में चलता है.
gapi.auth2 मॉड्यूल को मैन्युअल तरीके से लोड किया जाता है.
<!DOCTYPE html>
<html><head></head><body>
<script>
var GoogleAuth;
var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
function handleClientLoad() {
// Load the API's client and auth2 modules.
// Call the initClient function after the modules load.
gapi.load('client:auth2', initClient);
}
function initClient() {
// In practice, your app can retrieve one or more discovery documents.
var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
// Initialize the gapi.client object, which app uses to make API requests.
// Get API key and client ID from API Console.
// 'scope' field specifies space-delimited list of access scopes.
gapi.client.init({
'apiKey': 'YOUR_API_KEY',
'clientId': 'YOUR_CLIENT_ID',
'discoveryDocs': [discoveryUrl],
'scope': SCOPE
}).then(function () {
GoogleAuth = gapi.auth2.getAuthInstance();
// Listen for sign-in state changes.
GoogleAuth.isSignedIn.listen(updateSigninStatus);
// Handle initial sign-in state. (Determine if user is already signed in.)
var user = GoogleAuth.currentUser.get();
setSigninStatus();
// Call handleAuthClick function when user clicks on
// "Sign In/Authorize" button.
$('#sign-in-or-out-button').click(function() {
handleAuthClick();
});
$('#revoke-access-button').click(function() {
revokeAccess();
});
});
}
function handleAuthClick() {
if (GoogleAuth.isSignedIn.get()) {
// User is authorized and has clicked "Sign out" button.
GoogleAuth.signOut();
} else {
// User is not signed in. Start Google auth flow.
GoogleAuth.signIn();
}
}
function revokeAccess() {
GoogleAuth.disconnect();
}
function setSigninStatus() {
var user = GoogleAuth.currentUser.get();
var isAuthorized = user.hasGrantedScopes(SCOPE);
if (isAuthorized) {
$('#sign-in-or-out-button').html('Sign out');
$('#revoke-access-button').css('display', 'inline-block');
$('#auth-status').html('You are currently signed in and have granted ' +
'access to this app.');
} else {
$('#sign-in-or-out-button').html('Sign In/Authorize');
$('#revoke-access-button').css('display', 'none');
$('#auth-status').html('You have not authorized this app or you are ' +
'signed out.');
}
}
function updateSigninStatus() {
setSigninStatus();
}
</script>
<button id="sign-in-or-out-button"
style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
style="display: none; margin-left: 25px">Revoke access</button>
<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body></html>
OAuth 2.0 एंडपॉइंट
क्लाइंट-साइड वेब ऐप्लिकेशन के लिए OAuth 2.0, ब्राउज़र में चल रहा है. यह उपयोगकर्ता की सहमति के लिए, Google पर रीडायरेक्ट करता है.
इस उदाहरण में, उपयोगकर्ता के ब्राउज़र से Google के OAuth 2.0 एंडपॉइंट पर सीधे तौर पर कॉल करने के बारे में बताया गया है. साथ ही, इसमें gapi.auth2 मॉड्यूल या JavaScript लाइब्रेरी का इस्तेमाल नहीं किया गया है.
<!DOCTYPE html>
<html><head></head><body>
<script>
var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
var fragmentString = location.hash.substring(1);
// Parse query string to see if page request is coming from OAuth 2.0 server.
var params = {};
var regex = /([^&=]+)=([^&]*)/g, m;
while (m = regex.exec(fragmentString)) {
params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}
if (Object.keys(params).length > 0) {
localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
if (params['state'] && params['state'] == 'try_sample_request') {
trySampleRequest();
}
}
// If there's an access token, try an API request.
// Otherwise, start OAuth 2.0 flow.
function trySampleRequest() {
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
if (params && params['access_token']) {
var xhr = new XMLHttpRequest();
xhr.open('GET',
'https://www.googleapis.com/drive/v3/about?fields=user&' +
'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response);
} else if (xhr.readyState === 4 && xhr.status === 401) {
// Token invalid, so prompt for user permission.
oauth2SignIn();
}
};
xhr.send(null);
} else {
oauth2SignIn();
}
}
/*
* Create form to request access token from Google's OAuth 2.0 server.
*/
function oauth2SignIn() {
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
// Create element to open OAuth 2.0 endpoint in new window.
var form = document.createElement('form');
form.setAttribute('method', 'GET'); // Send as a GET request.
form.setAttribute('action', oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {'client_id': YOUR_CLIENT_ID,
'redirect_uri': YOUR_REDIRECT_URI,
'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
'state': 'try_sample_request',
'include_granted_scopes': 'true',
'response_type': 'token'};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', p);
input.setAttribute('value', params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
</script>
<button onclick="trySampleRequest();">Try sample request</button>
</body></html>
नया तरीका
सिर्फ़ जीआईएस
इस उदाहरण में, उपयोगकर्ता की सहमति के लिए टोकन मॉडल का इस्तेमाल करके, सिर्फ़ Google Identity सेवा की JavaScript लाइब्रेरी को दिखाया गया है. इसके अलावा, पॉप-अप डायलॉग भी दिखाया गया है. इसे इसलिए दिखाया गया है, ताकि क्लाइंट को कॉन्फ़िगर करने, ऐक्सेस टोकन का अनुरोध करने और उसे पाने, और Google API को कॉल करने के लिए कम से कम चरणों के बारे में बताया जा सके.
<!DOCTYPE html>
<html>
<head>
<script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
</head>
<body>
<script>
var client;
var access_token;
function initClient() {
client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/contacts.readonly',
callback: (tokenResponse) => {
access_token = tokenResponse.access_token;
},
});
}
function getToken() {
client.requestAccessToken();
}
function revokeToken() {
google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
}
function loadCalendar() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
xhr.send();
}
</script>
<h1>Google Identity Services Authorization Token model</h1>
<button onclick="getToken();">Get access token</button><br><br>
<button onclick="loadCalendar();">Load Calendar</button><br><br>
<button onclick="revokeToken();">Revoke token</button>
</body>
</html>
GAPI async/await
इस उदाहरण में, टोकन मॉडल का इस्तेमाल करके Google Identity Service लाइब्रेरी जोड़ने, gapi.auth2 मॉड्यूल को हटाने, और JavaScript के लिए Google API क्लाइंट लाइब्रेरी का इस्तेमाल करके किसी एपीआई को कॉल करने का तरीका बताया गया है.
Promises, async, और await का इस्तेमाल, लाइब्रेरी लोड करने के क्रम को लागू करने के लिए किया जाता है. साथ ही, अनुमति से जुड़ी गड़बड़ियों को ठीक करने और फिर से कोशिश करने के लिए भी किया जाता है. मान्य ऐक्सेस टोकन उपलब्ध होने के बाद ही एपीआई कॉल किया जाता है.
जब पेज पहली बार लोड होने पर ऐक्सेस टोकन मौजूद न हो या ऐक्सेस टोकन की समयसीमा खत्म हो गई हो, तो उपयोगकर्ताओं को 'कैलेंडर दिखाएं' बटन दबाना होगा.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>GAPI with GIS async/await</h1>
<button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
<button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>
<script>
const gapiLoadPromise = new Promise((resolve, reject) => {
gapiLoadOkay = resolve;
gapiLoadFail = reject;
});
const gisLoadPromise = new Promise((resolve, reject) => {
gisLoadOkay = resolve;
gisLoadFail = reject;
});
var tokenClient;
(async () => {
document.getElementById("showEventsBtn").style.visibility="hidden";
document.getElementById("revokeBtn").style.visibility="hidden";
// First, load and initialize the gapi.client
await gapiLoadPromise;
await new Promise((resolve, reject) => {
// NOTE: the 'auth2' module is no longer loaded.
gapi.load('client', {callback: resolve, onerror: reject});
});
await gapi.client.init({
// NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
})
.then(function() { // Load the Calendar API discovery document.
gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
});
// Now load the GIS client
await gisLoadPromise;
await new Promise((resolve, reject) => {
try {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
prompt: 'consent',
callback: '', // defined at request time in await/promise scope.
});
resolve();
} catch (err) {
reject(err);
}
});
document.getElementById("showEventsBtn").style.visibility="visible";
document.getElementById("revokeBtn").style.visibility="visible";
})();
async function getToken(err) {
if (err.result.error.code == 401 || (err.result.error.code == 403) &&
(err.result.error.status == "PERMISSION_DENIED")) {
// The access token is missing, invalid, or expired, prompt for user consent to obtain one.
await new Promise((resolve, reject) => {
try {
// Settle this promise in the response callback for requestAccessToken()
tokenClient.callback = (resp) => {
if (resp.error !== undefined) {
reject(resp);
}
// GIS has automatically updated gapi.client with the newly issued access token.
console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));
resolve(resp);
};
tokenClient.requestAccessToken();
} catch (err) {
console.log(err)
}
});
} else {
// Errors unrelated to authorization: server errors, exceeding quota, bad requests, and so on.
throw new Error(err);
}
}
function showEvents() {
// Try to fetch a list of Calendar events. If a valid access token is needed,
// prompt to obtain one and then retry the original request.
gapi.client.calendar.events.list({ 'calendarId': 'primary' })
.then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
.catch(err => getToken(err)) // for authorization errors obtain an access token
.then(retry => gapi.client.calendar.events.list({ 'calendarId': 'primary' }))
.then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
.catch(err => console.log(err)); // cancelled by user, timeout, etc.
}
function revokeToken() {
let cred = gapi.client.getToken();
if (cred !== null) {
google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
gapi.client.setToken('');
}
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoadOkay()" onerror="gapiLoadFail(event)"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoadOkay()" onerror="gisLoadFail(event)"></script>
</body>
</html>
GAPI कॉलबैक
इस उदाहरण में, टोकन मॉडल का इस्तेमाल करके Google Identity Service लाइब्रेरी जोड़ने, gapi.auth2 मॉड्यूल को हटाने, और JavaScript के लिए Google API क्लाइंट लाइब्रेरी का इस्तेमाल करके किसी एपीआई को कॉल करने का तरीका बताया गया है.
वैरिएबल का इस्तेमाल, लाइब्रेरी लोड करने के क्रम को लागू करने के लिए किया जाता है. मान्य ऐक्सेस टोकन मिलने के बाद, GAPI कॉल कॉलबैक से किए जाते हैं.
उपयोगकर्ताओं को पेज पहली बार लोड होने पर, Calendar दिखाएँ बटन को दबाना होगा. इसके बाद, जब उन्हें Calendar की जानकारी रीफ़्रेश करनी होगी, तब भी उन्हें यह बटन दबाना होगा.
<!DOCTYPE html>
<html>
<head>
<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoad()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisInit()"></script>
</head>
<body>
<h1>GAPI with GIS callbacks</h1>
<button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
<button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>
<script>
let tokenClient;
let gapiInited;
let gisInited;
document.getElementById("showEventsBtn").style.visibility="hidden";
document.getElementById("revokeBtn").style.visibility="hidden";
function checkBeforeStart() {
if (gapiInited && gisInited){
// Start only when both gapi and gis are initialized.
document.getElementById("showEventsBtn").style.visibility="visible";
document.getElementById("revokeBtn").style.visibility="visible";
}
}
function gapiInit() {
gapi.client.init({
// NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
})
.then(function() { // Load the Calendar API discovery document.
gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
gapiInited = true;
checkBeforeStart();
});
}
function gapiLoad() {
gapi.load('client', gapiInit)
}
function gisInit() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: '', // defined at request time
});
gisInited = true;
checkBeforeStart();
}
function showEvents() {
tokenClient.callback = (resp) => {
if (resp.error !== undefined) {
throw(resp);
}
// GIS has automatically updated gapi.client with the newly issued access token.
console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));
gapi.client.calendar.events.list({ 'calendarId': 'primary' })
.then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
.catch(err => console.log(err));
document.getElementById("showEventsBtn").innerText = "Refresh Calendar";
}
// Conditionally ask users to select the Google Account they'd like to use,
// and explicitly obtain their consent to fetch their Calendar.
// NOTE: To request an access token a user gesture is necessary.
if (gapi.client.getToken() === null) {
// Prompt the user to select a Google Account and asked for consent to share their data
// when establishing a new session.
tokenClient.requestAccessToken({prompt: 'consent'});
} else {
// Skip display of account chooser and consent dialog for an existing session.
tokenClient.requestAccessToken({prompt: ''});
}
}
function revokeToken() {
let cred = gapi.client.getToken();
if (cred !== null) {
google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
gapi.client.setToken('');
document.getElementById("showEventsBtn").innerText = "Show Calendar";
}
}
</script>
</body>
</html>
ऑथराइज़ेशन कोड फ़्लो के उदाहरण
Google Identity सेवा लाइब्रेरी का पॉप-अप UX आपके बैकएंड टोकन एंडपॉइंट पर सीधे ऑथराइज़ेशन कोड लौटाने के लिए, यूआरएल रीडायरेक्ट का इस्तेमाल कर सकता है या उपयोगकर्ता के ब्राउज़र में चल रहे JavaScript कॉलबैक हैंडलर का इस्तेमाल कर सकता है जो आपके प्लैटफ़ॉर्म के रिस्पॉन्स को प्रॉक्सी करता है. दोनों ही मामलों में, मान्य रीफ़्रेश और ऐक्सेस टोकन पाने के लिए आपका बैकएंड प्लैटफ़ॉर्म OAuth 2.0 फ़्लो को पूरा करेगा.
पुराना तरीका
सर्वर साइड वेब ऐप्लिकेशन
सर्वर साइड ऐप्लिकेशन के लिए Google साइन-इन, जो बैकएंड प्लैटफ़ॉर्म पर काम करता है. इसमें उपयोगकर्ता की सहमति लेने के लिए, Google पर रीडायरेक्ट का इस्तेमाल किया जाता है.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
<script>
function start() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID',
api_key: 'YOUR_API_KEY',
discovery_docs: ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
// Scopes to request in addition to 'profile' and 'email'
scope: 'https://www.googleapis.com/auth/cloud-translation',
});
});
}
function signInCallback(authResult) {
if (authResult['code']) {
console.log("sending AJAX request");
// Send authorization code obtained from Google to backend platform
$.ajax({
type: 'POST',
url: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
// Always include an X-Requested-With header to protect against CSRF attacks.
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
contentType: 'application/octet-stream; charset=utf-8',
success: function(result) {
console.log(result);
},
processData: false,
data: authResult['code']
});
} else {
console.log('error: failed to obtain authorization code')
}
}
</script>
</head>
<body>
<button id="signinButton">Sign In With Google</button>
<script>
$('#signinButton').click(function() {
// Obtain an authorization code from Google
auth2.grantOfflineAccess().then(signInCallback);
});
</script>
</body>
</html>
रीडायरेक्ट का इस्तेमाल करके एचटीटीपी/REST
वेब सर्वर ऐप्लिकेशन के लिए OAuth 2.0 का इस्तेमाल करना. इससे, उपयोगकर्ता के ब्राउज़र से आपके बैकएंड प्लैटफ़ॉर्म पर ऑथराइज़ेशन कोड भेजा जा सकता है. उपयोगकर्ता की सहमति, उपयोगकर्ता के ब्राउज़र को Google पर रीडायरेक्ट करके मैनेज की जाती है.
/\*
\* Create form to request access token from Google's OAuth 2.0 server.
\*/
function oauthSignIn() {
// Google's OAuth 2.0 endpoint for requesting an access token
var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
// Create <form> element to submit parameters to OAuth 2.0 endpoint.
var form = document.createElement('form');
form.setAttribute('method', 'GET'); // Send as a GET request.
form.setAttribute('action', oauth2Endpoint);
// Parameters to pass to OAuth 2.0 endpoint.
var params = {'client\_id': 'YOUR_CLIENT_ID',
'redirect\_uri': 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
'response\_type': 'token',
'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
'include\_granted\_scopes': 'true',
'state': 'pass-through value'};
// Add form parameters as hidden input values.
for (var p in params) {
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', p);
input.setAttribute('value', params[p]);
form.appendChild(input);
}
// Add form to page and submit it to open the OAuth 2.0 endpoint.
document.body.appendChild(form);
form.submit();
}
नया तरीका
GIS पॉप-अप UX
इस उदाहरण में, ऑथराइज़ेशन कोड मॉडल का इस्तेमाल करके सिर्फ़ Google Identity सेवा की JavaScript लाइब्रेरी दिखाई गई है. इसके लिए, उपयोगकर्ता की सहमति लेने के लिए एक पॉप-अप डायलॉग बॉक्स दिखाया गया है. साथ ही, Google से ऑथराइज़ेशन कोड पाने के लिए, कॉलबैक हैंडलर को भी दिखाया गया है. यह उदाहरण, क्लाइंट को कॉन्फ़िगर करने, सहमति पाने, और अपने बैकएंड प्लैटफ़ॉर्म पर ऑथराइज़ेशन कोड भेजने के लिए, कम से कम ज़रूरी चरणों को दिखाने के लिए दिया गया है.
<!DOCTYPE html>
<html>
<head>
<script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
</head>
<body>
<script>
var client;
function initClient() {
client = google.accounts.oauth2.initCodeClient({
client_id: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'popup',
callback: (response) => {
var code_receiver_uri = 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI',
// Send auth code to your backend platform
const xhr = new XMLHttpRequest();
xhr.open('POST', code_receiver_uri, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
console.log('Signed in as: ' + xhr.responseText);
};
xhr.send('code=' + response.code);
// After receipt, the code is exchanged for an access token and
// refresh token, and the platform then updates this web app
// running in user's browser with the requested calendar info.
},
});
}
function getAuthCode() {
// Request authorization code and obtain user consent
client.requestCode();
}
</script>
<button onclick="getAuthCode();">Load Your Calendar</button>
</body>
</html>
जीआईएस रीडायरेक्ट यूएक्स
ऑथराइज़ेशन कोड मॉडल, पॉप-अप और रीडायरेक्ट यूज़र इंटरफ़ेस (यूएक्स) मोड के साथ काम करता है. इससे, आपके प्लैटफ़ॉर्म के होस्ट किए गए एंडपॉइंट पर, हर उपयोगकर्ता के लिए ऑथराइज़ेशन कोड भेजा जा सकता है. रीडायरेक्ट यूज़र एक्सपीरियंस (यूएक्स) मोड यहां दिखाया गया है:
<!DOCTYPE html>
<html>
<head>
<script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
</head>
<body>
<script>
var client;
function initClient() {
client = google.accounts.oauth2.initCodeClient({
client_id: 'YOUR_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
ux_mode: 'redirect',
redirect_uri: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI'
});
}
// Request an access token
function getAuthCode() {
// Request authorization code and obtain user consent
client.requestCode();
}
</script>
<button onclick="getAuthCode();">Load Your Calendar</button>
</body>
</html>
JavaScript लाइब्रेरी
Google Identity Services एक JavaScript लाइब्रेरी है. इसका इस्तेमाल, उपयोगकर्ता की पुष्टि करने और अनुमति देने के लिए किया जाता है. यह कई अलग-अलग लाइब्रेरी और मॉड्यूल में मौजूद सुविधाओं और फ़ंक्शन को एक साथ जोड़ती है और उन्हें बदलती है:
Identity Services पर माइग्रेट करते समय ये कार्रवाइयां करें:
| मौजूदा JS लाइब्रेरी | नई JS लाइब्रेरी | नोट |
|---|---|---|
apis.google.com/js/api.js |
accounts.google.com/gsi/client |
नई लाइब्रेरी जोड़ें और इंप्लिसिट फ़्लो का पालन करें. |
apis.google.com/js/client.js |
accounts.google.com/gsi/client |
नई लाइब्रेरी और ऑथराइज़ेशन कोड फ़्लो जोड़ें. |
लाइब्रेरी के बारे में फटाफट जानकारी पाने की सुविधा
पुरानी Google Sign-In JavaScript क्लाइंट लाइब्रेरी और नई Google Identity Services लाइब्रेरी के बीच ऑब्जेक्ट और तरीके की तुलना. साथ ही, माइग्रेशन के दौरान की जाने वाली कार्रवाई और ज़्यादा जानकारी के साथ नोट.
| पुराना | नए दर्शक | नोट |
|---|---|---|
| GoogleAuth ऑब्जेक्ट और संबंधित तरीके: | ||
| GoogleAuth.attachClickHandler() | हटाएं | |
| GoogleAuth.currentUser.get() | हटाएं | |
| GoogleAuth.currentUser.listen() | हटाएं | |
| GoogleAuth.disconnect() | google.accounts.oauth2.revoke | पुराने को नए से बदलें. https://myaccount.google.com/permissions पर जाकर भी अनुमति रद्द की जा सकती है |
| GoogleAuth.grantOfflineAccess() | हटाएं, ऑथराइज़ेशन कोड फ़्लो का पालन करें. | |
| GoogleAuth.isSignedIn.get() | हटाएं | |
| GoogleAuth.isSignedIn.listen() | हटाएं | |
| GoogleAuth.signIn() | हटाएं | |
| GoogleAuth.signOut() | हटाएं | |
| GoogleAuth.then() | हटाएं | |
| GoogleUser ऑब्जेक्ट और उससे जुड़े तरीके: | ||
| GoogleUser.disconnect() | google.accounts.id.revoke | पुराने को नए से बदलें. https://myaccount.google.com/permissions पर जाकर भी अनुमति रद्द की जा सकती है |
| GoogleUser.getAuthResponse() | requestCode() or requestAccessToken() | पुराने को नए से बदलना |
| GoogleUser.getBasicProfile() | हटाएं पर टैप करें. इसके बजाय, आईडी टोकन का इस्तेमाल करें. Google साइन-इन से माइग्रेट करना देखें. | |
| GoogleUser.getGrantedScopes() | hasGrantedAnyScope() | पुराने को नए से बदलें |
| GoogleUser.getHostedDomain() | हटाएं | |
| GoogleUser.getId() | हटाएं | |
| GoogleUser.grantOfflineAccess() | हटाएं, ऑथराइज़ेशन कोड फ़्लो का पालन करें. | |
| GoogleUser.grant() | हटाएं | |
| GoogleUser.hasGrantedScopes() | hasGrantedAnyScope() | पुराने को नए से बदलना |
| GoogleUser.isSignedIn() | हटाएं | |
| GoogleUser.reloadAuthResponse() | requestAccessToken() | पुराने को हटाएं और ऐक्सेस खत्म होने या रद्द किए जाने पर, नए ऐक्सेस टोकन को बदलने के लिए कॉल करें. |
| gapi.auth2 ऑब्जेक्ट और उससे जुड़े तरीके: | ||
| gapi.auth2.AuthorizeConfig ऑब्जेक्ट | TokenClientConfig या CodeClientConfig | पुराने को नए से बदलना |
| gapi.auth2.AuthorizeResponse ऑब्जेक्ट | हटाएं | |
| gapi.auth2.AuthResponse ऑब्जेक्ट | हटाएं | |
| gapi.auth2.authorize() | requestCode() or requestAccessToken() | पुराने को नए से बदलना |
| gapi.auth2.ClientConfig() | TokenClientConfig या CodeClientConfig | पुराने को नए से बदलना |
| gapi.auth2.getAuthInstance() | हटाएं | |
| gapi.auth2.init() | initTokenClient() or initCodeClient() | पुराने को नए से बदलना |
| gapi.auth2.OfflineAccessOptions ऑब्जेक्ट | हटाएं | |
| gapi.auth2.SignInOptions ऑब्जेक्ट | हटाएं | |
| gapi.signin2 ऑब्जेक्ट और उससे जुड़े तरीके: | ||
| gapi.signin2.render() | हटाएं पर टैप करें. g_id_signin एलिमेंट के एचटीएमएल डीओएम लोड होने या google.accounts.id.renderButton को जेएस कॉल करने पर, उपयोगकर्ता को Google खाते में साइन इन करने के लिए ट्रिगर किया जाता है. | |
क्रेडेंशियल के उदाहरण
मौजूदा क्रेडेंशियल
Google साइन-इन प्लैटफ़ॉर्म लाइब्रेरी, JavaScript के लिए Google API क्लाइंट लाइब्रेरी या Google Auth 2.0 एंडपॉइंट को सीधे कॉल करने पर, एक ही रिस्पॉन्स में OAuth 2.0 ऐक्सेस टोकन और OpenID Connect आईडी टोकन, दोनों मिलते हैं.
access_token और id_token, दोनों शामिल करने वाले जवाब का उदाहरण:
{
"token_type": "Bearer",
"access_token": "ya29.A0ARrdaM-SmArZaCIh68qXsZSzyeU-8mxhQERHrP2EXtxpUuZ-3oW8IW7a6D2J6lRnZrRj8S6-ZcIl5XVEqnqxq5fuMeDDH_6MZgQ5dgP7moY-yTiKR5kdPm-LkuPM-mOtUsylWPd1wpRmvw_AGOZ1UUCa6UD5Hg",
"scope": "https://www.googleapis.com/auth/calendar.readonly",
"login_hint": "AJDLj6I2d1RH77cgpe__DdEree1zxHjZJr4Q7yOisoumTZUmo5W2ZmVFHyAomUYzLkrluG-hqt4RnNxrPhArd5y6p8kzO0t8xIfMAe6yhztt6v2E-_Bb4Ec3GLFKikHSXNh5bI-gPrsI",
"expires_in": 3599,
"id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjkzNDFhYmM0MDkyYjZmYzAzOGU0MDNjOTEwMjJkZDNlNDQ1MzliNTYiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwiYXpwIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwiYXVkIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwic3ViIjoiMTE3NzI2NDMxNjUxOTQzNjk4NjAwIiwiaGQiOiJnb29nbGUuY29tIiwiZW1haWwiOiJkYWJyaWFuQGdvb2dsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXRfaGFzaCI6IkJBSW55TjN2MS1ZejNLQnJUMVo0ckEiLCJuYW1lIjoiQnJpYW4gRGF1Z2hlcnR5IiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdnenAyTXNGRGZvbVdMX3VDemRYUWNzeVM3ZGtxTE5ybk90S0QzVXNRPXM5Ni1jIiwiZ2l2ZW5fbmFtZSI6IkJyaWFuIiwiZmFtaWx5X25hbWUiOiJEYXVnaGVydHkiLCJsb2NhbGUiOiJlbiIsImlhdCI6MTYzODk5MTYzOCwiZXhwIjoxNjM4OTk1MjM4LCJqdGkiOiI5YmRkZjE1YWFiNzE2ZDhjYmJmNDYwMmM1YWM3YzViN2VhMDQ5OTA5In0.K3EA-3Adw5HA7O8nJVCsX1HmGWxWzYk3P7ViVBb4H4BoT2-HIgxKlx1mi6jSxIUJGEekjw9MC-nL1B9Asgv1vXTMgoGaNna0UoEHYitySI23E5jaMkExkTSLtxI-ih2tJrA2ggfA9Ekj-JFiMc6MuJnwcfBTlsYWRcZOYVw3QpdTZ_VYfhUu-yERAElZCjaAyEXLtVQegRe-ymScra3r9S92TA33ylMb3WDTlfmDpWL0CDdDzby2asXYpl6GQ7SdSj64s49Yw6mdGELZn5WoJqG7Zr2KwIGXJuSxEo-wGbzxNK-mKAiABcFpYP4KHPEUgYyz3n9Vqn2Tfrgp-g65BQ",
"session_state": {
"extraQueryParams": {
"authuser": "0"
}
},
"first_issued_at": 1638991637982,
"expires_at": 1638995236982,
"idpId": "google"
}
Google Identity Services का क्रेडेंशियल
Google Identity Services लाइब्रेरी से यह जानकारी मिलती है:
अनुमति देने के लिए इस्तेमाल किए जाने पर, ऐक्सेस टोकन:
{ "access_token": "ya29.A0ARrdaM_LWSO-uckLj7IJVNSfnUityT0Xj-UCCrGxFQdxmLiWuAosnAKMVQ2Z0LLqeZdeJii3TgULp6hR_PJxnInBOl8UoUwWoqsrGQ7-swxgy97E8_hnzfhrOWyQBmH6zs0_sUCzwzhEr_FAVqf92sZZHphr0g", "token_type": "Bearer", "expires_in": 3599, "scope": "https://www.googleapis.com/auth/calendar.readonly" }या पुष्टि करने के लिए इस्तेमाल किए जाने पर, आईडी टोकन:
{ "clientId": "538344653255-758c5h5isc45vgk27d8h8deabovpg6to.apps.googleusercontent.com", "credential": "eyJhbGciOiJSUzI1NiIsImtpZCI6ImMxODkyZWI0OWQ3ZWY5YWRmOGIyZTE0YzA1Y2EwZDAzMjcxNGEyMzciLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJuYmYiOjE2MzkxNTcyNjQsImF1ZCI6IjUzODM0NDY1MzI1NS03NThjNWg1aXNjNDV2Z2syN2Q4aDhkZWFib3ZwZzZ0by5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInN1YiI6IjExNzcyNjQzMTY1MTk0MzY5ODYwMCIsIm5vbmNlIjoiZm9vYmFyIiwiaGQiOiJnb29nbGUuY29tIiwiZW1haWwiOiJkYWJyaWFuQGdvb2dsZS5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiYXpwIjoiNTM4MzQ0NjUzMjU1LTc1OGM1aDVpc2M0NXZnazI3ZDhoOGRlYWJvdnBnNnRvLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIiwibmFtZSI6IkJyaWFuIERhdWdoZXJ0eSIsInBpY3R1cmUiOiJodHRwczovL2xoMy5nb29nbGV1c2VyY29udGVudC5jb20vYS0vQU9oMTRHZ3pwMk1zRkRmb21XTF91Q3pkWFFjc3lTN2RrcUxOcm5PdEtEM1VzUT1zOTYtYyIsImdpdmVuX25hbWUiOiJCcmlhbiIsImZhbWlseV9uYW1lIjoiRGF1Z2hlcnR5IiwiaWF0IjoxNjM5MTU3NTY0LCJleHAiOjE2MzkxNjExNjQsImp0aSI6IjRiOTVkYjAyZjU4NDczMmUxZGJkOTY2NWJiMWYzY2VhYzgyMmI0NjUifQ.Cr-AgMsLFeLurnqyGpw0hSomjOCU4S3cU669Hyi4VsbqnAV11zc_z73o6ahe9Nqc26kPVCNRGSqYrDZPfRyTnV6g1PIgc4Zvl-JBuy6O9HhClAK1HhMwh1FpgeYwXqrng1tifmuotuLQnZAiQJM73Gl-J_6s86Buo_1AIx5YAKCucYDUYYdXBIHLxrbALsA5W6pZCqqkMbqpTWteix-G5Q5T8LNsfqIu_uMBUGceqZWFJALhS9ieaDqoxhIqpx_89QAr1YlGu_UO6R6FYl0wDT-nzjyeF5tonSs3FHN0iNIiR3AMOHZu7KUwZaUdHg4eYkU-sQ01QNY_11keHROCRQ", "select_by": "user" }
टोकन का अमान्य रिस्पॉन्स
समयसीमा खत्म हो चुके, रद्द किए गए या अमान्य ऐक्सेस टोकन का इस्तेमाल करके, एपीआई का अनुरोध करने पर Google से मिलने वाले रिस्पॉन्स का उदाहरण:
एचटीटीपी रिस्पॉन्स हेडर
www-authenticate: Bearer realm="https://accounts.google.com/", error="invalid_token"
जवाब का मुख्य हिस्सा
{
"error": {
"code": 401,
"message": "Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.",
"errors": [
{
"message": "Invalid Credentials",
"domain": "global",
"reason": "authError",
"location": "Authorization",
"locationType": "header"
}
],
"status": "UNAUTHENTICATED"
}
}