আপনার ওয়েবসাইটে Google বোতাম বা ওয়ান ট্যাপ এবং স্বয়ংক্রিয় সাইন-ইন প্রম্পট দিয়ে একটি সাইন ইন যোগ করতে আপনাকে প্রথমে এটি করতে হবে:
- একটি OAuth 2.0 ক্লায়েন্ট আইডি পান,
- OAuth ব্র্যান্ডিং এবং সেটিংস কনফিগার করুন,
- Google Identity Services ক্লায়েন্ট লাইব্রেরি লোড করুন এবং
- ঐচ্ছিকভাবে বিষয়বস্তু নিরাপত্তা নীতি সেটআপ এবং
- ক্রস-অরিজিন ওপেনার নীতি আপডেট করুন
আপনার Google API ক্লায়েন্ট আইডি পান
আপনার ওয়েবসাইটে Google পরিচয় পরিষেবা সক্ষম করতে, আপনাকে প্রথমে একটি Google API ক্লায়েন্ট আইডি সেট আপ করতে হবে৷ এটি করতে, নিম্নলিখিত পদক্ষেপগুলি সম্পূর্ণ করুন:
- খুলুন এর .
- তৈরি করুন বা নির্বাচন করুন a প্রকল্প আপনার যদি ইতিমধ্যেই Google বোতাম বা Google One Tap দিয়ে সাইন ইন করার জন্য একটি প্রজেক্ট থাকে, তাহলে বিদ্যমান প্রোজেক্ট এবং ওয়েব ক্লায়েন্ট আইডি ব্যবহার করুন। উত্পাদন অ্যাপ্লিকেশন তৈরি করার সময়, একাধিক প্রকল্পের প্রয়োজন হতে পারে, আপনার পরিচালনা করা প্রতিটি প্রকল্পের জন্য এই বিভাগের অবশিষ্ট ধাপগুলি পুনরাবৃত্তি করুন।
- ক্লায়েন্ট তৈরি করুন ক্লিক করুন এবং অ্যাপ্লিকেশন প্রকারের জন্য একটি নতুন ক্লায়েন্ট আইডি তৈরি করতে ওয়েব অ্যাপ্লিকেশন নির্বাচন করুন। একটি বিদ্যমান ক্লায়েন্ট আইডি ব্যবহার করতে ওয়েব অ্যাপ্লিকেশনের একটি নির্বাচন করুন।
অনুমোদিত জাভাস্ক্রিপ্ট অরিজিনে আপনার ওয়েবসাইটের URI যোগ করুন। URI স্কিম এবং সম্পূর্ণরূপে যোগ্য হোস্টনাম অন্তর্ভুক্ত করে। উদাহরণস্বরূপ,
https://www.example.com।ঐচ্ছিকভাবে, জাভাস্ক্রিপ্ট কলব্যাকের পরিবর্তে আপনার হোস্ট করা একটি এন্ডপয়েন্টে রিডাইরেক্ট ব্যবহার করে শংসাপত্রগুলি ফেরত দেওয়া হতে পারে। যদি এটি হয়, তাহলে আপনার রিডাইরেক্ট URIগুলিকে অনুমোদিত রিডাইরেক্ট URI- তে যোগ করুন। রিডাইরেক্ট ইউআরআই-এর মধ্যে স্কিম, সম্পূর্ণ যোগ্য হোস্টনাম এবং পাথ অন্তর্ভুক্ত রয়েছে এবং অবশ্যই রিডাইরেক্ট ইউআরআই যাচাইকরণ নিয়ম মেনে চলতে হবে। উদাহরণস্বরূপ,
https://www.example.com/auth-receiver।
ডেটা-ক্লায়েন্ট_আইডি বা ক্লায়েন্ট_আইডি ক্ষেত্রগুলি ব্যবহার করে আপনার ওয়েব অ্যাপে ক্লায়েন্ট আইডি অন্তর্ভুক্ত করুন।
আপনার OAuth সম্মতি স্ক্রীন কনফিগার করুন
Google এর সাথে সাইন ইন করুন এবং ওয়ান ট্যাপ প্রমাণীকরণ উভয়ই একটি সম্মতি স্ক্রিন অন্তর্ভুক্ত করে যা ব্যবহারকারীদের তাদের ডেটা অ্যাক্সেসের অনুরোধকারী অ্যাপ্লিকেশন, তাদের কী ধরণের ডেটা চাওয়া হয়েছে এবং প্রযোজ্য শর্তাবলী জানায়৷
- খুলুন এর Google প্রমাণীকরণ প্ল্যাটফর্ম বিভাগের.
- অনুরোধ করা হলে, আপনি এইমাত্র তৈরি করা প্রকল্পটি নির্বাচন করুন।
উপর , ফর্মটি পূরণ করুন এবং "সংরক্ষণ করুন" বোতামে ক্লিক করুন।
আবেদনের নাম: সম্মতি চাওয়া আবেদনের নাম। নামটি আপনার অ্যাপ্লিকেশনটিকে সঠিকভাবে প্রতিফলিত করতে হবে এবং ব্যবহারকারীরা অন্য কোথাও যে অ্যাপ্লিকেশনটি দেখেন তার সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত।
অ্যাপ্লিকেশন লোগো: ব্যবহারকারীদের আপনার অ্যাপ চিনতে সাহায্য করার জন্য এই ছবিটি সম্মতি স্ক্রিনে দেখানো হয়েছে। লোগোটি সাইন ইন উইথ Google সম্মতি স্ক্রিনে এবং অ্যাকাউন্ট সেটিংসে দেখানো হয়, কিন্তু ওয়ান ট্যাপ ডায়ালগে দেখানো হয় না।
সমর্থন ইমেল: ব্যবহারকারী সমর্থনের জন্য সম্মতি স্ক্রিনে দেখানো হয়েছে এবং G Suite অ্যাডমিনিস্ট্রেটররা তাদের ব্যবহারকারীদের জন্য আপনার আবেদনের অ্যাক্সেস মূল্যায়ন করছে। এই ইমেল ঠিকানাটি ব্যবহারকারীদের দেখানো হয় সাইন ইন উইথ Google সম্মতি স্ক্রিনে যখন ব্যবহারকারী অ্যাপ্লিকেশনের নামে ক্লিক করেন।
অনুমোদিত ডোমেন: আপনাকে এবং আপনার ব্যবহারকারীদের সুরক্ষিত রাখতে, Google শুধুমাত্র OAuth ব্যবহার করে প্রমাণীকৃত অ্যাপ্লিকেশনগুলিকে অনুমোদিত ডোমেন ব্যবহার করার অনুমতি দেয়। আপনার অ্যাপ্লিকেশনের লিঙ্কগুলি অবশ্যই অনুমোদিত ডোমেনে হোস্ট করা উচিত। আরও জানুন
অ্যাপ্লিকেশানের হোমপেজ লিঙ্ক: সাইন ইন উইথ Google সম্মতি স্ক্রীনে দেখানো হয়েছে এবং "এভাবে চালিয়ে যান" বোতামের অধীনে ওয়ান-ট্যাপ জিডিপিআর অনুগত ডিসক্লেমার তথ্য। একটি অনুমোদিত ডোমেনে হোস্ট করা আবশ্যক।
অ্যাপ্লিকেশানের গোপনীয়তা নীতির লিঙ্ক: Google সম্মতি স্ক্রীনের সাথে সাইন ইনে দেখানো হয়েছে এবং "কন্টিনিউ এজ" বোতামের অধীনে ওয়ান-ট্যাপ জিডিপিআর সম্মত দাবিত্যাগের তথ্য। একটি অনুমোদিত ডোমেনে হোস্ট করা আবশ্যক।
অ্যাপ্লিকেশানের পরিষেবার শর্তাবলী লিঙ্ক (ঐচ্ছিক): Google-এর সম্মতি স্ক্রীনে সাইন-ইন করুন এবং "কন্টিনিউ এজ" বোতামের অধীনে ওয়ান-ট্যাপ জিডিপিআর মেনে চলা দাবিত্যাগের তথ্য দেখানো হয়েছে। একটি অনুমোদিত ডোমেনে হোস্ট করা আবশ্যক।
নেভিগেট করুন আপনার অ্যাপের জন্য স্কোপ কনফিগার করতে।
- Google API-এর জন্য স্কোপ : স্কোপগুলি আপনার অ্যাপ্লিকেশনকে আপনার ব্যবহারকারীর ব্যক্তিগত ডেটা অ্যাক্সেস করার অনুমতি দেয়। প্রমাণীকরণের জন্য, ডিফল্ট স্কোপ (ইমেল, প্রোফাইল, ওপেনআইডি) যথেষ্ট, আপনাকে কোনো সংবেদনশীল স্কোপ যোগ করতে হবে না। ক্রমবর্ধমানভাবে স্কোপের অনুরোধ করা একটি সর্বোত্তম অভ্যাস, যখন অ্যাক্সেসের প্রয়োজন হয়, সামনের পরিবর্তে।
"যাচাই স্থিতি" চেক করুন, যদি আপনার আবেদনের যাচাইকরণের প্রয়োজন হয় তাহলে যাচাইয়ের জন্য আপনার আবেদন জমা দিতে "যাচাইয়ের জন্য জমা দিন" বোতামে ক্লিক করুন। বিশদ বিবরণের জন্য OAuth যাচাইকরণের প্রয়োজনীয়তা পড়ুন।
সাইন-ইন করার সময় OAuth সেটিংসের প্রদর্শন
FedCM ব্যবহার করে এক ট্যাপ
Chrome-এ ব্যবহারকারীর সম্মতির সময় শীর্ষ-স্তরের অনুমোদিত ডোমেন প্রদর্শিত হয়। শুধুমাত্র ক্রস-অরিজিনে ওয়ান ট্যাপ ব্যবহার করে কিন্তু একই-সাইট আইফ্রেমগুলি একটি সমর্থিত পদ্ধতি।
FedCM ছাড়া এক ট্যাপ
ব্যবহারকারীর সম্মতির সময় আবেদনের নাম প্রদর্শিত হয়।
চিত্র 1. OAuth সম্মতি সেটিংস Chrome-এ One Tap দ্বারা প্রদর্শিত হয়।
ক্লায়েন্ট লাইব্রেরি লোড করুন
ব্যবহারকারী সাইন ইন করতে পারে এমন যেকোনো পৃষ্ঠায় Google আইডেন্টিটি সার্ভিসেস ক্লায়েন্ট লাইব্রেরি লোড করতে ভুলবেন না। নিম্নলিখিত কোড স্নিপেট ব্যবহার করুন:
<script src="https://accounts.google.com/gsi/client" async></script>
আপনি যদি async অ্যাট্রিবিউট দিয়ে স্ক্রিপ্ট লোড করেন তবে আপনি আপনার পৃষ্ঠা লোডিং গতি অপ্টিমাইজ করতে পারেন।
লাইব্রেরি সমর্থন করে এমন পদ্ধতি এবং বৈশিষ্ট্যগুলির তালিকার জন্য HTML এবং JavaScript API রেফারেন্সগুলি পড়ুন৷
বিষয়বস্তু নিরাপত্তা নীতি
ঐচ্ছিক হলেও, আপনার অ্যাপকে সুরক্ষিত করতে এবং ক্রস-সাইট স্ক্রিপ্টিং (XSS) আক্রমণ প্রতিরোধ করার জন্য একটি বিষয়বস্তু নিরাপত্তা নীতি সুপারিশ করা হয়। আরও জানতে, CSP এবং CSP এবং XSS- এর একটি ভূমিকা দেখুন।
আপনার বিষয়বস্তু নিরাপত্তা নীতিতে এক বা একাধিক নির্দেশ অন্তর্ভুক্ত থাকতে পারে, যেমন connect-src , frame-src , script-src , style-src , বা default-src ।
যদি আপনার CSP এর অন্তর্ভুক্ত থাকে:
-
connect-srcনির্দেশিকা,https://accounts.google.com/gsi/যোগ করুন যাতে Google আইডেন্টিটি সার্ভিস সার্ভার-সাইড এন্ডপয়েন্টের জন্য প্যারেন্ট ইউআরএল লোড করার অনুমতি দেওয়া হয়। -
frame-srcনির্দেশিকা, এক আলতো চাপুন এবং Google বোতাম iframes দিয়ে সাইন ইন করার জন্যhttps://accounts.google.com/gsi/যোগ করুন। -
script-srcনির্দেশিকা, Google আইডেন্টিটি সার্ভিস জাভাস্ক্রিপ্ট লাইব্রেরির URL-এর অনুমতি দিতেhttps://accounts.google.com/gsi/clientযোগ করুন। -
style-srcনির্দেশিকা, গুগল আইডেন্টিটি সার্ভিসেস স্টাইলশীটের URL-এর অনুমতি দিতেhttps://accounts.google.com/gsi/styleযোগ করুন। -
default-srcনির্দেশিকা, যদি ব্যবহার করা হয়, তাহলে একটি ফলব্যাক হয় যদি পূর্ববর্তী নির্দেশাবলীর (connect-src,frame-src,script-src, বাstyle-src) নির্দিষ্ট করা না থাকে, Google আইডেন্টিটি-সাইড পরিষেবার শেষ পয়েন্ট সার্ভারের জন্য একটি পৃষ্ঠাকে মূল URL লোড করার অনুমতি দিতেhttps://accounts.google.com/gsi/যোগ করুন।
connect-src ব্যবহার করার সময় পৃথক GIS URL তালিকাভুক্ত করা এড়িয়ে চলুন। যখন GIS আপডেট করা হয় তখন এটি ব্যর্থতা কমাতে সাহায্য করে। উদাহরণস্বরূপ, https://accounts.google.com/gsi/status যোগ করার পরিবর্তে GIS প্যারেন্ট URL https://accounts.google.com/gsi/ ব্যবহার করুন।
এই উদাহরণের প্রতিক্রিয়া শিরোনামটি Google পরিচয় পরিষেবাগুলিকে সফলভাবে লোড এবং কার্যকর করার অনুমতি দেয়:
Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;
ক্রস অরিজিন ওপেনার পলিসি
Google বোতাম এবং Google One Tap-এর মাধ্যমে সাইন ইন করার জন্য আপনার Cross-Origin-Opener-Policy (COOP) পরিবর্তনের প্রয়োজন হতে পারে যাতে সফলভাবে পপআপ তৈরি করা যায়।
FedCM সক্রিয় করা হলে ব্রাউজার সরাসরি পপআপ রেন্ডার করে এবং কোন পরিবর্তনের প্রয়োজন হয় না।
যাইহোক, যখন FedCM অক্ষম করা হয়, COOP হেডার সেট করুন:
-
same-originএবং -
same-origin-allow-popupsঅন্তর্ভুক্ত করুন।
সঠিক হেডার সেট করতে ব্যর্থ হলে উইন্ডোজের মধ্যে যোগাযোগ বিচ্ছিন্ন হয়ে যায়, যার ফলে একটি ফাঁকা পপ-আপ উইন্ডো বা অনুরূপ বাগ দেখা দেয়।