এই কোডল্যাব সম্পর্কে
1. ওভারভিউ
এই কোডল্যাবে, আমরা ব্যবহারকারী সাইন-ইন করার জন্য একটি সাধারণ ওয়েব পৃষ্ঠা তৈরি করব৷ আপনি Google আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করবেন Google বোতাম দিয়ে সাইন ইন প্রদর্শন এবং কাস্টমাইজ করতে।
আপনি কি শিখবেন
- কিভাবে একটি ওয়েব পৃষ্ঠায় Google বোতাম দিয়ে একটি সাইন ইন যোগ করবেন
- কিভাবে একটি OAuth 2.0 ওয়েব অ্যাপ্লিকেশন সেটআপ করবেন
- কিভাবে একটি আইডি টোকেন ডিকোড করবেন
- কিভাবে গুগল বোতাম দিয়ে সাইন ইন কাস্টমাইজ করবেন
আপনি কি প্রয়োজন হবে
- একটি টেক্সট এডিটর এবং ওয়েব পেজ হোস্ট করার জায়গা, পরিবেশ আমরা এই কোডল্যাবে কভার করব:
- আপনার মেশিনে একটি টার্মিনালে স্থানীয়ভাবে চলছে, বা
- গ্লিচের মতো একটি প্ল্যাটফর্ম ব্যবহার করে।
- একটি Google ক্লাউড প্রকল্প। আপনি আপনার বিদ্যমান প্রকল্প ব্যবহার করতে পারেন বা একটি নতুন তৈরি করতে পারেন। একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট এবং প্রকল্প বিনামূল্যে।
- HTML, CSS, JavaScript এবং Chrome DevTools (বা সমতুল্য) এর প্রাথমিক জ্ঞান।
তো চলুন শুরু করা যাক।
2. আপনার সাইন-ইন পৃষ্ঠা তৈরি করুন
এগিয়ে যান এবং index.html নামের একটি ফাইলে এই কোড নমুনা যোগ করুন। আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে আপনার মেশিনে বা গ্লিচের মতো একটি প্ল্যাটফর্মে এটি করতে পারেন।
<!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>
এই কোডটি এইচটিএমএল এবং জাভাস্ক্রিপ্টের মিশ্রণ, এটি বেশ কিছু কাজ করে:
- এই Google আইডেন্টিটি সার্ভিসেস লাইব্রেরিটি
g_id_onloadদিয়ে কনফিগার করে, -
g_id_signinব্যবহার করে Google এর সাথে একটি সাইন ইন বোতাম প্রদর্শন করে, - Google থেকে ব্যবহারকারীর সাইন-ইন শংসাপত্র পাওয়ার জন্য
handleCredentialResponseনামে একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন হ্যান্ডলার যোগ করে এবং - একটি
decodeJWTফাংশন JSON ওয়েব টোকেন (JWT) শংসাপত্রকে সাধারণ JSON-এ রূপান্তর করতে।
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" এর সাথে কিছু কিছুটা বন্ধ মনে হতে পারে।
আপাতত এটিকে উপেক্ষা করুন, আমরা কিছুক্ষণের মধ্যে এটিতে ফিরে আসব।
3. আপনার ওয়েব পৃষ্ঠা পরিবেশন করুন
আমরা ব্রাউজারে index.html পরিবেশনের জন্য দুটি পরিবেশ নিয়ে আলোচনা করতে যাচ্ছি:
- আপনার মেশিনে স্থানীয়ভাবে একটি ওয়েব সার্ভার চলছে
- গ্লিচের মতো একটি দূরবর্তী প্ল্যাটফর্ম।
আপনি সবচেয়ে আরামদায়ক একটি চয়ন. সেটআপের পরে আমরা একটি OAuth ওয়েব ক্লায়েন্ট কনফিগার করতে URL ব্যবহার করব৷
আপনার মেশিন থেকে স্থানীয়ভাবে
আপনার সিস্টেমে Python3 ইনস্টল করা আছে তা নিশ্চিত করুন। সেটআপ ওএস এবং প্ল্যাটফর্মের দ্বারা পৃথক হয়, আপনার মেশিনে পাইথন ইনস্টল করার প্রয়োজন হলে পাইথন সেটআপ এবং ব্যবহার দিয়ে শুরু করুন।
index.html ধারণকারী ডিরেক্টরিতে পাইথন ওয়েব সার্ভার শুরু করুন:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
একটি ওয়েব সার্ভার এখন পোর্ট 8000-এ সংযোগের জন্য শুনছে এবং আপনার সাইন-ইন পৃষ্ঠা পরিবেশন করার জন্য প্রস্তুত৷ URL হল
http://localhost:8000
একটি দূরবর্তী প্ল্যাটফর্ম ব্যবহার করে
আপনি যদি Glitch (বা সমতুল্য) ব্যবহার করে আপনার সাইন-ইন পৃষ্ঠাটি সম্পাদনা এবং হোস্ট করার জন্য বেছে নিয়ে থাকেন তবে আপনি একটি পূর্বরূপ ফলক বা নতুন ব্রাউজার ট্যাবে index.html খুলতে সক্ষম হবেন৷
সাধারণত, আপনি আপনার glich.com প্রজেক্ট সেটআপ করার সময় আপনি যে ইউআরএলটি ব্যবহার করবেন সেটি হল প্রজেক্টের নাম। উদাহরণস্বরূপ, যদি আপনার গ্লিচ প্রকল্পের নাম gis-example হয় তাহলে URL হল https://gis-example.glitch.me । অবশ্যই, আপনি একটি ভিন্ন প্রকল্পের নাম বেছে নিয়েছেন এবং এটি পুনরায় ব্যবহার করতে পারবেন না। URL হল
https://<var>your-project-name</var>.glitch.me
পৃষ্ঠাটি লোড করুন
এক সেকেন্ড দাঁড়াও...
আমাদের প্রথমে একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে হবে এবং এটি কনফিগার করতে হবে।
URL টি কপি করুন বা নোট করুন, এটি পরবর্তী ধাপে ব্যবহার করা হবে।
4. একটি OAuth ওয়েব ক্লায়েন্ট সেট আপ করুন
আসুন OAuth কনফিগার করি যাতে লোকেরা আসলে সাইন ইন করতে পারে৷
- একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে এই লিঙ্কে ক্লিক করুন। প্রয়োজনে, একটি উইজার্ড আপনাকে একটি নতুন Google ক্লাউড প্রকল্প তৈরি এবং সেটআপ করতে সহায়তা করবে৷
- অ্যাপ্লিকেশন টাইপ ড্রপডাউন থেকে ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।
- অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন এর অধীনে যুক্ত ইউআরআই বোতাম টিপুন
- ধাপ 3 থেকে
index.htmlহোস্ট করা URLটি লিখুন আপনার ওয়েব পৃষ্ঠাটি পরিবেশন করুন ৷আপনার স্থানীয় মেশিনে হোস্ট করা
একটি দূরবর্তী প্ল্যাটফর্মে হোস্ট করা হয়েছে
- তৈরি করুন টিপুন
- নতুন ক্লায়েন্ট আইডি কপি করুন।
একটা শেষ কথা
নতুন ক্লায়েন্ট আইডি ব্যবহার করতে আমাদের ফিরে যেতে হবে এবং index.html আপডেট করতে হবে। আপনার সম্পাদকে, আপনার নতুন ক্লায়েন্ট আইডি দিয়ে PUT_YOUR_WEB_CLIENT_ID_HERE প্রতিস্থাপন করুন। একটি ক্লায়েন্ট আইডি নিম্নলিখিত উদাহরণের মত দেখাচ্ছে: 1234567890-abc123def456.apps.googleusercontent.com ।
আসুন সাইন ইন করি!
5. সাইন ইন করুন
প্রথমে, আপনার ব্রাউজারের ডেভেলপার কনসোল খুলুন, কোনো ত্রুটি এবং Google থেকে ফিরে আসা JWT আইডি টোকেন শংসাপত্র এখানে লগ করা হবে।
সাইন ইন উইথ গুগল বোতাম টিপুন!
এর পরে যা ঘটবে তা একটু পরিবর্তিত হতে পারে:
- আপনি যদি বর্তমানে একাধিক Google অ্যাকাউন্টে সাইন ইন করে থাকেন, তাহলে এই ওয়েব অ্যাপে সাইন ইন করতে আপনি কোন অ্যাকাউন্ট ব্যবহার করবেন তা নির্বাচন করতে আপনাকে অনুরোধ করা হবে।
- আপনি যদি এই ওয়েব অ্যাপে প্রথমবার সাইন-ইন করেন, তাহলে একটি সম্মতি প্রম্পট দেখানো হয়।
ঐচ্ছিকভাবে একটি অ্যাকাউন্ট নির্বাচন করার পরে এবং আপনার সম্মতি দেওয়ার পরে, Google তারপর একটি JWT দিয়ে প্রতিক্রিয়া জানায়। ব্রাউজারে চলমান handleCredentialResponse কলব্যাক ফাংশন JWT গ্রহণ করে।
এই কোডল্যাবে আমরা JWT বিষয়বস্তু ডিকোড এবং প্রিন্ট আউট করি, একটি প্রোডাকশন ওয়েব অ্যাপে আপনি আরও অর্থপূর্ণ কিছু করতে ডিকোড করা JWT যাচাই করবেন এবং ব্যবহার করবেন, যেমন আপনার ব্যাকএন্ড প্ল্যাটফর্মে একটি নতুন অ্যাকাউন্ট তৈরি করা বা ব্যবহারকারীর জন্য একটি নতুন সেশন প্রতিষ্ঠা করা।
6. JWT আইডি টোকেন পরিদর্শন করুন
এনকোড করা JWT ডেভেলপার কনসোলে লগ ইন করা আছে। JWT ডিকোড করার পরে, কিছু সাধারণভাবে ব্যবহৃত আইডি টোকেন ক্ষেত্রগুলিও কনসোলে লগ করা হয়।
আপনি JWT ডিকোড করতে jwt.io এর মত অনলাইন টুল ব্যবহার করতে পারেন।
বিকল্পভাবে, আপনার টার্মিনালের jq JWT ডিকোড করতে এবং দেখতে ব্যবহার করা যেতে পারে (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 যাচাই করতে অন্যান্য মান ব্যবহার করা হয়। আইডি টোকেন থেকে ব্যবহারকারীর তথ্য প্রাপ্ত করুন সব ক্ষেত্র মানে কি আরো আছে.
7. বোতামটি কাস্টমাইজ করুন
একটি পৃষ্ঠায় একটি ডিফল্ট সাইন-ইন বোতাম স্থাপন এভাবে করা হয়
<div class="g_id_signin"></div>
এবং আপনি এই বোতামটি দেখতে পাবেন
কিন্তু হতে পারে আপনি আপনার সাইটের থিমের সাথে মেলে রঙ, আকার বা পাঠ্য পরিবর্তন করতে চান।
চলুন বোতামের রঙ পরিবর্তন করে নীল করা যাক এবং এর পরিবর্তে Google এর সাথে সাইন আপ করুন ।
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>
পৃষ্ঠাটি সংরক্ষণ এবং পুনরায় লোড করার পরে, আপনি নতুন পাঠ্য সহ একটি নীল বোতাম দেখতে পাবেন।
আপনি বোতামটি আরও কাস্টমাইজ করতে পারেন, বিকল্পগুলির সম্পূর্ণ তালিকার জন্য ভিজ্যুয়াল ডেটা বৈশিষ্ট্যগুলি দেখুন।
8. অতিরিক্ত সম্পদ
অভিনন্দন!
আপনি একটি ওয়েব পৃষ্ঠায় Google এর সাথে একটি সাইন ইন বোতাম যোগ করেছেন, একটি OAuth 2.0 ওয়েব ক্লায়েন্ট কনফিগার করেছেন, একটি JWT আইডি টোকেন ডিকোড করেছেন এবং বোতামটি কীভাবে দেখায় তা কাস্টমাইজ করতে শিখেছেন৷
এই লিঙ্কগুলি আপনাকে পরবর্তী পদক্ষেপগুলিতে সাহায্য করতে পারে:
- Google পরিচয় পরিষেবা HTML API
- Google পরিচয় পরিষেবা জাভাস্ক্রিপ্ট API
- ওয়েবের জন্য গুগল দিয়ে সাইন ইন কিভাবে সেটআপ করবেন
- একটি Google ID টোকেন যাচাই করুন
- এখানে Google ক্লাউড প্রকল্প সম্পর্কে আরও জানুন।
- Google পরিচয় প্রমাণীকরণ পদ্ধতি
প্রায়শই জিজ্ঞাসিত প্রশ্ন
এই কোডল্যাব সম্পর্কে
1. ওভারভিউ
এই কোডল্যাবে, আমরা ব্যবহারকারী সাইন-ইন করার জন্য একটি সাধারণ ওয়েব পৃষ্ঠা তৈরি করব৷ আপনি Google আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করবেন Google বোতাম দিয়ে সাইন ইন প্রদর্শন এবং কাস্টমাইজ করতে।
আপনি কি শিখবেন
- কিভাবে একটি ওয়েব পৃষ্ঠায় Google বোতাম দিয়ে একটি সাইন ইন যোগ করবেন
- কিভাবে একটি OAuth 2.0 ওয়েব অ্যাপ্লিকেশন সেটআপ করবেন
- কিভাবে একটি আইডি টোকেন ডিকোড করবেন
- কিভাবে গুগল বোতাম দিয়ে সাইন ইন কাস্টমাইজ করবেন
আপনি কি প্রয়োজন হবে
- একটি টেক্সট এডিটর এবং ওয়েব পেজ হোস্ট করার জায়গা, পরিবেশ আমরা এই কোডল্যাবে কভার করব:
- আপনার মেশিনে একটি টার্মিনালে স্থানীয়ভাবে চলছে, বা
- গ্লিচের মতো একটি প্ল্যাটফর্ম ব্যবহার করে।
- একটি Google ক্লাউড প্রকল্প। আপনি আপনার বিদ্যমান প্রকল্প ব্যবহার করতে পারেন বা একটি নতুন তৈরি করতে পারেন। একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট এবং প্রকল্প বিনামূল্যে।
- HTML, CSS, JavaScript এবং Chrome DevTools (বা সমতুল্য) এর প্রাথমিক জ্ঞান।
তো চলুন শুরু করা যাক।
2. আপনার সাইন-ইন পৃষ্ঠা তৈরি করুন
এগিয়ে যান এবং index.html নামের একটি ফাইলে এই কোড নমুনা যোগ করুন। আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে আপনার মেশিনে বা গ্লিচের মতো একটি প্ল্যাটফর্মে এটি করতে পারেন।
<!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>
এই কোডটি এইচটিএমএল এবং জাভাস্ক্রিপ্টের মিশ্রণ, এটি বেশ কিছু কাজ করে:
- এই Google আইডেন্টিটি সার্ভিসেস লাইব্রেরিটি
g_id_onloadদিয়ে কনফিগার করে, -
g_id_signinব্যবহার করে Google এর সাথে একটি সাইন ইন বোতাম প্রদর্শন করে, - Google থেকে ব্যবহারকারীর সাইন-ইন শংসাপত্র পাওয়ার জন্য
handleCredentialResponseনামে একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন হ্যান্ডলার যোগ করে এবং - একটি
decodeJWTফাংশন JSON ওয়েব টোকেন (JWT) শংসাপত্রকে সাধারণ JSON-এ রূপান্তর করতে।
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" এর সাথে কিছু কিছুটা বন্ধ মনে হতে পারে।
আপাতত এটিকে উপেক্ষা করুন, আমরা কিছুক্ষণের মধ্যে এটিতে ফিরে আসব।
3. আপনার ওয়েব পৃষ্ঠা পরিবেশন করুন
আমরা ব্রাউজারে index.html পরিবেশনের জন্য দুটি পরিবেশ নিয়ে আলোচনা করতে যাচ্ছি:
- আপনার মেশিনে স্থানীয়ভাবে একটি ওয়েব সার্ভার চলছে
- গ্লিচের মতো একটি দূরবর্তী প্ল্যাটফর্ম।
আপনি সবচেয়ে আরামদায়ক একটি চয়ন. সেটআপের পরে আমরা একটি OAuth ওয়েব ক্লায়েন্ট কনফিগার করতে URL ব্যবহার করব৷
আপনার মেশিন থেকে স্থানীয়ভাবে
আপনার সিস্টেমে Python3 ইনস্টল করা আছে তা নিশ্চিত করুন। সেটআপ ওএস এবং প্ল্যাটফর্মের দ্বারা পৃথক হয়, আপনার মেশিনে পাইথন ইনস্টল করার প্রয়োজন হলে পাইথন সেটআপ এবং ব্যবহার দিয়ে শুরু করুন।
index.html ধারণকারী ডিরেক্টরিতে পাইথন ওয়েব সার্ভার শুরু করুন:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
একটি ওয়েব সার্ভার এখন পোর্ট 8000-এ সংযোগের জন্য শুনছে এবং আপনার সাইন-ইন পৃষ্ঠা পরিবেশন করার জন্য প্রস্তুত৷ URL হল
http://localhost:8000
একটি দূরবর্তী প্ল্যাটফর্ম ব্যবহার করে
আপনি যদি Glitch (বা সমতুল্য) ব্যবহার করে আপনার সাইন-ইন পৃষ্ঠাটি সম্পাদনা এবং হোস্ট করার জন্য বেছে নিয়ে থাকেন তবে আপনি একটি পূর্বরূপ ফলক বা নতুন ব্রাউজার ট্যাবে index.html খুলতে সক্ষম হবেন৷
সাধারণত, আপনি আপনার glich.com প্রজেক্ট সেটআপ করার সময় আপনি যে ইউআরএলটি ব্যবহার করবেন সেটি হল প্রজেক্টের নাম। উদাহরণস্বরূপ, যদি আপনার গ্লিচ প্রকল্পের নাম gis-example হয় তাহলে URL হল https://gis-example.glitch.me । অবশ্যই, আপনি একটি ভিন্ন প্রকল্পের নাম বেছে নিয়েছেন এবং এটি পুনরায় ব্যবহার করতে পারবেন না। URL হল
https://<var>your-project-name</var>.glitch.me
পৃষ্ঠাটি লোড করুন
এক সেকেন্ড দাঁড়াও...
আমাদের প্রথমে একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে হবে এবং এটি কনফিগার করতে হবে।
URL টি কপি করুন বা নোট করুন, এটি পরবর্তী ধাপে ব্যবহার করা হবে।
4. একটি OAuth ওয়েব ক্লায়েন্ট সেট আপ করুন
আসুন OAuth কনফিগার করি যাতে লোকেরা আসলে সাইন ইন করতে পারে৷
- একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে এই লিঙ্কে ক্লিক করুন। প্রয়োজনে, একটি উইজার্ড আপনাকে একটি নতুন Google ক্লাউড প্রকল্প তৈরি এবং সেটআপ করতে সহায়তা করবে৷
- অ্যাপ্লিকেশন টাইপ ড্রপডাউন থেকে ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।
- অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন এর অধীনে যুক্ত ইউআরআই বোতাম টিপুন
- ধাপ 3 থেকে
index.htmlহোস্ট করা URLটি লিখুন আপনার ওয়েব পৃষ্ঠাটি পরিবেশন করুন ৷আপনার স্থানীয় মেশিনে হোস্ট করা
একটি দূরবর্তী প্ল্যাটফর্মে হোস্ট করা হয়েছে
- তৈরি করুন টিপুন
- নতুন ক্লায়েন্ট আইডি কপি করুন।
একটা শেষ কথা
নতুন ক্লায়েন্ট আইডি ব্যবহার করতে আমাদের ফিরে যেতে হবে এবং index.html আপডেট করতে হবে। আপনার সম্পাদকে, আপনার নতুন ক্লায়েন্ট আইডি দিয়ে PUT_YOUR_WEB_CLIENT_ID_HERE প্রতিস্থাপন করুন। একটি ক্লায়েন্ট আইডি নিম্নলিখিত উদাহরণের মত দেখাচ্ছে: 1234567890-abc123def456.apps.googleusercontent.com ।
আসুন সাইন ইন করি!
5. সাইন ইন করুন
প্রথমে, আপনার ব্রাউজারের ডেভেলপার কনসোল খুলুন, কোনো ত্রুটি এবং Google থেকে ফিরে আসা JWT আইডি টোকেন শংসাপত্র এখানে লগ করা হবে।
সাইন ইন উইথ গুগল বোতাম টিপুন!
এর পরে যা ঘটবে তা একটু পরিবর্তিত হতে পারে:
- আপনি যদি বর্তমানে একাধিক Google অ্যাকাউন্টে সাইন ইন করে থাকেন, তাহলে এই ওয়েব অ্যাপে সাইন ইন করতে আপনি কোন অ্যাকাউন্ট ব্যবহার করবেন তা নির্বাচন করতে আপনাকে অনুরোধ করা হবে।
- আপনি যদি এই ওয়েব অ্যাপে প্রথমবার সাইন-ইন করেন, তাহলে একটি সম্মতি প্রম্পট দেখানো হয়।
ঐচ্ছিকভাবে একটি অ্যাকাউন্ট নির্বাচন করার পরে এবং আপনার সম্মতি দেওয়ার পরে, Google তারপর একটি JWT দিয়ে প্রতিক্রিয়া জানায়। ব্রাউজারে চলমান handleCredentialResponse কলব্যাক ফাংশন JWT গ্রহণ করে।
এই কোডল্যাবে আমরা JWT বিষয়বস্তু ডিকোড এবং প্রিন্ট আউট করি, একটি প্রোডাকশন ওয়েব অ্যাপে আপনি আরও অর্থপূর্ণ কিছু করতে ডিকোড করা JWT যাচাই করবেন এবং ব্যবহার করবেন, যেমন আপনার ব্যাকএন্ড প্ল্যাটফর্মে একটি নতুন অ্যাকাউন্ট তৈরি করা বা ব্যবহারকারীর জন্য একটি নতুন সেশন প্রতিষ্ঠা করা।
6. JWT আইডি টোকেন পরিদর্শন করুন
এনকোড করা JWT ডেভেলপার কনসোলে লগ ইন করা আছে। JWT ডিকোড করার পরে, কিছু সাধারণভাবে ব্যবহৃত আইডি টোকেন ক্ষেত্রগুলিও কনসোলে লগ করা হয়।
আপনি JWT ডিকোড করতে jwt.io এর মত অনলাইন টুল ব্যবহার করতে পারেন।
বিকল্পভাবে, আপনার টার্মিনালের jq JWT ডিকোড করতে এবং দেখতে ব্যবহার করা যেতে পারে (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 যাচাই করতে অন্যান্য মান ব্যবহার করা হয়। আইডি টোকেন থেকে ব্যবহারকারীর তথ্য প্রাপ্ত করুন সব ক্ষেত্র মানে কি আরো আছে.
7. বোতামটি কাস্টমাইজ করুন
একটি পৃষ্ঠায় একটি ডিফল্ট সাইন-ইন বোতাম স্থাপন এভাবে করা হয়
<div class="g_id_signin"></div>
এবং আপনি এই বোতামটি দেখতে পাবেন
কিন্তু হতে পারে আপনি আপনার সাইটের থিমের সাথে মেলে রঙ, আকার বা পাঠ্য পরিবর্তন করতে চান।
চলুন বোতামের রঙ পরিবর্তন করে নীল করা যাক এবং এর পরিবর্তে Google এর সাথে সাইন আপ করুন ।
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>
পৃষ্ঠাটি সংরক্ষণ এবং পুনরায় লোড করার পরে, আপনি নতুন পাঠ্য সহ একটি নীল বোতাম দেখতে পাবেন।
আপনি বোতামটি আরও কাস্টমাইজ করতে পারেন, বিকল্পগুলির সম্পূর্ণ তালিকার জন্য ভিজ্যুয়াল ডেটা বৈশিষ্ট্যগুলি দেখুন।
8. অতিরিক্ত সম্পদ
অভিনন্দন!
আপনি একটি ওয়েব পৃষ্ঠায় Google এর সাথে একটি সাইন ইন বোতাম যোগ করেছেন, একটি OAuth 2.0 ওয়েব ক্লায়েন্ট কনফিগার করেছেন, একটি JWT আইডি টোকেন ডিকোড করেছেন এবং বোতামটি কীভাবে দেখায় তা কাস্টমাইজ করতে শিখেছেন৷
এই লিঙ্কগুলি আপনাকে পরবর্তী পদক্ষেপগুলিতে সাহায্য করতে পারে:
- Google পরিচয় পরিষেবা HTML API
- Google পরিচয় পরিষেবা জাভাস্ক্রিপ্ট API
- ওয়েবের জন্য গুগল দিয়ে সাইন ইন কিভাবে সেটআপ করবেন
- একটি Google ID টোকেন যাচাই করুন
- এখানে Google ক্লাউড প্রকল্প সম্পর্কে আরও জানুন।
- Google পরিচয় প্রমাণীকরণ পদ্ধতি
প্রায়শই জিজ্ঞাসিত প্রশ্ন
এই কোডল্যাব সম্পর্কে
1. ওভারভিউ
এই কোডল্যাবে, আমরা ব্যবহারকারী সাইন-ইন করার জন্য একটি সাধারণ ওয়েব পৃষ্ঠা তৈরি করব৷ আপনি Google আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করবেন Google বোতাম দিয়ে সাইন ইন প্রদর্শন এবং কাস্টমাইজ করতে।
আপনি কি শিখবেন
- কিভাবে একটি ওয়েব পৃষ্ঠায় Google বোতাম দিয়ে একটি সাইন ইন যোগ করবেন
- কিভাবে একটি OAuth 2.0 ওয়েব অ্যাপ্লিকেশন সেটআপ করবেন
- কিভাবে একটি আইডি টোকেন ডিকোড করবেন
- কিভাবে গুগল বোতাম দিয়ে সাইন ইন কাস্টমাইজ করবেন
আপনি কি প্রয়োজন হবে
- একটি টেক্সট এডিটর এবং ওয়েব পেজ হোস্ট করার জায়গা, পরিবেশ আমরা এই কোডল্যাবে কভার করব:
- আপনার মেশিনে একটি টার্মিনালে স্থানীয়ভাবে চলছে, বা
- গ্লিচের মতো একটি প্ল্যাটফর্ম ব্যবহার করে।
- একটি Google ক্লাউড প্রকল্প। আপনি আপনার বিদ্যমান প্রকল্প ব্যবহার করতে পারেন বা একটি নতুন তৈরি করতে পারেন। একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট এবং প্রকল্প বিনামূল্যে।
- HTML, CSS, JavaScript এবং Chrome DevTools (বা সমতুল্য) এর প্রাথমিক জ্ঞান।
তো চলুন শুরু করা যাক।
2. আপনার সাইন-ইন পৃষ্ঠা তৈরি করুন
এগিয়ে যান এবং index.html নামের একটি ফাইলে এই কোড নমুনা যোগ করুন। আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে আপনার মেশিনে বা গ্লিচের মতো একটি প্ল্যাটফর্মে এটি করতে পারেন।
<!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>
এই কোডটি এইচটিএমএল এবং জাভাস্ক্রিপ্টের মিশ্রণ, এটি বেশ কিছু কাজ করে:
- এই Google আইডেন্টিটি সার্ভিসেস লাইব্রেরিটি
g_id_onloadদিয়ে কনফিগার করে, -
g_id_signinব্যবহার করে Google এর সাথে একটি সাইন ইন বোতাম প্রদর্শন করে, - Google থেকে ব্যবহারকারীর সাইন-ইন শংসাপত্র পাওয়ার জন্য
handleCredentialResponseনামে একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন হ্যান্ডলার যোগ করে এবং - একটি
decodeJWTফাংশন JSON ওয়েব টোকেন (JWT) শংসাপত্রকে সাধারণ JSON-এ রূপান্তর করতে।
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" এর সাথে কিছু কিছুটা বন্ধ মনে হতে পারে।
আপাতত এটিকে উপেক্ষা করুন, আমরা কিছুক্ষণের মধ্যে এটিতে ফিরে আসব।
3. আপনার ওয়েব পৃষ্ঠা পরিবেশন করুন
আমরা ব্রাউজারে index.html পরিবেশনের জন্য দুটি পরিবেশ নিয়ে আলোচনা করতে যাচ্ছি:
- আপনার মেশিনে স্থানীয়ভাবে একটি ওয়েব সার্ভার চলছে
- গ্লিচের মতো একটি দূরবর্তী প্ল্যাটফর্ম।
আপনি সবচেয়ে আরামদায়ক একটি চয়ন. সেটআপের পরে আমরা একটি OAuth ওয়েব ক্লায়েন্ট কনফিগার করতে URL ব্যবহার করব৷
আপনার মেশিন থেকে স্থানীয়ভাবে
আপনার সিস্টেমে Python3 ইনস্টল করা আছে তা নিশ্চিত করুন। সেটআপ ওএস এবং প্ল্যাটফর্মের দ্বারা পৃথক হয়, আপনার মেশিনে পাইথন ইনস্টল করার প্রয়োজন হলে পাইথন সেটআপ এবং ব্যবহার দিয়ে শুরু করুন।
index.html ধারণকারী ডিরেক্টরিতে পাইথন ওয়েব সার্ভার শুরু করুন:
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
একটি ওয়েব সার্ভার এখন পোর্ট 8000-এ সংযোগের জন্য শুনছে এবং আপনার সাইন-ইন পৃষ্ঠা পরিবেশন করার জন্য প্রস্তুত৷ URL হল
http://localhost:8000
একটি দূরবর্তী প্ল্যাটফর্ম ব্যবহার করে
আপনি যদি Glitch (বা সমতুল্য) ব্যবহার করে আপনার সাইন-ইন পৃষ্ঠাটি সম্পাদনা এবং হোস্ট করার জন্য বেছে নিয়ে থাকেন তবে আপনি একটি পূর্বরূপ ফলক বা নতুন ব্রাউজার ট্যাবে index.html খুলতে সক্ষম হবেন৷
সাধারণত, আপনি আপনার glich.com প্রজেক্ট সেটআপ করার সময় আপনি যে ইউআরএলটি ব্যবহার করবেন সেটি হল প্রজেক্টের নাম। উদাহরণস্বরূপ, যদি আপনার গ্লিচ প্রকল্পের নাম gis-example হয় তাহলে URL হল https://gis-example.glitch.me । অবশ্যই, আপনি একটি ভিন্ন প্রকল্পের নাম বেছে নিয়েছেন এবং এটি পুনরায় ব্যবহার করতে পারবেন না। URL হল
https://<var>your-project-name</var>.glitch.me
পৃষ্ঠাটি লোড করুন
এক সেকেন্ড দাঁড়াও...
আমাদের প্রথমে একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে হবে এবং এটি কনফিগার করতে হবে।
URL টি কপি করুন বা নোট করুন, এটি পরবর্তী ধাপে ব্যবহার করা হবে।
4. একটি OAuth ওয়েব ক্লায়েন্ট সেট আপ করুন
আসুন OAuth কনফিগার করি যাতে লোকেরা আসলে সাইন ইন করতে পারে৷
- একটি OAuth 2.0 ওয়েব ক্লায়েন্ট তৈরি করতে এই লিঙ্কে ক্লিক করুন। প্রয়োজনে, একটি উইজার্ড আপনাকে একটি নতুন Google ক্লাউড প্রকল্প তৈরি এবং সেটআপ করতে সহায়তা করবে৷
- অ্যাপ্লিকেশন টাইপ ড্রপডাউন থেকে ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন।
- অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন এর অধীনে যুক্ত ইউআরআই বোতাম টিপুন
- ধাপ 3 থেকে
index.htmlহোস্ট করা URLটি লিখুন আপনার ওয়েব পৃষ্ঠাটি পরিবেশন করুন ৷আপনার স্থানীয় মেশিনে হোস্ট করা
একটি দূরবর্তী প্ল্যাটফর্মে হোস্ট করা হয়েছে
- তৈরি করুন টিপুন
- নতুন ক্লায়েন্ট আইডি কপি করুন।
একটা শেষ কথা
নতুন ক্লায়েন্ট আইডি ব্যবহার করতে আমাদের ফিরে যেতে হবে এবং index.html আপডেট করতে হবে। আপনার সম্পাদকে, আপনার নতুন ক্লায়েন্ট আইডি দিয়ে PUT_YOUR_WEB_CLIENT_ID_HERE প্রতিস্থাপন করুন। একটি ক্লায়েন্ট আইডি নিম্নলিখিত উদাহরণের মত দেখাচ্ছে: 1234567890-abc123def456.apps.googleusercontent.com ।
আসুন সাইন ইন করি!
5. সাইন ইন করুন
প্রথমে, আপনার ব্রাউজারের ডেভেলপার কনসোল খুলুন, কোনো ত্রুটি এবং Google থেকে ফিরে আসা JWT আইডি টোকেন শংসাপত্র এখানে লগ করা হবে।
সাইন ইন উইথ গুগল বোতাম টিপুন!
এর পরে যা ঘটবে তা একটু পরিবর্তিত হতে পারে:
- আপনি যদি বর্তমানে একাধিক Google অ্যাকাউন্টে সাইন ইন করে থাকেন, তাহলে এই ওয়েব অ্যাপে সাইন ইন করতে আপনি কোন অ্যাকাউন্ট ব্যবহার করবেন তা নির্বাচন করতে আপনাকে অনুরোধ করা হবে।
- আপনি যদি এই ওয়েব অ্যাপে প্রথমবার সাইন-ইন করেন, তাহলে একটি সম্মতি প্রম্পট দেখানো হয়।
ঐচ্ছিকভাবে একটি অ্যাকাউন্ট নির্বাচন করার পরে এবং আপনার সম্মতি দেওয়ার পরে, Google তারপর একটি JWT দিয়ে প্রতিক্রিয়া জানায়। ব্রাউজারে চলমান handleCredentialResponse কলব্যাক ফাংশন JWT গ্রহণ করে।
এই কোডল্যাবে আমরা JWT বিষয়বস্তু ডিকোড এবং প্রিন্ট আউট করি, একটি প্রোডাকশন ওয়েব অ্যাপে আপনি আরও অর্থপূর্ণ কিছু করতে ডিকোড করা JWT যাচাই করবেন এবং ব্যবহার করবেন, যেমন আপনার ব্যাকএন্ড প্ল্যাটফর্মে একটি নতুন অ্যাকাউন্ট তৈরি করা বা ব্যবহারকারীর জন্য একটি নতুন সেশন প্রতিষ্ঠা করা।
6. JWT আইডি টোকেন পরিদর্শন করুন
এনকোড করা JWT ডেভেলপার কনসোলে লগ ইন করা আছে। JWT ডিকোড করার পরে, কিছু সাধারণভাবে ব্যবহৃত আইডি টোকেন ক্ষেত্রগুলিও কনসোলে লগ করা হয়।
আপনি JWT ডিকোড করতে jwt.io এর মত অনলাইন টুল ব্যবহার করতে পারেন।
বিকল্পভাবে, আপনার টার্মিনালের jq JWT ডিকোড করতে এবং দেখতে ব্যবহার করা যেতে পারে (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 যাচাই করতে অন্যান্য মান ব্যবহার করা হয়। আইডি টোকেন থেকে ব্যবহারকারীর তথ্য প্রাপ্ত করুন সব ক্ষেত্র মানে কি আরো আছে.
7. বোতামটি কাস্টমাইজ করুন
একটি পৃষ্ঠায় একটি ডিফল্ট সাইন-ইন বোতাম স্থাপন এভাবে করা হয়
<div class="g_id_signin"></div>
এবং আপনি এই বোতামটি দেখতে পাবেন
কিন্তু হতে পারে আপনি আপনার সাইটের থিমের সাথে মেলে রঙ, আকার বা পাঠ্য পরিবর্তন করতে চান।
চলুন বোতামের রঙ পরিবর্তন করে নীল করা যাক এবং এর পরিবর্তে Google এর সাথে সাইন আপ করুন ।
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>
পৃষ্ঠাটি সংরক্ষণ এবং পুনরায় লোড করার পরে, আপনি নতুন পাঠ্য সহ একটি নীল বোতাম দেখতে পাবেন।
আপনি বোতামটি আরও কাস্টমাইজ করতে পারেন, বিকল্পগুলির সম্পূর্ণ তালিকার জন্য ভিজ্যুয়াল ডেটা বৈশিষ্ট্যগুলি দেখুন।
8. অতিরিক্ত সম্পদ
অভিনন্দন!
আপনি একটি ওয়েব পৃষ্ঠায় Google এর সাথে একটি সাইন ইন বোতাম যোগ করেছেন, একটি OAuth 2.0 ওয়েব ক্লায়েন্ট কনফিগার করেছেন, একটি JWT আইডি টোকেন ডিকোড করেছেন এবং বোতামটি কীভাবে দেখায় তা কাস্টমাইজ করতে শিখেছেন৷
এই লিঙ্কগুলি আপনাকে পরবর্তী পদক্ষেপগুলিতে সাহায্য করতে পারে:
- Google পরিচয় পরিষেবা HTML API
- Google পরিচয় পরিষেবা জাভাস্ক্রিপ্ট API
- ওয়েবের জন্য গুগল দিয়ে সাইন ইন কিভাবে সেটআপ করবেন
- একটি Google ID টোকেন যাচাই করুন
- এখানে Google ক্লাউড প্রকল্প সম্পর্কে আরও জানুন।
- Google পরিচয় প্রমাণীকরণ পদ্ধতি