এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

একটি জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন তৈরি করুন যা পিপল এপিআই (People API)-তে অনুরোধ পাঠায়।

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

এই কুইকস্টার্টটি অথেনটিকেশন এবং অথরাইজেশন ফ্লো-এর কিছু খুঁটিনাটি বিষয় সামলানোর জন্য গুগল ওয়ার্কস্পেসের প্রস্তাবিত এপিআই ক্লায়েন্ট লাইব্রেরি ব্যবহার করে।

উদ্দেশ্য

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

পূর্বশর্ত

Node.js ও npm ইনস্টল করা আছে।
একটি গুগল ক্লাউড প্রকল্প ।

এপিআই অ্যাক্সেস সক্রিয় করা একটি গুগল ওয়ার্কস্পেস ডোমেইন।
ওই ডোমেইনে অ্যাডমিনিস্ট্রেটর অধিকারসহ একটি গুগল অ্যাকাউন্ট।

আপনার পরিবেশ তৈরি করুন

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

এপিআই সক্রিয় করুন

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

গুগল ক্লাউড কনসোলে পিপল এপিআই (People API) সক্রিয় করুন।
এপিআই সক্রিয় করুন

OAuth সম্মতি স্ক্রিন কনফিগার করুন

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

Google API কনসোলে, > Google Auth প্ল্যাটফর্ম > ব্র্যান্ডিং- এ যান।
ব্র্যান্ডিং-এ যান
আপনি যদি ইতিমধ্যেই Google Auth প্ল্যাটফর্মটি কনফিগার করে থাকেন, তাহলে আপনি Branding , Audience , এবং Data Access- এ নিম্নলিখিত OAuth Consent Screen সেটিংস কনফিগার করতে পারেন। যদি আপনি এমন কোনো বার্তা দেখতে পান যেখানে লেখা আছে ‘Google Auth প্ল্যাটফর্ম এখনও কনফিগার করা হয়নি’ , তাহলে Get Started-এ ক্লিক করুন:

'অ্যাপ ইনফরমেশন'- এর অধীনে 'অ্যাপ নেম' -এ অ্যাপটির জন্য একটি নাম লিখুন।
ব্যবহারকারী সহায়তা ইমেল- এ, এমন একটি সহায়তা ইমেল ঠিকানা বেছে নিন যেখানে ব্যবহারকারীরা তাদের সম্মতি সম্পর্কে কোনো প্রশ্ন থাকলে আপনার সাথে যোগাযোগ করতে পারে।
পরবর্তী ধাপে যান।
Audience-এর অধীনে Internal নির্বাচন করুন।
পরবর্তী ধাপে যান।
যোগাযোগের তথ্যের অধীনে, একটি ইমেল ঠিকানা লিখুন যেখানে আপনার প্রকল্পের যেকোনো পরিবর্তন সম্পর্কে আপনাকে জানানো যাবে।
পরবর্তী ধাপে যান।
Finish-এর অধীনে, Google API Services ব্যবহারকারীর ডেটা নীতি পর্যালোচনা করুন এবং যদি আপনি সম্মত হন, তাহলে I agree to the Google API Services: User Data Policy নির্বাচন করুন।
চালিয়ে যান-এ ক্লিক করুন।
তৈরি করুন- এ ক্লিক করুন।

আপাতত, আপনি স্কোপ যোগ করা এড়িয়ে যেতে পারেন। ভবিষ্যতে, যখন আপনি আপনার Google Workspace অর্গানাইজেশনের বাইরে ব্যবহারের জন্য কোনো অ্যাপ তৈরি করবেন, তখন আপনাকে অবশ্যই ইউজার টাইপ (User type) পরিবর্তন করে ‘এক্সটার্নাল’ ( External ) করতে হবে। এরপর আপনার অ্যাপের জন্য প্রয়োজনীয় অথরাইজেশন স্কোপগুলো যোগ করুন। আরও জানতে, সম্পূর্ণ ‘কনফিগার OAuth কনসেন্ট’ (Configure OAuth consent) গাইডটি দেখুন।

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

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

Google API কনসোলে, > Google Auth প্ল্যাটফর্ম > ক্লায়েন্টস- এ যান।
ক্লায়েন্টদের কাছে যান
ক্লায়েন্ট তৈরি করুন -এ ক্লিক করুন।
অ্যাপ্লিকেশন টাইপ > ওয়েব অ্যাপ্লিকেশন-এ ক্লিক করুন।
Name ফিল্ডে ক্রেডেনশিয়ালটির জন্য একটি নাম টাইপ করুন। এই নামটি শুধুমাত্র Google API Console-এ দেখানো হয়।
আপনার অ্যাপ সম্পর্কিত অনুমোদিত URI-গুলো যোগ করুন:
- ক্লায়েন্ট-সাইড অ্যাপস (জাভাস্ক্রিপ্ট) – ‘Authorized JavaScript origins’-এর অধীনে, ‘Add URI’-তে ক্লিক করুন। এরপর, ব্রাউজার রিকোয়েস্টের জন্য ব্যবহার করার উদ্দেশ্যে একটি URI লিখুন। এটি সেই ডোমেইনগুলোকে শনাক্ত করে, যেখান থেকে আপনার অ্যাপ্লিকেশন OAuth 2.0 সার্ভারে API রিকোয়েস্ট পাঠাতে পারবে।
- সার্ভার-সাইড অ্যাপস (জাভা, পাইথন, এবং আরও) – ‘Authorized redirect URIs’-এর অধীনে, ‘Add URI’-তে ক্লিক করুন। এরপর, একটি এন্ডপয়েন্ট URI লিখুন যেখানে OAuth 2.0 সার্ভার প্রতিক্রিয়া পাঠাতে পারবে।
তৈরি করুন- এ ক্লিক করুন।
নতুন তৈরি করা ক্রেডেনশিয়ালটি OAuth 2.0 ক্লায়েন্ট আইডি-এর অধীনে দেখা যায়।
ক্লায়েন্ট আইডিটি নোট করুন। ওয়েব অ্যাপ্লিকেশনের জন্য ক্লায়েন্ট সিক্রেট ব্যবহার করা হয় না।

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

একটি এপিআই কী তৈরি করুন

গুগল ক্লাউড কনসোলে, > এপিআই ও পরিষেবা > ক্রেডেনশিয়ালস- এ যান।
পরিচয়পত্রে যান
ক্রেডেনশিয়াল তৈরি করুন > এপিআই কী-তে ক্লিক করুন।
আপনার নতুন এপিআই কী প্রদর্শিত হচ্ছে।
- আপনার অ্যাপের কোডে ব্যবহারের জন্য আপনার এপিআই কী (API key) কপি করতে 'Copy তে ক্লিক করুন। এপিআই কী-টি আপনার প্রোজেক্টের ক্রেডেনশিয়ালস (credentials)-এর 'API Keys' সেকশনেও পাওয়া যাবে।
- অননুমোদিত ব্যবহার রোধ করতে, আমরা এপিআই কী কোথায় এবং কোন কোন এপিআই-এর জন্য ব্যবহার করা যাবে তা সীমাবদ্ধ করার সুপারিশ করি। আরও বিস্তারিত জানতে, ‘এপিআই সীমাবদ্ধতা যোগ করুন ’ দেখুন।

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

আপনার ওয়ার্কিং ডিরেক্টরিতে index.html নামে একটি ফাইল তৈরি করুন।

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

people/quickstart/index.html

গিটহাবে দেখুন

<!DOCTYPE html>
<html>
  <head>
    <title>People API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>People 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/people/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/contacts.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 listConnectionNames();
        };

        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 the display name if available for 10 connections.
       */
      async function listConnectionNames() {
        let response;
        try {
          // Fetch first 10 files
          response = await gapi.client.people.people.connections.list({
            'resourceName': 'people/me',
            'pageSize': 10,
            'personFields': 'names,emailAddresses',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const connections = response.result.connections;
        if (!connections || connections.length == 0) {
          document.getElementById('content').innerText = 'No connections found.';
          return;
        }
        // Flatten to string to display
        const output = connections.reduce(
            (str, person) => {
              if (!person.names || person.names.length === 0) {
                return `${str}Missing display name\n`;
              }
              return `${str}${person.names[0].displayName}\n`;
            },
            'Connections:\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>

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

YOUR_CLIENT_ID : যে ক্লায়েন্ট আইডিটি আপনি একটি ওয়েব অ্যাপ্লিকেশনের জন্য ক্রেডেনশিয়াল অনুমোদন করার সময় তৈরি করেছিলেন।
YOUR_API_KEY : আপনার তৈরি করা এপিআই কী।

নমুনাটি চালান

আপনার ওয়ার্কিং ডিরেক্টরিতে http-server প্যাকেজটি ইনস্টল করুন:
```
npm install http-server
```
আপনার ওয়ার্কিং ডিরেক্টরিতে একটি ওয়েব সার্ভার চালু করুন:
```
npx http-server -p 8000
```

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

আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটি রান করে এবং পিপল এপিআই-কে কল করে।

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

এপিআই এক্সপ্লোরারে গুগল ওয়ার্কস্পেস এপিআইগুলো ব্যবহার করে দেখুন।