আপনার ওয়েব অ্যাপে ব্যবহারকারীদের সাইন-আপ বা সাইন-ইন করার সুবিধা দিতে আপনার সাইটে একটি ওয়ান ট্যাপ প্রম্পট যোগ করুন। প্রম্পটটি রেন্ডার ও কাস্টমাইজ করতে HTML এবং JavaScript ব্যবহার করুন।
পূর্বশর্ত
আপনার OAuth সম্মতি স্ক্রিন কনফিগার করতে, একটি ক্লায়েন্ট আইডি পেতে এবং ক্লায়েন্ট লাইব্রেরি লোড করতে সেটআপ- এ বর্ণিত ধাপগুলো অনুসরণ করুন।
আপনার লগইন পেজে একটি ‘গুগল দিয়ে সাইন ইন করুন’ বাটন যোগ করুন।
প্রম্পট রেন্ডারিং
যেকোনো পেজে যেখানে আপনি ওয়ান ট্যাপ প্রদর্শন করতে চান, সেখানে একটি কোড স্নিপেট রাখুন।
এইচটিএমএল
ওয়ান ট্যাপ প্রম্পটটি প্রদর্শন করুন, যা JWT ক্রেডেনশিয়ালটি একটি লগইন এন্ডপয়েন্টে ফেরত পাঠাবে।
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
data-login_uri অ্যাট্রিবিউটটি হলো আপনার ওয়েব অ্যাপের লগইন এন্ডপয়েন্টের URI। আপনি কাস্টম ডেটা অ্যাট্রিবিউট যোগ করতে পারেন, যেগুলো গুগল কর্তৃক ইস্যুকৃত আইডি টোকেনের সাথে আপনার লগইন এন্ডপয়েন্টে পাঠানো হয়।
ঐচ্ছিকভাবে, data-skip_prompt_cookie অ্যাট্রিবিউট এবং একটি কুকি ব্যবহার করে নিয়ন্ত্রণ করা যায় যে, যেসব স্ট্যাটিক HTML পেজের বিষয়বস্তু পরিবর্তন করা যায় না, সেখানে ওয়ান ট্যাপ প্রম্পটটি প্রদর্শিত হবে কি না। যদি নির্দিষ্ট কুকিটি সেট করা থাকে, তাহলে প্রম্পটটি প্রদর্শিত হয় না।
প্রম্পট শিরোনামে ব্যবহৃত টেক্সট পরিবর্তন করতে ঐচ্ছিক data-context অ্যাট্রিবিউটটি ব্যবহার করুন। উদাহরণস্বরূপ, data-context: "signup" লিখলে "Sign in to" লেখাটি "Sign up to"-তে পরিবর্তিত হয়।
ডিফল্টরূপে, ব্যবহারকারী প্রম্পটের বাইরে ক্লিক করলে ওয়ান ট্যাপ প্রম্পটটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। আপনি data-cancel_on_tap_outside অ্যাট্রিবিউটটিকে false সেট করে এই আচরণটি নিষ্ক্রিয় করতে পারেন।
সমর্থিত অ্যাট্রিবিউটগুলোর সম্পূর্ণ তালিকার জন্য, g_id_onload রেফারেন্স দেখুন।
জাভাস্ক্রিপ্ট
ওয়ান ট্যাপ প্রম্পটটি প্রদর্শন করুন এবং ব্রাউজারের জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলারে JWT ক্রেডেনশিয়ালটি ফেরত পাঠান।
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
জাভাস্ক্রিপ্টে ওয়ান ট্যাপ প্রম্পট কনফিগার করতে, আপনাকে প্রথমে initialize() মেথডটি কল করতে হবে। এরপর, প্রম্পট UI প্রদর্শন করার জন্য prompt() মেথডটি কল করুন।
প্রম্পট শিরোনামে ব্যবহৃত টেক্সট পরিবর্তন করতে ঐচ্ছিক context ফিল্ডটি ব্যবহার করুন। উদাহরণস্বরূপ, context: 'signup' লিখলে "Sign in to" লেখাটি "Sign up to"-তে পরিবর্তিত হয়।
ডিফল্টরূপে, ব্যবহারকারী প্রম্পটের বাইরে ক্লিক করলে ওয়ান ট্যাপ প্রম্পটটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। আপনি cancel_on_tap_outside প্রপার্টিটি false সেট করে এই আচরণটি নিষ্ক্রিয় করতে পারেন।
ডেটা বিকল্পগুলির সম্পূর্ণ তালিকার জন্য, idConfiguration রেফারেন্স দেখুন।
প্রম্পট স্ট্যাটাস
প্রম্পট UI স্ট্যাটাস নোটিফিকেশন শোনার জন্য একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন ব্যবহার করুন।
নিম্নলিখিত মুহূর্তগুলোর জন্য বিজ্ঞপ্তি পাঠানো হয়:
প্রদর্শনের মুহূর্ত: `
prompt()` মেথড কল করার পরে এটি ঘটে। নোটিফিকেশনটিতে একটি বুলিয়ান মান থাকে, যা নির্দেশ করে যে UI প্রদর্শিত হবে কি না।বাদ পড়া মুহূর্ত: এটি ঘটে যখন ওয়ান ট্যাপ প্রম্পটটি স্বয়ংক্রিয়ভাবে বাতিল বা ম্যানুয়ালি বাতিল করার মাধ্যমে বন্ধ করা হয়, অথবা যখন গুগল কোনো ক্রেডেনশিয়াল দিতে ব্যর্থ হয়, যেমন নির্বাচিত সেশনটি গুগল থেকে সাইন আউট করা হলে।
এক্ষেত্রে, আমরা আপনাকে পরবর্তী পরিচয় প্রদানকারী সংস্থাগুলোর কাছে যাওয়ার পরামর্শ দিচ্ছি, যদি সেরকম কিছু থাকে।
খারিজ মুহূর্ত: এটি তখন ঘটে যখন গুগল সফলভাবে কোনো ক্রেডেনশিয়াল সংগ্রহ করে, অথবা কোনো ব্যবহারকারী ক্রেডেনশিয়াল সংগ্রহের প্রক্রিয়াটি থামাতে চান। উদাহরণস্বরূপ, যখন ব্যবহারকারী লগইন ডায়ালগে তাদের ইউজারনেম এবং পাসওয়ার্ড ইনপুট করা শুরু করেন, তখন আপনি ওয়ান ট্যাপ প্রম্পটটি বন্ধ করতে এবং একটি খারিজ মুহূর্ত ট্রিগার করতে
google.accounts.id.cancel()মেথডটি কল করতে পারেন।
এইচটিএমএল
একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন নির্দিষ্ট করতে data-moment_callback অ্যাট্রিবিউটটি ব্যবহার করুন। নোটিফিকেশন গ্রহণ করার জন্য একটি কলব্যাক হ্যান্ডলার আবশ্যক।
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
আপনার ব্যবহারকারীদের সাইন ইন বা সাইন আপ করার সুবিধা দিতে, আপনি উপলব্ধ ক্রেডেনশিয়াল খুঁজে বের করার জন্য একাধিক আইডেন্টিটি প্রোভাইডারের সাথে যোগাযোগ করতে পারেন। আপনি আমাদের প্রম্পট UI-এর স্ট্যাটাস জানতে চাইতে পারেন, যাতে আপনি পরবর্তী আইডেন্টিটি প্রোভাইডারকে কল করতে পারেন।
জাভাস্ক্রিপ্ট
আপনার কলব্যাক হ্যান্ডলারটিকে google.accounts.id.prompt এর প্যারামিটার হিসেবে পাস করুন, এখানে নোটিফিকেশন আপডেটগুলি পরিচালনা করার জন্য একটি অ্যারো ফাংশন ব্যবহার করা হয়েছে।
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
বোতাম এবং প্রম্পট
‘Sign in with Google’ বাটন এবং ‘One Tap’ প্রম্পট একই পেজে একসাথে প্রদর্শিত হতে পারে।
এইচটিএমএল
g_id_onload এবং g_id_signin উভয় এলিমেন্ট অন্তর্ভুক্ত করে 'Sign in with Google' বাটন এবং 'One Tap' প্রম্পট উভয়ই প্রদর্শন করুন।
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
জাভাস্ক্রিপ্ট
একই সাথে renderButton() এবং prompt() ফাংশন দুটি কল করে 'Sign in with Google' বাটন এবং 'One Tap' প্রম্পটটি প্রদর্শন করুন।
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
ওয়ান ট্যাপ ঢেকে রাখবেন না।
এই অংশটি শুধুমাত্র তখনই প্রযোজ্য যখন FedCM নিষ্ক্রিয় থাকে; FedCM সক্রিয় থাকলে ব্রাউজার পৃষ্ঠার বিষয়বস্তুর উপরে ব্যবহারকারীকে নির্দেশনা প্রদর্শন করে।
ব্যবহারকারীরা যাতে প্রদর্শিত সমস্ত তথ্য দেখতে পান, তা নিশ্চিত করার জন্য গুগল ওয়ান ট্যাপ অন্য কোনো কন্টেন্ট দ্বারা আবৃত থাকা উচিত নয়। অন্যথায়, কিছু ক্ষেত্রে পপ-আপ উইন্ডো চালু হতে পারে।
আপনার পেজ লেআউট এবং এলিমেন্টগুলোর z-index প্রোপার্টি ভালোভাবে যাচাই করে নিন, যাতে Google One Tap কোনো সময়েই অন্য কোনো কন্টেন্ট দ্বারা ঢাকা না পড়ে। বর্ডারের মাত্র একটি পিক্সেল ঢাকা পড়লেও ইউএক্স ফ্লো পরিবর্তনটি সক্রিয় হতে পারে।
প্রমাণপত্র প্রতিক্রিয়া
ক্রেডেনশিয়াল রেসপন্সের মধ্যে একটি গুগল স্বাক্ষরিত JWT অন্তর্ভুক্ত থাকে। এই রেসপন্সটি হয় একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন ব্যবহার করে ব্রাউজারে, অথবা একটি লগইন এন্ডপয়েন্টে রিডাইরেক্ট করার মাধ্যমে আপনার প্ল্যাটফর্মে ফেরত পাঠানো হয়।
জেএস কলব্যাক
কলব্যাক কনফিগার করতে HTML অথবা JavaScript ব্যবহার করুন।
এইচটিএমএল
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
জাভাস্ক্রিপ্ট
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
উদাহরণস্বরূপ, handleCredentialResponse ফাংশনটি JWT-কে ডিকোড করে এবং আইডি টোকেনের কয়েকটি ফিল্ড কনসোলে প্রিন্ট করে।
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(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);
}
</script>
পুনঃনির্দেশ
আপনার প্ল্যাটফর্মের লগইন এন্ডপয়েন্টে ক্রেডেনশিয়াল ফেরত পাঠাতে, আপনার OAuth 2.0 ওয়েব ক্লায়েন্টের অথরাইজড রিডাইরেক্ট ইউআরআই সেটিংসে ইউআরএলটি যোগ করুন।
রিডাইরেক্ট ইউআরআই কনফিগার করতে এইচটিএমএল অথবা জাভাস্ক্রিপ্ট ব্যবহার করুন।
এইচটিএমএল
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
জাভাস্ক্রিপ্ট
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});