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

google.accounts.oauth2 জাভাস্ক্রিপ্ট লাইব্রেরিটি আপনাকে ব্যবহারকারীর সম্মতি চাইতে এবং ব্যবহারকারীর ডেটা নিয়ে কাজ করার জন্য একটি অ্যাক্সেস টোকেন পেতে সাহায্য করে। এটি OAuth 2.0 ইমপ্লিসিট গ্র্যান্ট ফ্লো-এর উপর ভিত্তি করে তৈরি এবং এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি REST ও CORS ব্যবহার করে সরাসরি গুগল এপিআই কল করতে পারেন, অথবা আমাদের আরও জটিল এপিআইগুলোতে নমনীয় অ্যাক্সেসের জন্য জাভাস্ক্রিপ্টের জন্য আমাদের গুগল এপিআই ক্লায়েন্ট লাইব্রেরি (যা gapi.client নামেও পরিচিত) ব্যবহার করতে পারেন।

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

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

পুরোনো ‘OAuth 2.0 for Client-side Web Applications’ গাইডে বর্ণিত কৌশলগুলোর পরিবর্তে এখানে বর্ণিত পদ্ধতি অনুসরণ করার পরামর্শ দেওয়া হচ্ছে।

পূর্বশর্ত

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

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

আপনার ওয়েব অ্যাপের ক্লায়েন্ট আইডি দিয়ে একটি নতুন টোকেন ক্লায়েন্ট চালু করতে initTokenClient() কল করুন, এতে ব্যবহারকারীর অ্যাক্সেসের জন্য প্রয়োজনীয় এক বা একাধিক স্কোপের একটি তালিকা অন্তর্ভুক্ত করতে হবে:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

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

টোকেন ইউএক্স ফ্লো চালু করতে এবং একটি অ্যাক্সেস টোকেন পেতে requestAccessToken() মেথডটি ব্যবহার করুন। গুগল ব্যবহারকারীকে নিম্নলিখিত কাজগুলো করতে অনুরোধ করে:

• তাদের অ্যাকাউন্ট বেছে নিন,
• যদি আগে থেকে সাইন-ইন করা না থাকে, তাহলে গুগল অ্যাকাউন্টে সাইন-ইন করুন।
• আপনার ওয়েব অ্যাপকে অনুরোধকৃত প্রতিটি স্কোপ অ্যাক্সেস করার জন্য সম্মতি দিন।

ব্যবহারকারীর একটি অঙ্গভঙ্গি টোকেন প্রবাহকে সক্রিয় করে:

<button onclick="client.requestAccessToken();">Authorize me</button>

এরপর গুগল আপনার কলব্যাক হ্যান্ডলারে একটি TokenResponse ফেরত পাঠায়, যেটিতে একটি অ্যাক্সেস টোকেন এবং ব্যবহারকারী যেসব স্কোপে অ্যাক্সেস দিয়েছেন তার একটি তালিকা অথবা একটি ত্রুটি থাকে।

ব্যবহারকারীরা অ্যাকাউন্ট চুজারের বা সাইন-ইন উইন্ডো বন্ধ করে দিতে পারেন, সেক্ষেত্রে আপনার কলব্যাক ফাংশনটি চালু হবে না।

সম্মতি কীভাবে পরিচালনা করবেন

গুগলের OAuth 2.0 পলিসিগুলো পুঙ্খানুপুঙ্খভাবে পর্যালোচনা করার পরেই আপনার অ্যাপের ডিজাইন এবং ইউজার এক্সপেরিয়েন্স বাস্তবায়ন করা উচিত। এই পলিসিগুলোতে একাধিক স্কোপ নিয়ে কাজ করা, কখন ও কীভাবে ব্যবহারকারীর সম্মতি গ্রহণ করতে হবে এবং আরও অনেক বিষয় অন্তর্ভুক্ত রয়েছে।

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

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

তবে, এর ব্যতিক্রমও আছে। যেসব গুগল ওয়ার্কস্পেস এন্টারপ্রাইজ অ্যাপে ডোমেন-ব্যাপী কর্তৃত্ব অর্পণ করা আছে অথবা যেগুলোকে 'বিশ্বস্ত' (Trusted) হিসেবে চিহ্নিত করা হয়েছে, সেগুলো সুনির্দিষ্ট অনুমতির সম্মতি স্ক্রিনটি এড়িয়ে যায়। এই অ্যাপগুলোর ক্ষেত্রে, ব্যবহারকারীরা সুনির্দিষ্ট অনুমতির সম্মতি স্ক্রিনটি দেখতে পাবেন না। এর পরিবর্তে, আপনার অ্যাপটি হয় অনুরোধ করা সমস্ত স্কোপ পাবে অথবা কোনোটিই পাবে না।

আরও বিস্তারিত তথ্যের জন্য, কীভাবে সূক্ষ্ম অনুমতি পরিচালনা করতে হয় তা দেখুন।

ক্রমবর্ধমান অনুমোদন

ওয়েব অ্যাপের ক্ষেত্রে, নিম্নলিখিত দুটি উচ্চ-স্তরের সিনারিও ব্যবহার করে ইনক্রিমেন্টাল অথরাইজেশন প্রদর্শন করা হয়েছে:

• একটি এক-পৃষ্ঠার এজ্যাক্স অ্যাপ, যা প্রায়শই রিসোর্সগুলিতে ডাইনামিক অ্যাক্সেসের জন্য XMLHttpRequest ব্যবহার করে।
• একাধিক ওয়েব-পেজ ও রিসোর্স পৃথকভাবে এবং পেজ-ভিত্তিক ব্যবস্থাপনায় পরিচালিত হয়।

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

আয়াক্স

requestAccessToken() ফাংশনটি একাধিকবার কল করে এবং OverridableTokenClientConfig অবজেক্টের scope প্যারামিটার ব্যবহার করে প্রয়োজনের সময় ও শুধুমাত্র আবশ্যক হলেই স্বতন্ত্র স্কোপগুলোর জন্য অনুরোধ জানিয়ে আপনার অ্যাপে ইনক্রিমেন্টাল অথরাইজেশনের সুবিধা যোগ করুন। এই উদাহরণে, ব্যবহারকারীর কোনো অঙ্গভঙ্গির মাধ্যমে একটি সংকুচিত কন্টেন্ট সেকশন প্রসারিত হওয়ার পরেই কেবল রিসোর্সগুলোর জন্য অনুরোধ করা হবে এবং সেগুলো দৃশ্যমান হবে।

        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
      

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );
        

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );
        

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );
        

requestAccessToken এর প্রতিটি কল ব্যবহারকারীর সম্মতির একটি মুহূর্ত তৈরি করে। ব্যবহারকারী যে অংশটি প্রসারিত করতে বেছে নেবেন, আপনার অ্যাপ কেবল সেই অংশটির জন্যই প্রয়োজনীয় রিসোর্সগুলো অ্যাক্সেস করতে পারবে, যার ফলে ব্যবহারকারীর পছন্দের মাধ্যমে রিসোর্স শেয়ারিং সীমিত থাকবে।

একাধিক ওয়েব-পৃষ্ঠা

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

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
          

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
          

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();
          

প্রতিটি পৃষ্ঠা লোড হওয়ার সময় initTokenClient() এবং requestAccessToken() কল করার মাধ্যমে প্রয়োজনীয় স্কোপের জন্য অনুরোধ করে এবং একটি অ্যাক্সেস টোকেন সংগ্রহ করে। এই ক্ষেত্রে, স্কোপের মাধ্যমে ব্যবহারকারীর কার্যকারিতা এবং রিসোর্সসমূহকে স্পষ্টভাবে আলাদা করার জন্য স্বতন্ত্র ওয়েব পৃষ্ঠা ব্যবহার করা হয়। বাস্তব পরিস্থিতিতে, স্বতন্ত্র পৃষ্ঠাগুলো একাধিক সম্পর্কিত স্কোপের জন্য অনুরোধ করতে পারে।

সূক্ষ্ম অনুমতি

সকল পরিস্থিতিতেই সূক্ষ্ম অনুমতি একই ভাবে পরিচালনা করা হয়; requestAccessToken() আপনার কলব্যাক ফাংশনটি চালু করার পর এবং একটি অ্যাক্সেস টোকেন ফেরত আসার পর, hasGrantedAllScopes() বা hasGrantedAnyScope() ব্যবহার করে যাচাই করুন যে ব্যবহারকারী অনুরোধ করা স্কোপগুলো অনুমোদন করেছেন কিনা। উদাহরণস্বরূপ:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

পূর্ববর্তী সেশন বা অনুরোধ থেকে আগে গৃহীত যেকোনো অনুদানও প্রতিক্রিয়ার অন্তর্ভুক্ত করা হবে। ব্যবহারকারীর সম্মতির একটি রেকর্ড প্রতিটি ব্যবহারকারী এবং ক্লায়েন্ট আইডি অনুসারে রক্ষণাবেক্ষণ করা হয় এবং initTokenClient() বা requestAccessToken() -এর একাধিক কলের পরেও তা বজায় থাকে। ডিফল্টরূপে, ব্যবহারকারীর সম্মতি শুধুমাত্র প্রথমবার আপনার ওয়েবসাইট ভিজিট করার সময় এবং একটি নতুন স্কোপের জন্য অনুরোধ করার সময় প্রয়োজন হয়, কিন্তু টোকেন ক্লায়েন্ট কনফিগারেশন অবজেক্টে prompt=consent ব্যবহার করে প্রতিটি পেজ লোডের সময়ও এটি অনুরোধ করা যেতে পারে।

টোকেন নিয়ে কাজ করুন

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

গুগল এপিআই-এর সাথে REST এবং CORS ব্যবহার করুন

REST এবং CORS ব্যবহার করে গুগল এপিআই-তে প্রমাণীকৃত অনুরোধ পাঠানোর জন্য একটি অ্যাক্সেস টোকেন ব্যবহার করা যেতে পারে। এটি ব্যবহারকারীদের সাইন-ইন করতে, সম্মতি প্রদান করতে, গুগলকে একটি অ্যাক্সেস টোকেন ইস্যু করতে এবং আপনার সাইটকে ব্যবহারকারীর ডেটা নিয়ে কাজ করতে সক্ষম করে।

এই উদাহরণে, tokenRequest() দ্বারা ফেরত আসা অ্যাক্সেস টোকেন ব্যবহার করে সাইন-ইন করা ব্যবহারকারীর আসন্ন ক্যালেন্ডার ইভেন্টগুলি দেখুন:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

গুগল এপিআই ডিফল্টরূপে CORS সমর্থন করে; একটি XMLHttpRequest বা fetch রিকোয়েস্টে অ্যাক্সেস টোকেন অন্তর্ভুক্ত করলে একটি CORS প্রিফ্লাইট চেক চালু হয়; এবং একটি GET বা POST রিকোয়েস্টের আগে একটি OPTIONS রিকোয়েস্টও এর অন্তর্ভুক্ত থাকে।

পরবর্তী অংশে আরও জটিল এপিআই-এর সাথে কীভাবে ইন্টিগ্রেট করতে হয় তা আলোচনা করা হয়েছে।

গুগল এপিআই জাভাস্ক্রিপ্ট লাইব্রেরির সাথে কাজ করুন

টোকেন ক্লায়েন্টটি জাভাস্ক্রিপ্টের জন্য গুগল এপিআই ক্লায়েন্ট লাইব্রেরির সাথে কাজ করে। নিম্নলিখিত কোড স্নিপেটটি দেখুন।

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

টোকেনের মেয়াদ শেষ

নিয়ম অনুযায়ী, অ্যাক্সেস টোকেনের মেয়াদ স্বল্পস্থায়ী হয়। যদি ব্যবহারকারীর সেশন শেষ হওয়ার আগেই অ্যাক্সেস টোকেনের মেয়াদ শেষ হয়ে যায়, তাহলে বাটন চাপার মতো ব্যবহারকারী-চালিত কোনো ইভেন্ট থেকে requestAccessToken() কল করে একটি নতুন টোকেন সংগ্রহ করুন।

সম্মতি প্রত্যাহার করতে একটি অ্যাক্সেস টোকেন ব্যবহার করুন।

আপনার অ্যাপকে দেওয়া সমস্ত স্কোপের জন্য ব্যবহারকারীর সম্মতি এবং রিসোর্সের অ্যাক্সেস বাতিল করতে google.accounts.oauth2.revoke মেথডটি কল করুন। এই অনুমতিটি বাতিল করার জন্য একটি বৈধ অ্যাক্সেস টোকেন প্রয়োজন।

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });