সেটআপ

আপনার ওয়েবসাইটে একটি 'সাইন ইন উইথ গুগল' বাটন অথবা ওয়ান ট্যাপ এবং অটোমেটিক সাইন-ইন প্রম্পট যোগ করতে হলে প্রথমে আপনাকে যা করতে হবে তা হলো:

1. একটি OAuth 2.0 ক্লায়েন্ট আইডি সংগ্রহ করুন,
2. OAuth ব্র্যান্ডিং এবং সেটিংস কনফিগার করুন,
3. Google Identity Services ক্লায়েন্ট লাইব্রেরি লোড করুন, এবং
4. ঐচ্ছিকভাবে বিষয়বস্তু সুরক্ষা নীতি সেটআপ করুন এবং
5. ক্রস-অরিজিন ওপেনার নীতি আপডেট করুন

আপনার গুগল এপিআই ক্লায়েন্ট আইডি পান

আপনার ওয়েবসাইটে গুগল আইডেন্টিটি সার্ভিসেস চালু করতে, আপনাকে প্রথমে একটি গুগল এপিআই ক্লায়েন্ট আইডি সেট আপ করতে হবে। এটি করার জন্য, নিম্নলিখিত ধাপগুলি সম্পন্ন করুন:

1. গুগল ক্লাউড কনসোলের ক্লায়েন্টস পৃষ্ঠাটি খুলুন।
2. একটি ক্লাউড কনসোল প্রজেক্ট তৈরি করুন বা নির্বাচন করুন। যদি আপনার কাছে ‘সাইন ইন উইথ গুগল’ বাটন বা ‘গুগল ওয়ান ট্যাপ’-এর জন্য আগে থেকেই কোনো প্রজেক্ট থাকে, তবে বিদ্যমান প্রজেক্ট এবং ওয়েব ক্লায়েন্ট আইডি ব্যবহার করুন। প্রোডাকশন অ্যাপ্লিকেশন তৈরি করার সময় একাধিক প্রজেক্টের প্রয়োজন হতে পারে, সেক্ষেত্রে আপনার পরিচালিত প্রতিটি প্রজেক্টের জন্য এই বিভাগের বাকি ধাপগুলো পুনরাবৃত্তি করুন।
3. নতুন ক্লায়েন্ট আইডি তৈরি করতে, 'Create client'-এ ক্লিক করুন এবং 'Application type'-এর জন্য 'Web application' নির্বাচন করুন। বিদ্যমান ক্লায়েন্ট আইডি ব্যবহার করতে, 'Web application' টাইপগুলোর মধ্যে থেকে একটি নির্বাচন করুন।

4. Add the URI of your website to Authorized JavaScript origins . The URI includes the scheme and fully qualified hostname only. For example, https://www.example.com .

5. ঐচ্ছিকভাবে, জাভাস্ক্রিপ্ট কলব্যাকের পরিবর্তে আপনার হোস্ট করা কোনো এন্ডপয়েন্টে রিডাইরেক্ট করার মাধ্যমে ক্রেডেনশিয়াল ফেরত দেওয়া যেতে পারে। যদি এমনটি হয়, তাহলে আপনার রিডাইরেক্ট ইউআরআইগুলো ‘ অনুমোদিত রিডাইরেক্ট ইউআরআই’ (Authorized redirect URIs) অংশে যোগ করুন। রিডাইরেক্ট ইউআরআই-এর মধ্যে স্কিম, সম্পূর্ণ হোস্টনেম এবং পাথ অন্তর্ভুক্ত থাকে এবং এগুলোকে অবশ্যই রিডাইরেক্ট ইউআরআই যাচাইকরণ নিয়ম মেনে চলতে হবে। উদাহরণস্বরূপ, https://www.example.com/auth-receiver ।

আপনার ওয়েব অ্যাপে data-client_id অথবা client_id ফিল্ড ব্যবহার করে ক্লায়েন্ট আইডি অন্তর্ভুক্ত করুন।

আপনার OAuth সম্মতি স্ক্রিন কনফিগার করুন

সাইন ইন উইথ গুগল এবং ওয়ান ট্যাপ অথেন্টিকেশন উভয়টিতেই একটি সম্মতি স্ক্রিন অন্তর্ভুক্ত থাকে, যা ব্যবহারকারীদের জানিয়ে দেয় কোন অ্যাপ্লিকেশন তাদের ডেটা অ্যাক্সেসের অনুরোধ করছে, তাদের কাছে কী ধরনের ডেটা চাওয়া হচ্ছে এবং কোন শর্তাবলী প্রযোজ্য।

1. ক্লাউড কনসোলের গুগল অথ প্ল্যাটফর্ম বিভাগের ব্র্যান্ডিং পৃষ্ঠাটি খুলুন।
2. অনুরোধ করা হলে, আপনার এইমাত্র তৈরি করা প্রজেক্টটি নির্বাচন করুন।

3. ব্র্যান্ডিং পেজে ফর্মটি পূরণ করুন এবং "সেভ" বাটনে ক্লিক করুন।

   1. অ্যাপ্লিকেশনের নাম: সম্মতি চাওয়ার অ্যাপ্লিকেশনের নাম। নামটি আপনার অ্যাপ্লিকেশনকে সঠিকভাবে প্রতিফলিত করবে এবং ব্যবহারকারীরা অন্যত্র যে অ্যাপ্লিকেশনের নাম দেখে থাকেন, তার সাথে সামঞ্জস্যপূর্ণ হবে।

   2. Application logo: This image is shown on the consent screen to help users to recognize your app. The logo is shown on Sign In With Google consent screen and on account settings , but is not shown on One Tap dialog.

   3. সহায়তা ইমেল: ব্যবহারকারী সহায়তার জন্য এবং গুগল ওয়ার্কস্পেস প্রশাসকদের কাছে, যারা তাদের ব্যবহারকারীদের জন্য আপনার অ্যাপ্লিকেশনে অ্যাক্সেস মূল্যায়ন করেন, তাদের জন্য সম্মতি স্ক্রিনে এটি দেখানো হয়। ব্যবহারকারী যখন অ্যাপ্লিকেশনটির নামে ক্লিক করেন, তখন 'সাইন ইন উইথ গুগল' সম্মতি স্ক্রিনে এই ইমেল ঠিকানাটি তাদের দেখানো হয়।

   4. অনুমোদিত ডোমেইন: আপনাকে এবং আপনার ব্যবহারকারীদের সুরক্ষিত রাখতে, গুগল শুধুমাত্র সেইসব অ্যাপ্লিকেশনকেই অনুমোদিত ডোমেইন ব্যবহার করার অনুমতি দেয়, যেগুলো OAuth ব্যবহার করে প্রমাণীকরণ করে। আপনার অ্যাপ্লিকেশনের লিঙ্কগুলো অবশ্যই অনুমোদিত ডোমেইনে হোস্ট করা থাকতে হবে। আরও জানুন ।

   5. অ্যাপ্লিকেশন হোমপেজ লিঙ্ক: 'সাইন ইন উইথ গুগল' সম্মতি স্ক্রিনে এবং 'কন্টিনিউ অ্যাজ' বাটনের নিচে ওয়ান-ট্যাপ জিডিপিআর-সম্মত ডিসক্লেইমার তথ্যে দেখানো হয়। অবশ্যই একটি অনুমোদিত ডোমেইনে হোস্ট করা থাকতে হবে।

   6. অ্যাপ্লিকেশন গোপনীয়তা নীতি লিঙ্ক: 'সাইন ইন উইথ গুগল' সম্মতি স্ক্রিনে এবং 'কন্টিনিউ অ্যাজ' বাটনের নিচে ওয়ান-ট্যাপ জিডিপিআর-সম্মত দাবিত্যাগ তথ্যে দেখানো হয়। অবশ্যই একটি অনুমোদিত ডোমেইনে হোস্ট করা থাকতে হবে।

   7. অ্যাপ্লিকেশন পরিষেবার শর্তাবলীর লিঙ্ক (ঐচ্ছিক): 'সাইন ইন উইথ গুগল' সম্মতি স্ক্রিনে এবং 'কন্টিনিউ অ্যাজ' বাটনের নিচে ওয়ান-ট্যাপ জিডিপিআর-সম্মত দাবিত্যাগ তথ্যে দেখানো হয়। অবশ্যই একটি অনুমোদিত ডোমেইনে হোস্ট করা থাকতে হবে।

4. আপনার অ্যাপের জন্য স্কোপ কনফিগার করতে ডেটা অ্যাক্সেস পৃষ্ঠায় যান।

   1. গুগল এপিআই-এর জন্য স্কোপ : স্কোপ আপনার অ্যাপ্লিকেশনকে ব্যবহারকারীর ব্যক্তিগত ডেটা অ্যাক্সেস করার অনুমতি দেয়। অথেনটিকেশনের জন্য, ডিফল্ট স্কোপ (ইমেল, প্রোফাইল, ওপেনআইডি) যথেষ্ট; আপনার কোনো সংবেদনশীল স্কোপ যোগ করার প্রয়োজন নেই। সাধারণত, শুরুতেই স্কোপের জন্য অনুরোধ না করে, যখন অ্যাক্সেসের প্রয়োজন হয়, তখন পর্যায়ক্রমে অনুরোধ করাই উত্তম।

5. 'ভেরিফিকেশন স্ট্যাটাস' দেখুন, যদি আপনার অ্যাপ্লিকেশনটির ভেরিফিকেশনের প্রয়োজন হয়, তাহলে ভেরিফিকেশনের জন্য আপনার অ্যাপ্লিকেশনটি জমা দিতে 'সাবমিট ফর ভেরিফিকেশন' বোতামে ক্লিক করুন। বিস্তারিত জানার জন্য OAuth ভেরিফিকেশনের প্রয়োজনীয়তাগুলো দেখুন।

সাইন-ইন করার সময় OAuth সেটিংস প্রদর্শন

চিত্র ১. ক্রোমে ওয়ান ট্যাপ দ্বারা প্রদর্শিত OAuth সম্মতি সেটিংস।

ক্লায়েন্ট লাইব্রেরি লোড করুন

ব্যবহারকারী সাইন ইন করতে পারেন এমন যেকোনো পৃষ্ঠায় Google Identity Services ক্লায়েন্ট লাইব্রেরি লোড করা নিশ্চিত করুন। নিম্নলিখিত কোড স্নিপেটটি ব্যবহার করুন:

<script src="https://accounts.google.com/gsi/client" async></script>

async অ্যাট্রিবিউট ব্যবহার করে স্ক্রিপ্টটি লোড করলে আপনি আপনার পেজ লোডিং স্পিড অপ্টিমাইজ করতে পারবেন।

লাইব্রেরিটি যে সকল মেথড ও প্রপার্টি সমর্থন করে, তার তালিকার জন্য HTML এবং JavaScript API রেফারেন্স দেখুন।

বিষয়বস্তু নিরাপত্তা নীতি

ঐচ্ছিক হলেও, আপনার অ্যাপকে সুরক্ষিত রাখতে এবং ক্রস-সাইট স্ক্রিপ্টিং (XSS) আক্রমণ প্রতিরোধ করতে একটি কন্টেন্ট সিকিউরিটি পলিসি (Content Security Policy) ব্যবহার করার পরামর্শ দেওয়া হয়। আরও জানতে, CSP-এর পরিচিতি এবং CSP ও XSS দেখুন।

আপনার কন্টেন্ট সিকিউরিটি পলিসিতে এক বা একাধিক নির্দেশিকা অন্তর্ভুক্ত থাকতে পারে, যেমন connect-src , frame-src , script-src , style-src , বা default-src ।

যদি আপনার CSP-তে নিম্নলিখিত বিষয়গুলো অন্তর্ভুক্ত থাকে:

• connect-src ডিরেক্টিভে https://accounts.google.com/gsi/ /` যোগ করলে, কোনো পেজ গুগল আইডেন্টিটি সার্ভিসেস সার্ভার-সাইড এন্ডপয়েন্টগুলোর প্যারেন্ট ইউআরএল লোড করতে পারবে।
• One Tap এবং Sign In With Google বাটন iframe-গুলোর প্যারেন্ট URL-কে অনুমতি দিতে frame-src ডিরেক্টিভে https://accounts.google.com/gsi/ যোগ করুন।
• script-src directive, add https://accounts.google.com/gsi/client to allow the URL of the Google Identity Services JavaScript library.
• Google Identity Services স্টাইলশীটগুলির URL-কে অনুমতি দিতে style-src ডিরেক্টিভে https://accounts.google.com/gsi/style যোগ করুন।
• default-src ডিরেক্টিভটি ব্যবহৃত হলে, এটি একটি ফলব্যাক হিসেবে কাজ করে যদি এর পূর্ববর্তী কোনো ডিরেক্টিভ ( connect-src , frame-src , script-src , বা style-src ) নির্দিষ্ট করা না থাকে। কোনো পেজকে Google Identity Services সার্ভার-সাইড এন্ডপয়েন্টগুলোর প্যারেন্ট ইউআরএল লোড করার অনুমতি দিতে https://accounts.google.com/gsi/ যোগ করুন।

connect-src ব্যবহার করার সময় স্বতন্ত্র GIS URL তালিকাভুক্ত করা এড়িয়ে চলুন। এটি GIS আপডেট করার সময় ব্যর্থতা কমাতে সাহায্য করে। উদাহরণস্বরূপ, https://accounts.google.com/gsi/status যোগ করার পরিবর্তে GIS প্যারেন্ট URL https://accounts.google.com/gsi/ ব্যবহার করুন।

এই উদাহরণ প্রতিক্রিয়া হেডারটি গুগল আইডেন্টিটি সার্ভিসেসকে সফলভাবে লোড এবং কার্যকর করতে সাহায্য করে:

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/;

ক্রস অরিজিন ওপেনার নীতি

সফলভাবে পপআপ তৈরি করার জন্য, 'Sign In With Google' বাটন এবং 'Google One Tap'-এর ক্ষেত্রে আপনার Cross-Origin-Opener-Policy (COOP)-তে পরিবর্তনের প্রয়োজন হতে পারে।

যখন FedCM সক্রিয় করা হয়, তখন ব্রাউজার সরাসরি পপআপ প্রদর্শন করে এবং কোনো পরিবর্তনের প্রয়োজন হয় না।

তবে, যখন FedCM নিষ্ক্রিয় থাকে, তখন COOP হেডারটি সেট করুন:

• same-origin এবং
• include same-origin-allow-popups .

সঠিক হেডার সেট করতে ব্যর্থ হলে উইন্ডোগুলোর মধ্যে যোগাযোগ বিচ্ছিন্ন হয়ে যায়, যার ফলে একটি ফাঁকা পপ-আপ উইন্ডো বা অনুরূপ বাগ দেখা দেয়।