কোড মডেল ব্যবহার করুন

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

OAuth 2.0 অনুমোদন কোড প্রবাহের সারাংশ:

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

মূল বিষয়: আপনার ব্যাকএন্ড সার্ভারে, আপনি গুগলের টোকেন এন্ডপয়েন্ট কল করার মাধ্যমে একটি অথরাইজেশন কোডের বিনিময়ে রিফ্রেশ টোকেন এবং অ্যাক্সেস টোকেন গ্রহণ করেন।

পূর্বশর্ত

আপনার OAuth সম্মতি স্ক্রিন কনফিগার করতে, একটি ক্লায়েন্ট আইডি পেতে এবং ক্লায়েন্ট লাইব্রেরি লোড করতে সেটআপ- এ বর্ণিত ধাপগুলো অনুসরণ করুন।

একটি কোড ক্লায়েন্ট শুরু করুন

google.accounts.oauth2.initCodeClient() ` মেথডটি একটি কোড ক্লায়েন্ট চালু করে।

পপআপ বা পুনঃনির্দেশ মোড

আপনি রিডাইরেক্ট অথবা পপআপ মোড ইউজার ফ্লো ব্যবহার করে একটি অথরাইজেশন কোড শেয়ার করতে পারেন। রিডাইরেক্ট মোডে, আপনি আপনার সার্ভারে একটি OAuth2 অথরাইজেশন এন্ডপয়েন্ট হোস্ট করেন এবং গুগল ইউজার-এজেন্টকে এই এন্ডপয়েন্টে রিডাইরেক্ট করে, যেখানে অথরাইজেশন কোডটি একটি ইউআরএল প্যারামিটার হিসেবে শেয়ার করা হয়। পপআপ মোডের জন্য, আপনি একটি জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলার নির্ধারণ করেন, যা আপনার সার্ভারে অথরাইজেশন কোডটি পাঠায়। ভিজিটরদের আপনার সাইট থেকে বের না হয়েই একটি নির্বিঘ্ন ইউজার এক্সপেরিয়েন্স প্রদানের জন্য আপনি পপআপ মোড ব্যবহার করতে পারেন।

এর জন্য একটি ক্লায়েন্ট শুরু করতে:

• UX ফ্লো রিডাইরেক্ট করতে, ux_mode redirect এ সেট করুন এবং redirect_uri এর ভ্যালু আপনার প্ল্যাটফর্মের অথরাইজেশন কোড এন্ডপয়েন্টে সেট করুন। এই ভ্যালুটি অবশ্যই Google Cloud Console-এ আপনার কনফিগার করা OAuth 2.0 ক্লায়েন্টের অনুমোদিত রিডাইরেক্ট URI-গুলোর মধ্যে একটির সাথে হুবহু মিলতে হবে। এটিকে অবশ্যই রিডাইরেক্ট URI ভ্যালিডেশন নিয়মগুলোও মেনে চলতে হবে।

• পপআপ ইউএক্স ফ্লো-এর জন্য, ux_mode popup এ সেট করুন এবং callback এর ভ্যালু হিসেবে সেই ফাংশনের নাম দিন যা আপনি আপনার প্ল্যাটফর্মে অথরাইজেশন কোড পাঠাতে ব্যবহার করবেন। redirect_uri এর ডিফল্ট ভ্যালু হলো সেই পেজের `origin` যা initCodeClient কল করে। ফ্লোটি এই ভ্যালুটি পরে ব্যবহার করে যখন আপনি অথ কোডটিকে একটি অ্যাক্সেস বা রিফ্রেশ টোকেনের জন্য বিনিময় করেন। উদাহরণস্বরূপ, https://www.example.com/index.html initCodeClient কল করে এবং `origin: https://www.example.com হলো redirect_url এর ভ্যালু।

মূল বিষয়: ব্যবহারযোগ্যতা এবং নিরাপত্তার সর্বোত্তম ভারসাম্যের জন্য, আমরা অথরাইজেশন কোড মডেলের সাথে পপআপ মোড ইউএক্স ফ্লো ব্যবহার করার পরামর্শ দিই।

CSRF আক্রমণ থেকে রক্ষা করুন

রিডাইরেক্ট এবং পপআপ মোড ইউএক্স ফ্লো ক্রস-সাইট-রিকোয়েস্ট-ফোরজারি (CSRF) আক্রমণ প্রতিরোধে সাহায্য করার জন্য কিছুটা ভিন্ন কৌশল ব্যবহার করে। রিডাইরেক্ট মোডের জন্য, OAuth 2.0 স্টেট প্যারামিটার ব্যবহার করুন। স্টেট প্যারামিটার তৈরি এবং যাচাই করার বিষয়ে আরও জানতে RFC6749-এর ১০.১২ অনুচ্ছেদ ক্রস-সাইট রিকোয়েস্ট ফোরজারি দেখুন। পপআপ মোডের ক্ষেত্রে, আপনি আপনার রিকোয়েস্টগুলোতে একটি কাস্টম HTTP হেডার যোগ করেন এবং তারপর আপনার সার্ভারে নিশ্চিত করেন যে এটি প্রত্যাশিত মান এবং অরিজিনের সাথে মেলে।

অথোরাইজেশন কোড এবং CSRF হ্যান্ডলিং দেখানো কোড স্নিপেটটি দেখতে একটি UX মোড বেছে নিন:

পুনঃনির্দেশ মোড

এমন একটি ক্লায়েন্ট চালু করুন যেখানে গুগল ব্যবহারকারীর ব্রাউজারকে আপনার অথেনটিকেশন এন্ডপয়েন্টে রিডাইরেক্ট করবে এবং অথেনটিকেশন কোডটি একটি ইউআরএল প্যারামিটার হিসেবে শেয়ার করবে।

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: 'https://oauth2.example.com/code',
  state: 'YOUR_BINDING_VALUE'
});

মূল বিষয়: আপনার ব্যাকএন্ড সার্ভারের একটি এন্ডপয়েন্ট অথ কোড গ্রহণ ও যাচাই করে এবং সেটির বিনিময়ে অ্যাক্সেস ও রিফ্রেশ টোকেন প্রদান করে।

পপআপ মোড

একটি ক্লায়েন্ট চালু করুন যেখানে ব্যবহারকারী একটি পপআপ ডায়ালগের মাধ্যমে অনুমোদন প্রক্রিয়া শুরু করেন। সম্মতি দেওয়ার পর, গুগল একটি কলব্যাক ফাংশন ব্যবহার করে ব্যবহারকারীর ব্রাউজারে অনুমোদন কোডটি ফেরত পাঠায়। JS কলব্যাক হ্যান্ডলার থেকে পাঠানো একটি POST অনুরোধ ব্যাকএন্ড সার্ভারের একটি এন্ডপয়েন্টে অথোরাইজেশন কোডটি পৌঁছে দেয়, যেখানে আপনি প্রথমে এটি যাচাই করেন এবং তারপর OAuth ফ্লো-এর বাকি অংশ সম্পন্ন করেন।

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', "https://oauth2.example.com/code", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

মূল বিষয়: আপনার ব্যাকএন্ড সার্ভারের একটি এন্ডপয়েন্ট অথ কোড গ্রহণ ও যাচাই করে এবং সেটির বিনিময়ে অ্যাক্সেস ও রিফ্রেশ টোকেন প্রদান করে।

OAuth 2.0 কোড প্রবাহ চালু করুন

ইউজার ফ্লো চালু করতে কোড ক্লায়েন্টের requestCode() মেথডটি কল করুন:

<button onclick="client.requestCode();">Authorize with Google</button>

এর জন্য ব্যবহারকারীকে একটি গুগল অ্যাকাউন্টে সাইন-ইন করতে হবে এবং আপনার রিডাইরেক্ট এন্ডপয়েন্ট বা কলব্যাক হ্যান্ডলারে একটি অনুমোদন কোড ফেরত পাঠানোর আগে স্বতন্ত্র স্কোপগুলো শেয়ার করার জন্য সম্মতি দিতে হবে।

প্রমাণীকরণ কোড পরিচালনা

গুগল প্রতিটি ব্যবহারকারীর জন্য একটি অনন্য অনুমোদন কোড তৈরি করে, যা আপনি আপনার ব্যাকএন্ড সার্ভারে গ্রহণ ও যাচাই করেন।

পপআপ মোডের ক্ষেত্রে, ব্যবহারকারীর ব্রাউজারে চলমান callback দ্বারা নির্দিষ্ট হ্যান্ডলারটি আপনার প্ল্যাটফর্ম দ্বারা হোস্ট করা একটি এন্ডপয়েন্টে অনুমোদন কোডটি প্রেরণ করে।

রিডাইরেক্ট মোডের জন্য, গুগল redirect_uri দ্বারা নির্দিষ্ট এন্ডপয়েন্টে একটি GET রিকোয়েস্ট পাঠায় এবং `URL code` প্যারামিটারে অথরাইজেশন কোডটি শেয়ার করে। অথরাইজেশন কোডটি পেতে:

• যদি আপনার কোনো বিদ্যমান ইমপ্লিমেন্টেশন না থাকে, তাহলে একটি নতুন অথরাইজেশন এন্ডপয়েন্ট তৈরি করুন , অথবা

• আপনার বিদ্যমান এন্ডপয়েন্টটি GET রিকোয়েস্ট এবং URL প্যারামিটার গ্রহণ করার জন্য আপডেট করুন । পূর্বে, গুগল পেলোডে অথরাইজেশন কোড ভ্যালু সহ একটি PUT রিকোয়েস্ট পাঠাতো।

অনুমোদন এন্ডপয়েন্ট

আপনার অথরাইজেশন কোড এন্ডপয়েন্টকে অবশ্যই এই URL কোয়েরি স্ট্রিং প্যারামিটারসহ GET রিকোয়েস্টগুলো হ্যান্ডেল করতে হবে:

নাম	মূল্য
লেখক	ব্যবহারকারীর সাইন-ইন প্রমাণীকরণের জন্য অনুরোধ
কোড	গুগল দ্বারা তৈরি একটি OAuth2 অনুমোদন কোড
এইচডি	ব্যবহারকারী অ্যাকাউন্টের হোস্ট করা ডোমেইন
দ্রুত	ব্যবহারকারীর সম্মতি ডায়ালগ
পরিধি	অনুমোদনের জন্য এক বা একাধিক OAuth2 স্কোপের তালিকা, যা স্পেস দিয়ে আলাদা করা থাকবে।
রাজ্য	CRSF অবস্থা পরিবর্তনশীল

RFC 6749 অনুসারে, ক্লায়েন্টদের অবশ্যই অপরিচিত প্রতিক্রিয়া প্যারামিটারগুলিকে উপেক্ষা করতে হবে, সেগুলি পূর্ববর্তী সারণীতে তালিকাভুক্ত থাকুক বা না থাকুক।

example.com দ্বারা হোস্ট করা auth-code নামের একটি এন্ডপয়েন্টে URL প্যারামিটারসহ GET অনুরোধের উদাহরণ:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

যখন আপনি পূর্ববর্তী জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে, অথবা সরাসরি গুগল OAuth 2.0 এন্ডপয়েন্টে কল করার মাধ্যমে অথরাইজেশন কোড ফ্লো শুরু করেন, তখন গুগল একটি POST রিকোয়েস্ট পাঠায়।

HTTP অনুরোধের বডিতে পেলোড হিসাবে অনুমোদন কোড সম্বলিত POST অনুরোধের উদাহরণ:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

গুরুত্বপূর্ণ: পূর্বে অনুরোধের জন্য POST ব্যবহৃত হতো। আপনার হ্যান্ডলারকে GET এবং POST উভয় অনুরোধ গ্রহণ করার জন্য আপডেট করুন অথবা দুটি ভিন্ন এন্ডপয়েন্ট হোস্ট করার কথা বিবেচনা করুন, যদি আপনি পুরোনো JS লাইব্রেরি ব্যবহার চালিয়ে যেতে চান বা Google Identity Services লাইব্রেরি ব্যবহার করার সময় সরাসরি Google OAuth 2.0 এন্ডপয়েন্ট কল করতে চান।

অনুরোধটি যাচাই করুন

আপনার সার্ভারে CSRF আক্রমণ এড়াতে নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করুন।

রিডাইরেক্ট মোডের জন্য স্টেট প্যারামিটারের মান যাচাই করুন ।

পপআপ মোডের জন্য X-Requested-With: XmlHttpRequest হেডারটি উপস্থিত আছে কিনা তা নিশ্চিত করুন ।

আপনি প্রথমে অথ কোড অনুরোধটি সফলভাবে যাচাই করার পরেই কেবল গুগল থেকে রিফ্রেশ এবং অ্যাক্সেস টোকেন সংগ্রহ করার জন্য অগ্রসর হবেন।

অ্যাক্সেস এবং রিফ্রেশ টোকেন পান

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

"ওয়েব সার্ভার অ্যাপ্লিকেশনের জন্য OAuth 2.0 ব্যবহার " গাইডের ধাপ ৫: রিফ্রেশ এবং অ্যাক্সেস টোকেনের জন্য অনুমোদন কোড বিনিময় থেকে শুরু করে নির্দেশাবলী অনুসরণ করুন ।

দ্রষ্টব্য: আপনি যখন পপআপ মোড ব্যবহার করেন, তখন ধাপ ৫ এবং তার পরে ব্যবহৃত redirect_uri ভ্যালুটি হলো কলিং পেজের অরিজিন। উদাহরণস্বরূপ, https://www.example.com/index.html initCodeClient কল করে এবং এখানে `origin: https://www.example.com হলো redirect_url এর ভ্যালু।

টোকেন পরিচালনা করুন

আপনার প্ল্যাটফর্ম নিরাপদে রিফ্রেশ টোকেন সংরক্ষণ করে। যখন আপনি ব্যবহারকারীর অ্যাকাউন্ট মুছে ফেলেন, অথবা কোনো ব্যবহারকারী google.accounts.oauth2.revoke ব্যবহার করে বা সরাসরি https://myaccount.google.com/permissions থেকে তার সম্মতি প্রত্যাহার করে নেয়, তখন সংরক্ষিত রিফ্রেশ টোকেনগুলো মুছে ফেলুন।

ঐচ্ছিকভাবে, আপনি ক্রস-অ্যাকাউন্ট প্রোটেকশনের মাধ্যমে ব্যবহারকারীর অ্যাকাউন্ট সুরক্ষিত রাখতে RISC ব্যবহার করার কথা বিবেচনা করতে পারেন।

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