अपनी साइट पर 'Google से साइन इन करें' बटन जोड़ें, ताकि उपयोगकर्ता आपके वेब ऐप्लिकेशन में साइन-अप या साइन-इन कर सकें. बटन को रेंडर करने के लिए, एचटीएमएल या JavaScript में से किसी एक का इस्तेमाल करें. साथ ही, बटन के आकार, साइज़, टेक्स्ट, और थीम को पसंद के मुताबिक बनाने के लिए एट्रिब्यूट का इस्तेमाल करें.
जब कोई उपयोगकर्ता Google खाता चुनता है और उसकी सहमति देता है, तो Google आपकी JSON Web Token (JWT) का इस्तेमाल करने वाली उपयोगकर्ता की प्रोफ़ाइल. साइन इन और उपयोगकर्ता अनुभव के दौरान, शामिल चरणों की खास जानकारी के लिए, यह कैसे काम करता है देखें. लोगों के हिसाब से बटन बनाने की सुविधा के बारे में जानकारी, अलग-अलग स्थितियों और स्थितियों की समीक्षा करती है. इन स्थितियों से यह तय होता है कि उपयोगकर्ताओं को बटन कैसे दिखाया जाए.
ज़रूरी शर्तें
अपने लॉगिन पेज पर बटन जोड़ने से पहले, ये काम पूरे करें:
- OAuth के लिए सहमति मोड को कॉन्फ़िगर करने के लिए, सेटअप में बताए गए तरीके का इस्तेमाल करें स्क्रीन और Client-ID पाने के लिए.
- क्लाइंट लाइब्रेरी लोड करें.
बटन रेंडरिंग
'Google से साइन इन करें' बटन दिखाने के लिए, एचटीएमएल या JavaScript:
एचटीएमएल
एचटीएमएल का इस्तेमाल करके साइन-इन बटन को रेंडर करें. इससे आपके प्लैटफ़ॉर्म के लॉगिन एंडपॉइंट.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
g_id_signin क्लास वाला एलिमेंट, 'Google से साइन इन करें' बटन के तौर पर रेंडर होता है.
डेटा एट्रिब्यूट में दिए गए पैरामीटर के हिसाब से, बटन को पसंद के मुताबिक बनाया जाता है.
एक ही पेज पर 'Google से साइन इन करें' बटन और Google One Tap को दिखाने के लिए,
data-auto_prompt="false" हटाएं. यह सुझाव दिया जाता है कि रुकावट को कम करें और
साइन-इन दरों को बेहतर बनाने के लिए.
डेटा एट्रिब्यूट की पूरी सूची के लिए, g_id_signin रेफ़रंस
पेज देखें
JavaScript
JavaScript का इस्तेमाल करके साइन-इन बटन को रेंडर करें और JWT को की है.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
renderButton के पहले पैरामीटर के तौर पर दिया गया एलिमेंट
'Google से साइन इन करें' बटन. इस उदाहरण में buttonDiv का इस्तेमाल इमेज दिखाने के लिए किया गया है
बटन पर क्लिक करें. बटन को एट्रिब्यूट का इस्तेमाल करके, अपनी पसंद के मुताबिक बनाया गया है
renderButton के लिए दूसरे पैरामीटर में तय किया गया है.
उपयोगकर्ताओं की परेशानी को कम करने के लिए, google.accounts.id.prompt() को डिसप्ले करने के लिए कॉल किया गया है
साइन-अप या साइन-इन करने के लिए, बटन का इस्तेमाल करने के बजाय, One Tap का दूसरा विकल्प.
जीआईएस लाइब्रेरी, एचटीएमएल दस्तावेज़ को उन एलिमेंट के लिए पार्स करती है जिनका आईडी एट्रिब्यूट g_id_onload पर सेट है या जिनमें g_id_signin वाले क्लास एट्रिब्यूट शामिल हैं. अगर
एलिमेंट मिल जाता है, तो बटन को एचटीएमएल का इस्तेमाल करके रेंडर किया जाता है. इससे फ़र्क़ नहीं पड़ता कि आपने
साथ ही, JavaScript में बटन रेंडर करना भी आसान होता है. बटन को दो बार दिखने से रोकने के लिए, अपने एचटीएमएल पेजों में इन नामों से मैच करने वाले एचटीएमएल एलिमेंट शामिल न करें. ऐसा करने से, हो सकता है कि आपके पेज पर, एक ही बटन दो बार दिखे.
बटन की भाषा
बटन की भाषा, ब्राउज़र की डिफ़ॉल्ट भाषा या Google सेशन के उपयोगकर्ता की प्राथमिकता के हिसाब से अपने-आप तय होती है. यह भी चुना जा सकता है
hl पैरामीटर और भाषा कोड को सोर्स में जोड़कर, भाषा को मैन्युअल तौर पर जोड़ें
लाइब्रेरी लोड करते समय और वैकल्पिक डेटा-लोकेल या
एचटीएमएल में स्थान-भाषा पैरामीटर data-locale या JavaScript में locale.
एचटीएमएल
नीचे दिए गए कोड स्निपेट में, क्लाइंट लाइब्रेरी के यूआरएल में hl पैरामीटर जोड़कर और data-locale एट्रिब्यूट को फ़्रेंच पर सेट करके, बटन की भाषा को फ़्रेंच में दिखाने का तरीका बताया गया है:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
नीचे दिए गए कोड स्निपेट में, क्लाइंट लाइब्रेरी के यूआरएल में hl पैरामीटर जोड़कर, बटन की भाषा को फ़्रेंच में दिखाने का तरीका बताया गया है. इसके लिए, locale पैरामीटर को फ़्रेंच पर सेट करके, google.accounts.id.renderButton तरीके को कॉल किया गया है:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
क्रेडेंशियल मैनेज करना
उपयोगकर्ता की सहमति मिलने के बाद, Google उपयोगकर्ता के ब्राउज़र या सीधे आपके प्लैटफ़ॉर्म के होस्ट किए गए लॉगिन एंडपॉइंट पर, एक JSON वेब टोकन (JWT) क्रेडेंशियल दिखाता है. इसे आईडी टोकन कहा जाता है.
आपको JWT कहां मिलेगा, यह इस बात पर निर्भर करता है कि बटन को एचटीएमएल या JavaScript का इस्तेमाल करके रेंडर किया गया है या नहीं. साथ ही, यह भी इस बात पर निर्भर करता है कि पॉप-अप या रीडायरेक्ट यूएक्स मोड का इस्तेमाल किया गया है या नहीं.
पॉप-अप मोड
popup के UX मोड का इस्तेमाल करने पर, साइन-इन करने के लिए उपयोगकर्ता अनुभव वाला फ़्लो, पॉप-अप विंडो में पूरा होता है. आम तौर पर, इससे उपयोगकर्ताओं को कम रुकावट आती है. यह UX का डिफ़ॉल्ट मोड होता है.
बटन को रेंडर करते समय, इनका इस्तेमाल करने पर:
एचटीएमएल
इनमें से किसी एक को सेट किया जा सकता है:
- अपने कॉलबैक हैंडलर को JWT वापस करने के लिए,
data-callbackया - Google के लिए
data-login_uri, ताकि वह सीधे आपके लॉगिन पर JWT भेज सके एंडपॉइंट के लिए, पोस्ट अनुरोध का इस्तेमाल करें.
अगर दोनों वैल्यू सेट हैं, तो data-callback को प्राथमिकता दी जाती है
data-login_uri. कॉलबैक का इस्तेमाल करते समय, दोनों वैल्यू को सेट करना मददगार हो सकता है
डीबग करने के लिए हैंडलर.
JavaScript
आपको एक callback बताना होगा, पॉप-अप मोड, रीडायरेक्ट के लिए काम नहीं करता
लागू करें. अगर यह सेट है, तो login_uri को अनदेखा कर दिया जाता है.
दस्तावेज़ को डिकोड करने के बारे में ज़्यादा जानने के लिए, दिए गए क्रेडेंशियल के जवाब को मैनेज करना देखें आपके JS कॉलबैक हैंडलर में JWT.
रीडायरेक्ट मोड
redirect यूज़र एक्सपीरियंस (यूएक्स) मोड का इस्तेमाल करके, उपयोगकर्ता के ब्राउज़र के पूरे पेज को रीडायरेक्ट करके साइन-इन यूज़र एक्सपीरियंस फ़्लो किया जाता है. साथ ही, Google POST अनुरोध का इस्तेमाल करके, सीधे आपके लॉगिन एंडपॉइंट पर जेडब्लयूटी भेजता है.
आम तौर पर, इससे उपयोगकर्ताओं को रुकावट का सामना करना पड़ता है, लेकिन ऐसा माना जाता है कि
सबसे सुरक्षित साइन-इन तरीका हो सकता है.
बटन को रेंडर करते समय, इनका इस्तेमाल करने पर:
- एचटीएमएल में आपके लॉगिन एंडपॉइंट के यूआरआई के लिए,
data-login_uriको सेट किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. - JavaScript में,
login_uriको अपने लॉगिन एंडपॉइंट के यूआरआई पर सेट किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है.
अगर कोई वैल्यू नहीं दी जाती है, तो Google मौजूदा पेज के यूआरआई में JWT दिखाता है.
आपके लॉगिन एंडपॉइंट का यूआरआई
data-login_uri या login_uri को सेट करते समय, एचटीटीपीएस और ऐब्सलूट यूआरआई का इस्तेमाल करें.
उदाहरण के लिए, https://example.com/path.
एचटीटीपी का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब डेवलपमेंट के दौरान localhost का इस्तेमाल किया जा रहा हो:
http://localhost/path.
Google की ज़रूरी शर्तों और पुष्टि करने के नियमों के बारे में पूरी जानकारी पाने के लिए, सुरक्षित JavaScript ऑरिजिन और रीडायरेक्ट यूआरआई का इस्तेमाल करना लेख पढ़ें.