JavaScript কুইকস্টার্ট

এমন একটি JavaScript ওয়েব অ্যাপ্লিকেশন তৈরি করুন যা People API-তে অনুরোধ করে।

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

এই কুইকস্টার্ট যাচাইকরণ ও অনুমোদনের ফ্লোয়ের কিছু বিবরণ ম্যানেজ করতে Google Workspace-এর সাজেস্ট করা API ক্লায়েন্ট লাইব্রেরি ব্যবহার করে।

উদ্দেশ্য

• আপনার এনভায়রনমেন্ট সেট-আপ করুন।
• স্যাম্পেল সেট-আপ করুন।
• নমুনাটি চালান।

পূর্বশর্ত

• Node.js ও npm ইনস্টল করা আছে।
• Google Cloud প্রোজেক্ট।

• API অ্যাক্সেস চালু করা Google Workspace ডোমেন।
• অ্যাডমিনিস্ট্রেটরের বিশেষ সুবিধা সহ সেই ডোমেনে একটি Google অ্যাকাউন্ট।

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

এই কুইকস্টার্ট সম্পূর্ণ করতে, আপনার এনভায়রনমেন্ট সেট-আপ করুন।

API চালু করুন

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

• Google Cloud Console-এ People API চালু করুন।

  API চালু করুন

OAuth-এর সম্মতি সংক্রান্ত স্ক্রিন কনফিগার করা

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

1. Google API Console-এ, 'মেনু > Google Auth প্ল্যাটফর্ম > ব্র্যান্ডিং' বিকল্পে যান।

   ব্র্যান্ডিংয়ে যান

2. আপনি যদি আগে থেকেই Google Auth প্ল্যাটফর্ম কনফিগার করে থাকেন, তাহলে ব্র্যান্ডিং, দর্শক এবং ডেটা অ্যাক্সেস বিকল্পে গিয়ে নিম্নলিখিত OAuth-এর সম্মতি সংক্রান্ত স্ক্রিন সেটিংস কনফিগার করতে পারবেন। আপনি যদি Google Auth প্ল্যাটফর্ম এখনও কনফিগার করা হয়নি লেখা মেসেজ দেখতে পান, তাহলে শুরু করুন বিকল্পে ক্লিক করুন:
1. অ্যাপের তথ্য বিকল্পের অধীনে, অ্যাপের নাম বিকল্পে, অ্যাপের জন্য একটি নাম লিখুন।
2. ব্যবহারকারীর সহায়তা সংক্রান্ত ইমেল বিকল্পে, এমন একটি সহায়তা ইমেল আইডি বেছে নিন যেখানে ব্যবহারকারীরা তাদের সম্মতি সম্পর্কে প্রশ্ন থাকলে আপনার সাথে যোগাযোগ করতে পারবেন।
3. পরবর্তী বিকল্পে ক্লিক করুন।
4. দর্শক বিকল্পের অধীনে, ইন্টার্নাল বিকল্প বেছে নিন।
5. পরবর্তী বিকল্পে ক্লিক করুন।
6. যোগাযোগের তথ্য বিকল্পের মধ্যে, এমন একটি ইমেল আইডি লিখুন যেখানে আপনার প্রোজেক্টে কোনও পরিবর্তন হলে আপনাকে জানানো যাবে।
7. পরবর্তী বিকল্পে ক্লিক করুন।
8. শেষ করুন বিকল্পের মধ্যে, Google API পরিষেবা সংক্রান্ত ব্যবহারকারীর ডেটা নীতি পর্যালোচনা করুন এবং আপনি সম্মত হলে, আমি Google API পরিষেবা: ব্যবহারকারীর ডেটা নীতিতে সম্মতি জানাচ্ছি বিকল্প বেছে নিন।
9. চালিয়ে যান বিকল্পে ক্লিক করুন।
10. তৈরি করুন বিকল্পে ক্লিক করুন।
3. আপাতত, আপনি স্কোপ যোগ করা এড়িয়ে যেতে পারেন। ভবিষ্যতে, আপনার Google Workspace সংস্থার বাইরে ব্যবহারের জন্য কোনও অ্যাপ তৈরি করলে, আপনাকে অবশ্যই ব্যবহারকারীর ধরন পরিবর্তন করে এক্সটার্নাল করতে হবে। তারপর আপনার অ্যাপের জন্য প্রয়োজনীয় অনুমোদনের স্কোপ যোগ করুন। আরও জানতে, সম্পূর্ণ OAuth সম্মতি কনফিগার করুন নির্দেশিকা দেখুন।

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

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

1. Google Cloud Console-এ, 'মেনু > Google Auth প্ল্যাটফর্ম > ক্লায়েন্ট' বিকল্পে যান।

   ক্লায়েন্টে যান

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

   নতুন তৈরি করা ক্রেডেনশিয়াল OAuth 2.0 ক্লায়েন্ট আইডি-এর অধীনে দেখা যায়।

   মনে রাখবেন, ওয়েব অ্যাপ্লিকেশনের জন্য ক্লায়েন্ট সিক্রেট ব্যবহার করা হয় না।

8. এই কুইকস্টার্টে পরে ব্যবহার করার জন্য ক্লায়েন্ট আইডি সেভ করুন।

API key তৈরি করুন

1. Google Cloud কনসোলে, 'মেনু > API ও পরিষেবা > ক্রেডেনশিয়াল' বিকল্পে যান।

   ক্রেডেনশিয়ালে যান

2. ক্রেডেনশিয়াল তৈরি করুন > API key বিকল্পে ক্লিক করুন।
3. আপনার নতুন API কী দেখানো হচ্ছে।
   • আপনার অ্যাপের কোডে ব্যবহার করার জন্য API কী কপি করতে, 'কপি করুন ' বিকল্পে ক্লিক করুন। এছাড়াও, আপনার প্রোজেক্টের ক্রেডেনশিয়ালের "API key" বিভাগে API key খুঁজে পাওয়া যাবে।
   • অননুমোদিত ব্যবহার আটকাতে, আমরা API কী কোথায় এবং কোন API-এর জন্য ব্যবহার করা যাবে তা সীমাবদ্ধ করার সাজেস্ট করি। আরও জানতে, API সংক্রান্ত বিধিনিষেধ যোগ করুন।

স্যাম্পেল সেট-আপ করা

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

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

   people/quickstart/index.html

   GitHub-এ দেখুন
   <!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: আপনার তৈরি করা API key।

স্যাম্পেল রান করুন

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

   npm install http-server
   

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

   npx http-server -p 8000
   

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

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

পরবর্তী ধাপ

• API এক্সপ্লোরারে Google Workspace API ব্যবহার করে দেখুন
  • যাচাইকরণ ও অনুমোদন সংক্রান্ত সমস্যার সমাধান করা
  • People API রেফারেন্স ডকুমেন্টেশন
  • GitHub-এর google-api-javascript-client বিভাগ