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

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

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

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

ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশন গাইডের জন্য পুরানো OAuth 2.0- এর আওতাভুক্ত কৌশলগুলির পরিবর্তে এখানে বর্ণিত পদ্ধতি অনুসরণ করার পরামর্শ দেওয়া হচ্ছে।

পূর্বশর্ত

আপনার 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 টোকেন ফ্লো চালু করুন

টোকেন UX প্রবাহ ট্রিগার করতে এবং একটি অ্যাক্সেস টোকেন পেতে requestAccessToken() পদ্ধতি ব্যবহার করুন। Google ব্যবহারকারীকে নিম্নলিখিতগুলি করতে অনুরোধ করে:

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

একটি ব্যবহারকারীর অঙ্গভঙ্গি টোকেন প্রবাহকে ট্রিগার করে: <button onclick="client.requestAccessToken();">Authorize me</button>

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

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

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

Incremental authorization is a policy and app design methodology used to request access to resources, using scopes, only as needed rather than up-front and all at once. Users may approve or reject sharing of the individual resources requested by your app, this is known as granular permissions .

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

তবে, ব্যতিক্রম আছে। ডোমেন-ওয়াইড অথরিটি ডেলিগেশন অফ অথরিটি সহ Google Workspace Enterprise অ্যাপ বা Trusted হিসাবে চিহ্নিত অ্যাপগুলি, গ্রানুলার অনুমতি সম্মতি স্ক্রিনকে বাইপাস করে। এই অ্যাপগুলির জন্য, ব্যবহারকারীরা গ্রানুলার অনুমতি সম্মতি স্ক্রিন দেখতে পাবেন না। পরিবর্তে, আপনার অ্যাপ হয় সমস্ত অনুরোধ করা স্কোপ পাবে, অথবা কোনওটিই পাবে না।

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

বর্ধিত অনুমোদন

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

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

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

আয়াক্স

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

Ajax অ্যাপ
পৃষ্ঠা লোডের সময় টোকেন ক্লায়েন্টটি শুরু করুন:
        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 ব্যবহার করে Google API-তে প্রমাণীকরণকৃত অনুরোধ করার জন্য একটি অ্যাক্সেস টোকেন ব্যবহার করা যেতে পারে। এটি ব্যবহারকারীদের সাইন-ইন করতে, সম্মতি দিতে, Google-কে একটি অ্যাক্সেস টোকেন ইস্যু করতে এবং আপনার সাইটকে ব্যবহারকারীর ডেটার সাথে কাজ করতে সক্ষম করে।

এই উদাহরণে, 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();

Google API গুলি ডিফল্টরূপে CORS সমর্থন করে, যার মধ্যে XMLHttpRequest বা fetch অনুরোধে একটি অ্যাক্সেস টোকেন একটি CORS প্রিফ্লাইট চেক ট্রিগার করে; GET বা POST এর আগে একটি OPTIONS অনুরোধ।

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

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

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

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);
  });