ব্যবহারকারীদের আপনার ওয়েব অ্যাপে সাইন-আপ বা সাইন-ইন করার সুযোগ দিতে আপনার সাইটে একটি ‘গুগল দিয়ে সাইন ইন করুন’ বাটন যোগ করুন। বাটনটি রেন্ডার করতে HTML অথবা JavaScript ব্যবহার করুন এবং এর আকৃতি, আকার, লেখা ও থিম কাস্টমাইজ করতে অ্যাট্রিবিউট ব্যবহার করুন।
ব্যবহারকারী একটি গুগল অ্যাকাউন্ট নির্বাচন করে এবং সম্মতি প্রদান করার পর, গুগল একটি JSON ওয়েব টোকেন (JWT) ব্যবহার করে ব্যবহারকারীর প্রোফাইলটি শেয়ার করে। সাইন-ইন করার সময় জড়িত ধাপসমূহ এবং ব্যবহারকারীর অভিজ্ঞতা সম্পর্কে একটি সার্বিক ধারণার জন্য 'এটি কীভাবে কাজ করে' দেখুন। 'ব্যক্তিগতকৃত বাটনটি বুঝুন' অংশে বিভিন্ন শর্ত ও অবস্থা পর্যালোচনা করা হয়েছে, যা ব্যবহারকারীদের কাছে বাটনটি কীভাবে প্রদর্শিত হবে তা প্রভাবিত করে।
পূর্বশর্ত
আপনার OAuth সম্মতি স্ক্রিন কনফিগার করতে, একটি ক্লায়েন্ট আইডি পেতে এবং ক্লায়েন্ট লাইব্রেরি লোড করতে সেটআপ- এ বর্ণিত ধাপগুলো অনুসরণ করুন।
বোতাম রেন্ডারিং
আপনার লগইন পেজে 'Sign In With Google' বাটনটি প্রদর্শন করতে, আপনি HTML অথবা JavaScript ব্যবহার করে বাটনটি রেন্ডার করতে পারেন:
এইচটিএমএল
HTML ব্যবহার করে সাইন-ইন বাটনটি রেন্ডার করুন এবং আপনার প্ল্যাটফর্মের লগইন এন্ডপয়েন্টে JWT ফেরত পাঠান।
<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 ক্লাসযুক্ত একটি এলিমেন্ট 'Sign In With Google' বাটন হিসেবে রেন্ডার হয়। data অ্যাট্রিবিউটে প্রদত্ত প্যারামিটার দ্বারা বাটনটি কাস্টমাইজ করা হয়।
একই পেজে ‘Sign In With Google’ বাটন এবং ‘Google One Tap’ দেখানোর জন্য, data-auto_prompt="false" সরিয়ে দিন। সাইন-ইন প্রক্রিয়া সহজ করতে এবং এর হার বাড়াতে এই পরামর্শ দেওয়া হয়।
ডেটা অ্যাট্রিবিউটগুলোর সম্পূর্ণ তালিকার জন্য, g_id_signin রেফারেন্স পৃষ্ঠাটি দেখুন।
জাভাস্ক্রিপ্ট
জাভাস্ক্রিপ্ট ব্যবহার করে সাইন-ইন বাটনটি রেন্ডার করুন এবং ব্রাউজারের জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলারে 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 এর প্রথম প্যারামিটার হিসেবে নির্দিষ্ট করা এলিমেন্টটি একটি 'Sign In With Google' বাটন হিসেবে প্রদর্শিত হয়। এই উদাহরণে, পেজে বাটনটি রেন্ডার করার জন্য buttonDiv ব্যবহার করা হয়েছে। renderButton এর দ্বিতীয় প্যারামিটারে নির্দিষ্ট করা অ্যাট্রিবিউটগুলো ব্যবহার করে বাটনটি কাস্টমাইজ করা হয়েছে।
ব্যবহারকারীর অসুবিধা কমাতে, সাইন-আপ বা সাইন-ইন করার জন্য বাটন ব্যবহারের দ্বিতীয় বিকল্প হিসেবে ‘ওয়ান ট্যাপ’ প্রদর্শন করতে google.accounts.id.prompt() কল করা হয়।
The GIS library parses the HTML doc for elements with an ID attribute set to g_id_onload , or class attributes containing g_id_signin . If a matching element is found, the button is rendered using HTML, regardless if you've also rendered the button in JavaScript. To avoid displaying the button twice, possibly with conflicting parameters don't include HTML elements matching these names in your HTML pages.
বোতামের ভাষা
বাটনের ভাষা স্বয়ংক্রিয়ভাবে ব্রাউজারের ডিফল্ট ভাষা অথবা গুগল সেশন ব্যবহারকারীর পছন্দ দ্বারা নির্ধারিত হয়। এছাড়াও, লাইব্রেরি লোড করার সময় src ডিরেক্টিভে hl প্যারামিটার ও ল্যাঙ্গুয়েজ কোড যোগ করে এবং HTML-এ ঐচ্ছিক data-locale বা locale প্যারামিটার অথবা জাভাস্ক্রিপ্টে locale যোগ করে আপনি ম্যানুয়ালি ভাষা নির্বাচন করতে পারেন।
এইচটিএমএল
নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে ক্লায়েন্ট লাইব্রেরি URL-এ hl প্যারামিটার যোগ করে এবং data-locale অ্যাট্রিবিউটটিকে French-এ সেট করে বাটনের ভাষা ফরাসি ভাষায় প্রদর্শন করা যায়:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
জাভাস্ক্রিপ্ট
নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে ক্লায়েন্ট লাইব্রেরি URL-এ hl প্যারামিটার যোগ করে এবং locale প্যারামিটারটি French-এ সেট করে 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>
পরিচয়পত্র পরিচালনা
ব্যবহারকারীর সম্মতি দেওয়ার পর, গুগল একটি JSON Web Token (JWT) ক্রেডেনশিয়াল, যা আইডি টোকেন নামে পরিচিত, হয় ব্যবহারকারীর ব্রাউজারে, অথবা সরাসরি আপনার প্ল্যাটফর্মে হোস্ট করা একটি লগইন এন্ডপয়েন্টে ফেরত পাঠায়।
আপনি JWT কোথায় গ্রহণ করবেন তা নির্ভর করে আপনি বাটনটি HTML নাকি JavaScript ব্যবহার করে রেন্ডার করছেন এবং পপআপ নাকি রিডাইরেক্ট UX মোড ব্যবহার করা হচ্ছে তার উপর।
পপআপ মোড
popup ইউএক্স মোড ব্যবহার করলে একটি পপ-আপ উইন্ডোতে সাইন-ইন ইউএক্স ফ্লো সম্পন্ন হয়। এটি সাধারণত ব্যবহারকারীদের জন্য কম বিরক্তিকর একটি অভিজ্ঞতা এবং এটিই ডিফল্ট ইউএক্স মোড।
বাটনটি রেন্ডার করার সময়:
এইচটিএমএল
আপনি নিম্নলিখিত যেকোনো একটি সেট করতে পারেন:
- আপনার কলব্যাক হ্যান্ডলারে JWT ফেরত পাঠানোর জন্য
data-callback, অথবা - Google-কে একটি POST অনুরোধ ব্যবহার করে সরাসরি আপনার লগইন এন্ডপয়েন্টে JWT পাঠানোর জন্য
data-login_uriব্যবহার করুন।
যদি উভয় মান সেট করা থাকে, তাহলে data-callback , data-login_uri উপর অগ্রাধিকার পাবে। ডিবাগিংয়ের জন্য কলব্যাক হ্যান্ডলার ব্যবহার করার সময় উভয় মান সেট করা সহায়ক হতে পারে।
জাভাস্ক্রিপ্ট
আপনাকে অবশ্যই একটি callback নির্দিষ্ট করতে হবে, কারণ জাভাস্ক্রিপ্টে বাটন রেন্ডার করার সময় পপআপ মোড রিডাইরেক্ট সমর্থন করে না। যদি এটি সেট করা থাকে, তাহলে login_uri উপেক্ষা করা হয়।
আপনার JS কলব্যাক হ্যান্ডলারের মধ্যে JWT ডিকোড করার বিষয়ে আরও জানতে , ফেরত আসা ক্রেডেনশিয়াল রেসপন্সটি কীভাবে হ্যান্ডেল করতে হবে তা দেখুন।
পুনঃনির্দেশ মোড
redirect ইউএক্স মোড ব্যবহার করলে ব্যবহারকারীর ব্রাউজারে সম্পূর্ণ পৃষ্ঠা রিডাইরেকশনের মাধ্যমে সাইন-ইন ইউএক্স ফ্লো সম্পন্ন হয় এবং গুগল একটি POST রিকোয়েস্টের মাধ্যমে সরাসরি আপনার লগইন এন্ডপয়েন্টে JWT ফেরত পাঠায়। এটি সাধারণত ব্যবহারকারীদের জন্য একটি বেশি হস্তক্ষেপমূলক অভিজ্ঞতা, কিন্তু এটিকে সবচেয়ে নিরাপদ সাইন-ইন পদ্ধতি হিসেবে বিবেচনা করা হয়।
বাটনটি রেন্ডার করার সময়:
- HTML ঐচ্ছিকভাবে
data-login_uriআপনার লগইন এন্ডপয়েন্টের URI-তে সেট করতে পারে। - জাভাস্ক্রিপ্ট ঐচ্ছিকভাবে
login_uriআপনার লগইন এন্ডপয়েন্টের URI-তে সেট করে।
আপনি কোনো মান প্রদান না করলে, গুগল বর্তমান পৃষ্ঠার URI-তে JWT ফেরত দেয়।
আপনার লগইন এন্ডপয়েন্ট ইউআরআই
data-login_uri বা login_uri সেট করার সময় HTTPS এবং একটি অ্যাবসোলিউট URI ব্যবহার করুন। উদাহরণস্বরূপ, https://example.com/path ।
ডেভেলপমেন্টের সময় লোকালহোস্ট ব্যবহার করলেই কেবল HTTP অনুমোদিত: http://localhost/path ।
Google-এর প্রয়োজনীয়তা এবং যাচাইকরণ নিয়মাবলীর সম্পূর্ণ বিবরণের জন্য "Use secure JavaScript origins and redirect URIs" দেখুন।