১. সংক্ষিপ্ত বিবরণ
এই কোডল্যাবে, আমরা ব্যবহারকারীদের সাইন-ইন করার জন্য একটি ওয়েব পেজ তৈরি করব। আপনি ‘Sign in with Google’ বাটনটি প্রদর্শন ও কাস্টমাইজ করার জন্য Google Identity Services জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করবেন।
আপনি যা শিখবেন
- একটি ওয়েব পেজে কীভাবে 'গুগল দিয়ে সাইন ইন করুন' বাটন যোগ করবেন
- একটি OAuth 2.0 ওয়েব অ্যাপ্লিকেশন কীভাবে সেটআপ করবেন
- একটি আইডি টোকেন কীভাবে ডিকোড করবেন
- কীভাবে গুগল দিয়ে সাইন ইন বাটনটি কাস্টমাইজ করবেন
আপনার যা যা লাগবে
- এই কোডল্যাবে আমরা একটি টেক্সট এডিটর এবং একটি ওয়েব পেজ হোস্ট করার স্থান—এই পরিবেশগুলো নিয়ে আলোচনা করব।
- আপনার মেশিনের টার্মিনালে স্থানীয়ভাবে চালানো, অথবা
- গ্লিচ- এর মতো একটি প্ল্যাটফর্ম ব্যবহার করে।
- একটি গুগল ক্লাউড প্রজেক্ট। আপনি আপনার বিদ্যমান প্রজেক্ট ব্যবহার করতে পারেন অথবা একটি নতুন প্রজেক্ট তৈরি করতে পারেন। গুগল ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট এবং প্রজেক্ট বিনামূল্যে পাওয়া যায়।
- এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট এবং ক্রোম ডেভটুলস (বা সমতুল্য) সম্পর্কে প্রাথমিক জ্ঞান।
তাহলে চলুন শুরু করা যাক।
২. আপনার সাইন-ইন পৃষ্ঠা তৈরি করুন
এই কোড স্যাম্পলটি index.html নামের একটি ফাইলে যোগ করুন। আপনি আপনার কম্পিউটারে পছন্দের টেক্সট এডিটর ব্যবহার করে অথবা Glitch-এর মতো কোনো প্ল্যাটফর্মে এটি করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJWT(token) {
let base64Url = token.split(".")[1];
let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
let jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload);
}
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
const responsePayload = decodeJWT(response.credential);
console.log("Decoded JWT ID token fields:");
console.log(" Full Name: " + responsePayload.name);
console.log(" Given Name: " + responsePayload.given_name);
console.log(" Family Name: " + responsePayload.family_name);
console.log(" Unique ID: " + responsePayload.sub);
console.log(" Profile image URL: " + responsePayload.picture);
console.log(" Email: " + responsePayload.email);
}
</script>
</head>
<body>
<!-- g_id_onload contains Google Identity Services settings -->
<div
id="g_id_onload"
data-auto_prompt="false"
data-callback="handleCredentialResponse"
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
></div>
<!-- g_id_signin places the button on a page and supports customization -->
<div class="g_id_signin"></div>
</body>
</html>
এই কোডটি এইচটিএমএল এবং জাভাস্ক্রিপ্টের মিশ্রণ, এটি বেশ কিছু কাজ করে:
-
g_id_onloadব্যবহার করে গুগল আইডেন্টিটি সার্ভিসেস লাইব্রেরি কনফিগার করে, -
g_id_signinব্যবহার করে একটি 'গুগল দিয়ে সাইন ইন করুন' বাটন প্রদর্শন করে, - গুগল থেকে ব্যবহারকারীর সাইন-ইন ক্রেডেনশিয়াল গ্রহণ করার জন্য
handleCredentialResponseনামের একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন হ্যান্ডলার যোগ করে, এবং - JSON ওয়েব টোকেন (JWT) ক্রেডেনশিয়ালকে সাধারণ JSON-এ রূপান্তর করার জন্য একটি
decodeJWTফাংশন।
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" -এর সাথে কিছু একটা গড়বড় মনে হতে পারে।
আপাতত এটা উপেক্ষা করুন, আমরা কিছুক্ষণ পরে এ বিষয়ে আবার আলোচনা করব।
৩. আপনার ওয়েব পেজ পরিবেশন করুন
আমরা ব্রাউজারে index.html পরিবেশন করার দুটি পরিবেশ নিয়ে আলোচনা করব:
- আপনার মেশিনে স্থানীয়ভাবে একটি ওয়েব সার্ভার চালানো
- গ্লিচের মতো একটি রিমোট প্ল্যাটফর্ম।
যেটি আপনার জন্য সবচেয়ে সুবিধাজনক, সেটি বেছে নিন। সেটআপের পরে আমরা URL-টি ব্যবহার করে একটি OAuth ওয়েব ক্লায়েন্ট কনফিগার করব।
আপনার মেশিন থেকে স্থানীয়ভাবে
আপনার সিস্টেমে পাইথন ৩ ইনস্টল করা আছে কিনা তা নিশ্চিত করুন। অপারেটিং সিস্টেম এবং প্ল্যাটফর্ম অনুযায়ী সেটআপ ভিন্ন হয়, আপনার মেশিনে পাইথন ইনস্টল করার প্রয়োজন হলে 'পাইথন সেটআপ এবং ব্যবহার' (Python Setup and Usage) দিয়ে শুরু করুন।
index.html যে ডিরেক্টরিতে রয়েছে, সেখানে পাইথন ওয়েব সার্ভারটি চালু করুন:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
একটি ওয়েব সার্ভার এখন ৮০০০ পোর্টে সংযোগের জন্য অপেক্ষা করছে এবং আপনার সাইন-ইন পৃষ্ঠাটি পরিবেশন করার জন্য প্রস্তুত। ইউআরএলটি হলো
http://localhost:8000
একটি ওয়েব ডেভেলপমেন্ট প্ল্যাটফর্ম থেকে
আপনি যদি গ্লিচ (বা এর সমতুল্য কোনো সফটওয়্যার) ব্যবহার করে আপনার সাইন-ইন পেজটি সম্পাদনা ও হোস্ট করার সিদ্ধান্ত নিয়ে থাকেন, তাহলে আপনি index.html একটি প্রিভিউ প্যানে অথবা নতুন ব্রাউজার ট্যাবে খুলতে পারবেন।
সাধারণত, আপনি যে URL-টি ব্যবহার করবেন, সেটি হলো আপনার glich.com প্রজেক্ট সেটআপ করার সময় দেওয়া প্রজেক্টের নামটি। উদাহরণস্বরূপ, যদি আপনার গ্লিচ প্রজেক্টের নাম gis-example হয়, তাহলে URL হবে https://gis-example.glitch.me । অবশ্যই, আপনি একটি ভিন্ন প্রজেক্টের নাম বেছে নিয়েছেন এবং এটি পুনরায় ব্যবহার করতে পারবেন না। URL-টি হলো
https://<var>your-project-name</var>.glitch.me
পৃষ্ঠাটি লোড করুন
এক মুহূর্ত দাঁড়ান...
আমাদের প্রথমে একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করে কনফিগার করতে হবে।
URL-টি কপি করে বা লিখে রাখুন, এটি পরবর্তী ধাপে ব্যবহার করা হবে।
৪. একটি OAuth ওয়েব ক্লায়েন্ট সেট আপ করুন।
চলুন OAuth কনফিগার করি যাতে লোকেরা আসলে সাইন ইন করতে পারে।
- একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে এই লিঙ্কে ক্লিক করুন। প্রয়োজনে, একটি উইজার্ড আপনাকে একটি নতুন গুগল ক্লাউড প্রজেক্ট তৈরি ও সেটআপ করতে সাহায্য করবে।
- অ্যাপ্লিকেশন টাইপ ড্রপডাউন থেকে ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।
- অনুমোদিত জাভাস্ক্রিপ্ট উৎসের অধীনে থাকা 'ইউআরআই যোগ করুন' বোতামটি চাপুন।
- ধাপ ৩ থেকে
index.htmlহোস্টকারী URL-টি প্রবেশ করান। আপনার ওয়েব পেজটি পরিবেশন করুন ।আপনার স্থানীয় মেশিনে হোস্ট করা হয়েছে
একটি রিমোট প্ল্যাটফর্মে হোস্ট করা হয়েছে
- প্রেস ক্রিয়েট
- নতুন ক্লায়েন্ট আইডিটি কপি করুন।
শেষ একটা কথা।
নতুন ক্লায়েন্ট আইডি ব্যবহার করার জন্য আমাদের index.html আবার আপডেট করতে হবে। আপনার এডিটরে, PUT_YOUR_WEB_CLIENT_ID_HERE এর জায়গায় আপনার নতুন ক্লায়েন্ট আইডিটি লিখুন। একটি ক্লায়েন্ট আইডি দেখতে নিচের উদাহরণের মতো হয়: 1234567890-abc123def456.apps.googleusercontent.com ।
চলুন সাইন-ইন করি!
৫. সাইন ইন করুন
প্রথমে, আপনার ব্রাউজারের ডেভেলপার কনসোল খুলুন, যেকোনো ত্রুটি এবং গুগল থেকে প্রাপ্ত JWT ID টোকেন ক্রেডেনশিয়াল এখানে লগ করা থাকবে।
গুগল দিয়ে সাইন ইন করুন বোতামটি চাপুন!
এরপর যা ঘটবে তা কিছুটা ভিন্ন হতে পারে:
- আপনি যদি বর্তমানে একাধিক গুগল অ্যাকাউন্টে সাইন ইন করে থাকেন, তাহলে এই ওয়েব অ্যাপে সাইন ইন করার জন্য কোন অ্যাকাউন্টটি ব্যবহার করবেন তা বেছে নিতে আপনাকে বলা হবে।
- আপনি যদি এই ওয়েব অ্যাপে প্রথমবারের মতো সাইন-ইন করে থাকেন, তাহলে একটি সম্মতিসূচক অনুরোধ দেখানো হবে।
ঐচ্ছিকভাবে একটি অ্যাকাউন্ট নির্বাচন করে এবং আপনার সম্মতি দেওয়ার পর, গুগল একটি JWT পাঠিয়ে সাড়া দেয়। ব্রাউজারে চলমান handleCredentialResponse কলব্যাক ফাংশনটি এই JWT-টি গ্রহণ করে।
এই কোডল্যাবে আমরা JWT-এর বিষয়বস্তু ডিকোড করে প্রিন্ট করব। প্রোডাকশন ওয়েব অ্যাপে আপনি ডিকোড করা JWT-টি যাচাই করবেন এবং আরও অর্থবহ কোনো কাজ করার জন্য এটি ব্যবহার করবেন, যেমন আপনার ব্যাকএন্ড প্ল্যাটফর্মে একটি নতুন অ্যাকাউন্ট তৈরি করা বা ব্যবহারকারীর জন্য একটি নতুন সেশন স্থাপন করা।
৬. JWT ID টোকেন যাচাই করুন
এনকোড করা JWT ডেভেলপার কনসোলে লগ করা হয়। JWT ডিকোড করার পর, কিছু সচরাচর ব্যবহৃত আইডি টোকেন ফিল্ডও কনসোলে লগ করা হয়।
আপনি JWT ডিকোড করার জন্য jwt.io-এর মতো অনলাইন টুল ব্যবহার করতে পারেন।
বিকল্পভাবে, JWT ডিকোড এবং দেখার জন্য আপনার টার্মিনালে jq ব্যবহার করা যেতে পারে (jq ইনস্টল করার জন্য আপনার প্যাকেজ ম্যানেজারের প্রয়োজন হতে পারে)। প্রথমে, এনকোড করা JWT স্ট্রিংটি ডাবল-কোটের মধ্যে পেস্ট করুন:
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
এবং তারপর এটি ডিকোড করতে এই কমান্ডটি ব্যবহার করুন
$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
"alg": "RS256",
"kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
"typ": "JWT"
}
{
"iss": "https://accounts.google.com",
"azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"sub": "2718281828459045",
"email": "example@example.com",
"email_verified": true,
"nbf": 1744645148,
"name": "Brian Daugherty",
"picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
"given_name": "Brian",
"family_name": "Daugherty",
"iat": 1744645448,
"exp": 1744649048,
"jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}
ইমেল, নাম এবং ছবির মতো কিছু কী এবং ভ্যালু বোঝা বেশ সহজ হওয়া উচিত। অন্যান্য ভ্যালুগুলো JWT ব্যবহার করার আগে তা যাচাই করার জন্য ব্যবহৃত হয়। আইডি টোকেন থেকে ব্যবহারকারীর তথ্য সংগ্রহ অংশে প্রতিটি ফিল্ডের অর্থ সম্পর্কে আরও বিস্তারিত বলা আছে।
৭. বাটনটি কাস্টমাইজ করুন
একটি পৃষ্ঠায় ডিফল্ট সাইন-ইন বাটন এইভাবে রাখা হয়।
<div class="g_id_signin"></div>
এবং আপনি এই বোতামটি দেখতে পাবেন
কিন্তু হয়তো আপনি আপনার সাইটের থিমের সাথে মেলানোর জন্য রং, আকার বা লেখা পরিবর্তন করতে চান।
চলুন বাটনটির রঙ নীল করে দিই এবং এর পরিবর্তে ‘গুগল দিয়ে সাইন আপ করুন’ লেখাটি যুক্ত করি।
index.html খুলুন, g_id_signin এলিমেন্টটি খুঁজুন এবং data-theme="filled_blue" ও data-text="signup_with" অ্যাট্রিবিউটগুলো যোগ করুন:
<div
class="g_id_signin"
data-theme="filled_blue"
data-text="signup_with"
></div>
পৃষ্ঠাটি সংরক্ষণ করে পুনরায় লোড করার পর, আপনি নতুন লেখা সহ একটি নীল বোতাম দেখতে পাবেন।
আপনি বাটনটি আরও কাস্টমাইজ করতে পারেন, অপশনগুলোর সম্পূর্ণ তালিকার জন্য ভিজ্যুয়াল ডেটা অ্যাট্রিবিউটস দেখুন এবং আমাদের এইচটিএমএল কোড জেনারেটরটি ব্যবহার করে দেখুন।
৮. অতিরিক্ত সম্পদ
অভিনন্দন!
আপনি একটি ওয়েব পেজে ‘Sign in with Google’ বাটন যোগ করেছেন, একটি OAuth 2.0 ওয়েব ক্লায়েন্ট কনফিগার করেছেন, একটি JWT ID টোকেন ডিকোড করেছেন এবং বাটনটির বাহ্যিক রূপ কীভাবে কাস্টমাইজ করতে হয় তা শিখেছেন।
এই লিঙ্কগুলো আপনাকে পরবর্তী পদক্ষেপের জন্য সাহায্য করতে পারে:
- গুগল আইডেন্টিটি সার্ভিসেস এইচটিএমএল এপিআই
- গুগল আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট এপিআই
- ওয়েবের জন্য গুগল সাইন ইন কীভাবে সেট আপ করবেন
- একটি গুগল আইডি টোকেন যাচাই করুন
- গুগল ক্লাউড প্রজেক্টস সম্পর্কে আরও জানুন।
- গুগল পরিচয় প্রমাণীকরণ পদ্ধতি