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

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

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

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

উদ্দেশ্য

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

পূর্বশর্ত

• Node.js এবং npm ইনস্টল করা হয়েছে।
• একটি গুগল ক্লাউড প্রকল্প ।

• গুগল ড্রাইভ সক্ষম থাকা একটি গুগল অ্যাকাউন্ট।

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

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

API সক্রিয় করুন

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

• গুগল ক্লাউড কনসোলে, গুগল ড্রাইভ এপিআই সক্ষম করুন।

  API সক্রিয় করুন

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

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

1. গুগল ক্লাউড কনসোলে, মেনু menu > এ যানGoogle Auth platform > ব্র্যান্ডিং ।

   ব্র্যান্ডিং-এ যান

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

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

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

1. গুগল ক্লাউড কনসোলে, মেনু menu > এ যানGoogle Auth platform > ক্লায়েন্ট ।

   ক্লায়েন্টদের তালিকায় যান

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

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

   ক্লায়েন্ট আইডিটি লক্ষ্য করুন। ওয়েব অ্যাপ্লিকেশনের জন্য ক্লায়েন্ট সিক্রেট ব্যবহার করা হয় না।

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

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

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

   শংসাপত্রগুলিতে যান

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

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

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

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

   ড্রাইভ/কুইকস্টার্ট/ইন্ডেক্স.এইচটিএমএল

   GitHub-এ দেখুন
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive 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 from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
   
         // Discovery doc URL for APIs used by the quickstart
         const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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({
             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 listFiles();
           };
   
           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 metadata for first 10 files.
          */
         async function listFiles() {
           let response;
           try {
             response = await gapi.client.drive.files.list({
               'pageSize': 10,
               'fields': 'files(id, name)',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const files = response.result.files;
           if (!files || files.length == 0) {
             document.getElementById('content').innerText = 'No files found.';
             return;
           }
           // Flatten to string to display
           const output = files.reduce(
               (str, file) => `${str}${file.name} (${file.id})\n`,
               'Files:\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 কী।

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

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

   npm install http-server
   

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

   npx http-server -p 8000
   

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

আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটি গুগল ড্রাইভ এপিআই চালায় এবং কল করে।

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

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