জাভাস্ক্রিপ্ট কুইকস্টার্ট

কুইকস্টার্ট ব্যাখ্যা করে যে কীভাবে একটি অ্যাপ সেট আপ করতে হয় এবং চালাতে হয় যেটি একটি Google Workspace API কল করে।

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

একটি জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন তৈরি করুন যা Google টাস্ক API এ অনুরোধ করে।

উদ্দেশ্য

  • আপনার পরিবেশ সেট আপ করুন।
  • নমুনা সেট আপ করুন।
  • নমুনা চালান।

পূর্বশর্ত

  • Google Tasks সক্ষম করা একটি Google অ্যাকাউন্ট।

আপনার পরিবেশ সেট আপ করুন

এই কুইকস্টার্ট সম্পূর্ণ করতে, আপনার পরিবেশ সেট আপ করুন।

API সক্ষম করুন

Google API ব্যবহার করার আগে, আপনাকে একটি Google ক্লাউড প্রকল্পে সেগুলি চালু করতে হবে। আপনি একটি একক Google ক্লাউড প্রকল্পে এক বা একাধিক API চালু করতে পারেন৷

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

  1. Google ক্লাউড কনসোলে, মেনু > API এবং পরিষেবা > OAuth সম্মতি স্ক্রীনে যান।

    OAuth সম্মতি স্ক্রিনে যান

  2. ব্যবহারকারীর প্রকারের জন্য অভ্যন্তরীণ নির্বাচন করুন, তারপরে তৈরি করুন ক্লিক করুন।
  3. অ্যাপ রেজিস্ট্রেশন ফর্মটি পূরণ করুন, তারপর সংরক্ষণ করুন এবং চালিয়ে যান-এ ক্লিক করুন।

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

  5. আপনার অ্যাপ নিবন্ধন সারাংশ পর্যালোচনা করুন. পরিবর্তন করতে, সম্পাদনা ক্লিক করুন। অ্যাপ নিবন্ধন ঠিক আছে বলে মনে হলে, ড্যাশবোর্ডে ফিরে যান ক্লিক করুন।

একটি ওয়েব অ্যাপ্লিকেশনের জন্য শংসাপত্র অনুমোদন করুন

শেষ ব্যবহারকারীদের প্রমাণীকরণ করতে এবং আপনার অ্যাপে ব্যবহারকারীর ডেটা অ্যাক্সেস করতে, আপনাকে এক বা একাধিক OAuth 2.0 ক্লায়েন্ট আইডি তৈরি করতে হবে। Google-এর OAuth সার্ভারে একটি একক অ্যাপ শনাক্ত করতে একটি ক্লায়েন্ট আইডি ব্যবহার করা হয়। যদি আপনার অ্যাপ একাধিক প্ল্যাটফর্মে চলে, তাহলে আপনাকে অবশ্যই প্রতিটি প্ল্যাটফর্মের জন্য একটি পৃথক ক্লায়েন্ট আইডি তৈরি করতে হবে।
  1. Google ক্লাউড কনসোলে, মেনু > APIs & Services > Credentials- এ যান।

    শংসাপত্রে যান

  2. ক্রিয়েট ক্রেডেনশিয়াল > OAuth ক্লায়েন্ট আইডি ক্লিক করুন।
  3. অ্যাপ্লিকেশন প্রকার > ওয়েব অ্যাপ্লিকেশন ক্লিক করুন।
  4. নাম ক্ষেত্রে, শংসাপত্রের জন্য একটি নাম টাইপ করুন। এই নামটি শুধুমাত্র Google ক্লাউড কনসোলে দেখানো হয়।
  5. আপনার অ্যাপের সাথে সম্পর্কিত অনুমোদিত URI যোগ করুন:
    • ক্লায়েন্ট-সাইড অ্যাপস (জাভাস্ক্রিপ্ট) -অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন-এর অধীনে, URI যোগ করুন-এ ক্লিক করুন। তারপর, ব্রাউজার অনুরোধের জন্য ব্যবহার করার জন্য একটি URI লিখুন। এটি সেই ডোমেনগুলিকে চিহ্নিত করে যেগুলি থেকে আপনার অ্যাপ্লিকেশনটি OAuth 2.0 সার্ভারে API অনুরোধ পাঠাতে পারে৷
    • সার্ভার-সাইড অ্যাপস (জাভা, পাইথন, এবং আরও) -অথরাইজড রিডাইরেক্ট ইউআরআই-এর অধীনে, ইউআরআই যোগ করুন ক্লিক করুন। তারপর, একটি এন্ডপয়েন্ট URI লিখুন যেখানে OAuth 2.0 সার্ভার প্রতিক্রিয়া পাঠাতে পারে।
  6. তৈরি করুন ক্লিক করুন। OAuth ক্লায়েন্ট তৈরি করা স্ক্রীন প্রদর্শিত হবে, আপনার নতুন ক্লায়েন্ট আইডি এবং ক্লায়েন্টের গোপনীয়তা দেখাচ্ছে।

    ক্লায়েন্ট আইডি নোট করুন। ক্লায়েন্ট গোপনীয়তা ওয়েব অ্যাপ্লিকেশনের জন্য ব্যবহার করা হয় না.

  7. ওকে ক্লিক করুন। নতুন তৈরি শংসাপত্রটি OAuth 2.0 ক্লায়েন্ট আইডির অধীনে প্রদর্শিত হয়।

এই শংসাপত্রগুলির একটি নোট করুন কারণ এই কুইকস্টার্টে পরে আপনার প্রয়োজন হবে৷

একটি API কী তৈরি করুন

  1. Google ক্লাউড কনসোলে, মেনু > APIs & Services > Credentials- এ যান।

    শংসাপত্রে যান

  2. শংসাপত্র তৈরি করুন > API কী ক্লিক করুন।
  3. আপনার নতুন API কী প্রদর্শিত হয়৷
    • আপনার অ্যাপের কোডে ব্যবহারের জন্য আপনার API কী কপি করতে কপি ক্লিক করুন। API কীটি আপনার প্রকল্পের শংসাপত্রের "API কী" বিভাগেও পাওয়া যাবে।
    • উন্নত সেটিংস আপডেট করতে এবং আপনার API কী ব্যবহার সীমিত করতে সীমাবদ্ধ কী ক্লিক করুন। আরও বিশদ বিবরণের জন্য, API কী সীমাবদ্ধতা প্রয়োগ করা দেখুন।

নমুনা সেট আপ করুন

  1. আপনার কাজের ডিরেক্টরিতে, index.html নামে একটি ফাইল তৈরি করুন।

  2. index.html ফাইলে, নিম্নলিখিত নমুনা কোড পেস্ট করুন:

    tasks/quickstart/index.html
    <!DOCTYPE html>
<html>
  <head>
    <title>Tasks API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Tasks API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/tasks/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/tasks.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await fetchTaskLists();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print task lists.
       */
      async function fetchTaskLists() {
        let response;
        try {
          response = await gapi.client.tasks.tasklists.list({
            'maxResults': 10,
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const taskLists = response.result.items;
        if (!taskLists || taskLists.length == 0) {
          document.getElementById('content').innerText = 'No task lists found.';
          return;
        }
        // Flatten to string to display
        const output = taskLists.reduce(
            (str, taskList) => `${str}${taskList.title} (${taskList.id})\n`,
            'Task lists:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

    নিম্নলিখিতগুলি প্রতিস্থাপন করুন:

নমুনা চালান

  1. আপনার কাজের ডিরেক্টরিতে, http-সার্ভার প্যাকেজটি ইনস্টল করুন:

    npm install http-server

  2. আপনার কাজের ডিরেক্টরিতে, একটি ওয়েব সার্ভার শুরু করুন:

    npx http-server -p 8000
  1. আপনার ব্রাউজারে, http://localhost:8000 এ নেভিগেট করুন।
  2. আপনি অ্যাক্সেস অনুমোদন করার জন্য একটি প্রম্পট দেখতে পাচ্ছেন:
    1. আপনি যদি ইতিমধ্যে আপনার Google অ্যাকাউন্টে সাইন ইন না করে থাকেন, প্রম্পট করা হলে সাইন ইন করুন৷ আপনি একাধিক অ্যাকাউন্টে সাইন ইন করে থাকলে, অনুমোদনের জন্য ব্যবহার করার জন্য একটি অ্যাকাউন্ট নির্বাচন করুন।
    2. স্বীকার করুন ক্লিক করুন.

আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন চালায় এবং Google টাস্ক API কল করে।

পরবর্তী পদক্ষেপ