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

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

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

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

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

সেটআপ

আপনার Google API ক্লায়েন্ট আইডি পান গাইডে বর্ণিত ধাপগুলি অনুসরণ করে একটি ক্লায়েন্ট আইডি খুঁজুন বা তৈরি করুন৷ এর পরে, আপনার সাইটের পৃষ্ঠাগুলিতে ক্লায়েন্ট লাইব্রেরি যোগ করুন যেগুলিকে Google API কল করা হবে। অবশেষে, টোকেন ক্লায়েন্ট শুরু করুন। সাধারণত, এটি ক্লায়েন্ট লাইব্রেরির onload হ্যান্ডলারের মধ্যে করা হয়।

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

আপনার ওয়েব অ্যাপের ক্লায়েন্ট আইডি দিয়ে একটি নতুন টোকেন ক্লায়েন্ট শুরু করতে 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>

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

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

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

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

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

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

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

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

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

Ajax

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 এ প্রতিটি কল একটি ব্যবহারকারীর সম্মতি মুহূর্তকে ট্রিগার করে, আপনার অ্যাপটি শুধুমাত্র সেই বিভাগগুলির জন্য প্রয়োজনীয় সংস্থানগুলিতে অ্যাক্সেস পাবে যা একজন ব্যবহারকারী প্রসারিত করতে বেছে নেয়, এইভাবে ব্যবহারকারীর পছন্দের মাধ্যমে সম্পদ ভাগাভাগি সীমিত করে।

একাধিক ওয়েব পেজ

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

বহু-পৃষ্ঠার অ্যাপ
ওয়েব পেজ কোড
পৃষ্ঠা 1. পড়ার জন্য ডক্স 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
পৃষ্ঠা 2. আসন্ন ঘটনা 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
পৃষ্ঠা 3. ফটো ক্যারাউজেল 
  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 ব্যবহার করে প্রতিটি পৃষ্ঠা লোডের জন্য অনুরোধ করা যেতে পারে।

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

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

Google API-এর সাথে 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 কীভাবে ব্যবহার করবেন তা দেখুন।

পরবর্তী বিভাগে আরও জটিল API-এর সাথে কীভাবে সহজে একীভূত করা যায় তা কভার করে।

Google APIs JavaScript লাইব্রেরির সাথে কাজ করা

টোকেন ক্লায়েন্ট জাভাস্ক্রিপ্টের জন্য Google 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);
  });