ব্যবহারকারীদের আপনার ওয়েব অ্যাপে সাইন-আপ বা সাইন-ইন করতে সক্ষম করতে আপনার সাইটে একটি ওয়ান ট্যাপ প্রম্পট যোগ করুন। প্রম্পট রেন্ডার এবং কাস্টমাইজ করতে HTML এবং JavaScript ব্যবহার করুন।
পূর্বশর্ত
আপনার OAuth সম্মতি স্ক্রীন কনফিগার করতে, একটি ক্লায়েন্ট আইডি পেতে এবং ক্লায়েন্ট লাইব্রেরি লোড করতে সেটআপে বর্ণিত ধাপগুলি অনুসরণ করুন৷
আপনার লগইন পৃষ্ঠায় Google এর সাথে একটি সাইন ইন করুন বোতাম যোগ করুন।
প্রম্পট রেন্ডারিং
যেকোন পৃষ্ঠায় একটি কোড স্নিপেট রাখুন যেখানে আপনি ওয়ান ট্যাপ প্রদর্শন করতে চান।
এইচটিএমএল
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। আপনি কাস্টম ডেটা অ্যাট্রিবিউট যোগ করতে পারেন, যা Google দ্বারা জারি করা আইডি টোকেনের সাথে আপনার লগইন এন্ডপয়েন্টে পাঠানো হয়।
প্রম্পট শিরোনামে ব্যবহৃত পাঠ্য পরিবর্তন করতে data-context বৈশিষ্ট্যটি ব্যবহার করুন। উদাহরণস্বরূপ, data-context: "signup" পরিবর্তন করে "সাইন ইন করুন" থেকে "সাইন আপ করুন"।
সমর্থিত বৈশিষ্ট্যগুলির একটি সম্পূর্ণ তালিকার জন্য, 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' পরিবর্তন করে "সাইন ইন করুন" থেকে "সাইন আপ করুন"।
ডেটা বিকল্পগুলির সম্পূর্ণ তালিকার জন্য, idConfiguration রেফারেন্স দেখুন।
প্রম্পট অবস্থা
প্রম্পট UI স্থিতি বিজ্ঞপ্তি শুনতে একটি JavaScript কলব্যাক ফাংশন ব্যবহার করুন।
নিম্নলিখিত মুহূর্তের জন্য বিজ্ঞপ্তি পাঠানো হয়:
ডিসপ্লে মোমেন্ট:
prompt()পদ্ধতি কল করার পরে এটি ঘটে। UI প্রদর্শন করা হচ্ছে কিনা তা নির্দেশ করার জন্য বিজ্ঞপ্তিতে একটি বুলিয়ান মান রয়েছে।স্কিপড মুহূর্ত: এটি ঘটে যখন ওয়ান ট্যাপ প্রম্পট একটি স্বয়ংক্রিয় বাতিল, একটি ম্যানুয়াল বাতিল, বা যখন Google একটি শংসাপত্র ইস্যু করতে ব্যর্থ হয়, যেমন যখন নির্বাচিত সেশনটি Google থেকে সাইন আউট হয়।
এই ক্ষেত্রে, আমরা সুপারিশ করছি যে আপনি পরবর্তী পরিচয় প্রদানকারীর সাথে যোগাযোগ চালিয়ে যান, যদি থাকে।
খারিজ মুহূর্ত: এটি ঘটে যখন Google সফলভাবে একটি শংসাপত্র পুনরুদ্ধার করে, বা কোনও ব্যবহারকারী শংসাপত্র পুনরুদ্ধার প্রবাহ বন্ধ করতে চায়৷ উদাহরণস্বরূপ, যখন ব্যবহারকারী লগইন ডায়ালগে তাদের ব্যবহারকারীর নাম এবং পাসওয়ার্ড ইনপুট করা শুরু করেন, আপনি
google.accounts.id.cancel()পদ্ধতিতে কল করতে পারেন যাতে One Tap প্রম্পট বন্ধ করা যায় এবং একটি খারিজ মুহূর্ত ট্রিগার করা যায়।
এইচটিএমএল
একটি JavaScript কলব্যাক ফাংশন নির্দিষ্ট করতে 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>
বোতাম এবং প্রম্পট
Google বোতাম দিয়ে সাইন ইন করুন এবং ওয়ান ট্যাপ প্রম্পট একক পৃষ্ঠায় একসাথে প্রদর্শিত হতে পারে।
এইচটিএমএল
g_id_onload এবং g_id_signin উপাদান উভয়ই অন্তর্ভুক্ত করে Google বোতাম এবং ওয়ান ট্যাপ প্রম্পট দিয়ে সাইন ইন করুন।
<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() উভয় ফাংশন কল করে Google বাটনের সাথে সাইন ইন করুন এবং ওয়ান ট্যাপ প্রম্পট প্রদর্শন করুন।
<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 সক্রিয় থাকে ব্রাউজারটি পৃষ্ঠার বিষয়বস্তুর উপরে ব্যবহারকারীর প্রম্পট প্রদর্শন করে।
শেষ ব্যবহারকারীরা প্রদর্শিত সমস্ত তথ্য দেখতে পাচ্ছেন তা নিশ্চিত করতে, Google One Tap অবশ্যই অন্য কোনও সামগ্রী দ্বারা কভার করা যাবে না। অন্যথায়, কিছু ক্ষেত্রে পপ-আপ উইন্ডো ট্রিগার হতে পারে।
আপনার পৃষ্ঠার লেআউট এবং উপাদানগুলির z-ইনডেক্স বৈশিষ্ট্যগুলি দুবার চেক করুন, নিশ্চিত করুন যে Google One Tap যেকোনও সময় অন্য কোনও সামগ্রী দ্বারা কভার করা হয়নি। UX প্রবাহ পরিবর্তনটি ট্রিগার হতে পারে এমনকি যখন সীমানায় শুধুমাত্র একটি পিক্সেল আবৃত থাকে।
শংসাপত্রের প্রতিক্রিয়া
শংসাপত্রের প্রতিক্রিয়া অন্তর্ভুক্ত একটি Google স্বাক্ষরিত 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 ওয়েব ক্লায়েন্টের অনুমোদিত রিডাইরেক্ট URI সেটিংসে URL যোগ করুন।
একটি রিডাইরেক্ট URI কনফিগার করতে HTML বা JavaScript ব্যবহার করুন।
এইচটিএমএল
<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'
});