रेल पर रूबी के साथ एक टैप Google साइन-इन कैसे कार्यान्वित करें

आधुनिक अनुप्रयोगों में Google साइन-इन के साथ प्रमाणीकरण एक आम बात है। इस ब्लॉग पोस्ट में, हम चर्चा करेंगे कि Google पहचान सेवाओं को आपके किसी भी फ्रंट-एंड एप्लिकेशन में कैसे एकीकृत किया जाए जो सर्वर के रूप में रूबी ऑन रेल्स का उपयोग करता है। Google पहचान सेवाएं प्रदान करती हैं

1. अनुकूलित साइन इन / साइन अप बटन

   

एक टैप साइन इन करें

चलो गोता लगाएँ !!

चरण 1: Google डेवलपर कंसोल में एक एप्लिकेशन बनाएं।

Google साइन इन या वन टैप का उपयोग करने के लिए, हमें अपने क्लाइंट के साथ-साथ सर्वर में जोड़ने के लिए एक क्लाइंट_आईडी की आवश्यकता होती है।

• एक एप्लिकेशन बनाने के लिए, हेड करें गूगल डेवलपर कंसोल

• क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी चुनें. ऐसा करने से पहले आपको अपना कॉन्फ़िगर करने की आवश्यकता है सहमति स्क्रीन .

• क्लाइंट_आईडी बनाते समय, लोकलहोस्ट और उस पोर्ट को शामिल करना सुनिश्चित करें जिस पर आपका क्लाइंट विकास के लिए अधिकृत जावास्क्रिप्ट मूल और आपके उत्पादन यूआरएल में चल रहा है।

  
  

• एक बार हो जाने के बाद, आपके पास 1234567890-abcdefg.apps.googleusercontent.com फ़ॉर्म का अपना क्लाइंट_आईडी होगा

  
  

एप्लिकेशन सेट करने के बारे में अधिक जानकारी के लिए, आप पढ़ सकते हैं यहाँ ।

चरण 2: क्लाइंट में लाइब्रेरी की स्थापना

क्लाइंट लाइब्रेरी लोड करने के लिए, अगर आप React.js या _app का उपयोग कर रहे हैं, तो अपने index.html में <script src="https://accounts.google.com/gsi/client" async defer></script> _app.jsx अगर Next.js का उपयोग कर रहे हैं।

चरण 3: अनुकूलित साइन इन बटन प्रदर्शित करना

 useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

• Global google को यह दिखाने के लिए जोड़ा गया है कि google को हमारे index.html . में विश्व स्तर पर परिभाषित किया गया है

  
  

• google.accounts.id.initialize विधि दिए गए फ़ील्ड के आधार पर Google क्लाइंट इंस्टेंस के साथ साइन इन बनाता है। क्लाइंट_आईडी एक आवश्यक फ़ील्ड है जो हमें Google एप्लिकेशन बनाने से मिलता है, कॉलबैक जावास्क्रिप्ट फ़ंक्शन है (यहां साइनइनकॉलबैक ) जो वन टैप प्रॉम्प्ट या पॉप-अप विंडो से लौटाए गए आईडी टोकन को संभालता है।

  
  

• डिफ़ॉल्ट रूप से, यदि कोई उपयोगकर्ता स्क्रीन पर कहीं भी क्लिक करता है, तो वन टैप प्रॉम्प्ट पर एक एक्सपोनेंशियल कूल-डाउन लागू होता है। यदि आप चाहते हैं कि संकेत हमेशा दिखाई दे, तो इस मान को गलत पर सेट करें। आप अधिक कॉन्फ़िगरेशन पर एक नज़र डाल सकते हैं यहां।

  
  

• google.accounts.id.renderButton विधि Google के साथ साइन इन करें बटन प्रस्तुत करती है। आप कॉन्फ़िगरेशन के साथ खेल सकते हैं यहां।

  
  

• document.getElementById("signInDiv") HTML तत्व है। नीचे दिए गए कोड को अपने वेब पेज HTML में जोड़कर,

 return ( <div className="App"> <div id="signInDiv" /> </div> );

आप इस तरह एक अनुकूलित बटन देख पाएंगे

चरण 4: वन टैप प्रॉम्प्ट प्रदर्शित करना

• संकेत दिखाने के लिए, इसे useEffect google.accounts.id.prompt();

चरण 5: कॉलबैक फ़ंक्शन को परिभाषित करना

• जैसा कि चरण 3 में बताया गया है, साइनइनकॉलबैक, हमारा कॉलबैक फ़ंक्शन है जिसे परिभाषित किया जा सकता है

 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } };

कहाँ पे,

• लोकलहोस्ट: 3000/उपयोगकर्ता/गूगल एक सर्वर URL है जिसे हम अगले चरण में बनाएंगे

  
  

• एक बार जब हम साइन इन या वन टैप बटन पर क्लिक करते हैं तो परिणाम Google की ओर से एक प्रतिक्रिया है।

  
  

• परिणाम में दो क्षेत्र शामिल हैं

  • क्रेडेंशियल : यह फ़ील्ड बेस 64-एन्कोडेड JSON वेब टोकन (JWT) स्ट्रिंग के रूप में आईडी टोकन है

  • select_by : यह दिखा रहा है कि क्रेडेंशियल कैसे चुना जाता है। इसके बारे में अधिक यहां .

    
    

• हम परिणाम से क्रेडेंशियल लेते हैं और इसे अपने सर्वर पर एक परम के रूप में पास करते हैं।

चरण 6: सर्वर में नियंत्रक और मार्ग जोड़ना

हम क्लाइंट से अनुरोध को संभालने के लिए सर्वर में एक रूट बनाएंगे। ऐसा करने से पहले, हमें एक नियंत्रक बनाना होगा जो क्लाइंट से JWT को स्वीकार करेगा।

• एक फ़ाइल बनाएं, app/controllers/users/user_controller.rb , एक विधि जोड़ें google ।

  
  

• config/ routes.rb में मार्ग उपयोगकर्ता/उपयोगकर्ता#google_oauth जोड़ें।

  
  

• एक बार, मार्ग JWT को प्राप्त कर लेता है, पहला और सबसे महत्वपूर्ण कदम यह सत्यापित करना है कि JWT मान्य है या नहीं। इसके लिए हम रत्न का प्रयोग कर सकते हैं google_auth , जो जारी किए गए आईडी टोकन को सत्यापित करने के लिए Google का आधिकारिक रत्न है।

  
  

• इसका उपयोग करके आसानी से किया जा सकता है

 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

जहां एक्सेस_टोकन क्लाइंट से प्राप्त जेडब्ल्यूटी है और ऑड एक गूगल एप्लिकेशन क्लाइंट आईडी है।

• यदि टोकन मान्य है, तो यह इस तरह हैश लौटाएगा या अपवाद फेंक देगा

 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" }

• यदि टोकन मान्य है, तो आप अपने डेटाबेस में जांच सकते हैं कि उपयोगकर्ता मौजूद है या नहीं और तदनुसार एक उपयोगकर्ता बनाएं। एक बार यह हो जाने के बाद, आप अपनी प्रमाणीकरण पद्धति के आधार पर उपयोगकर्ता को साइन इन कर सकते हैं या उन्हें पुनर्निर्देशित कर सकते हैं।

  
  

 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end

 # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end

पुनश्च : अपने सर्वर पर rack-cors स्थापित करना सुनिश्चित करें और इस एप्लिकेशन को जोड़ें

 config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end

इस तरह की त्रुटियों का सामना करने से बचने के लिए

पीपीएस : यदि आपका एप्लिकेशन वेब के लिए Google साइन-इन जावास्क्रिप्ट प्लेटफ़ॉर्म लाइब्रेरी का उपयोग करता है, तो इसे Google पहचान सेवा में माइग्रेट करना सुनिश्चित करें क्योंकि पहले वाला पदावनत होने जा रहा है। संपर्क

मुझे उम्मीद है कि यह लेख आपको अपनी परियोजनाओं में वन टैप लॉगिन को एकीकृत करने में मदद करेगा। अधिक विस्तृत जानकारी के लिए आप अधिकारी को देख सकते हैं डॉक्स .

यहाँ भी प्रकाशित