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

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

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

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

উদ্দেশ্য

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

পূর্বশর্ত

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

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

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

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

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

  1. গুগল ক্লাউড কনসোলে, মেনু > এ যান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. গুগল ক্লাউড কনসোলে, মেনু > এ যান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. গুগল ক্লাউড কনসোলে, মেনু > API এবং পরিষেবা > শংসাপত্রগুলিতে যান।

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

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

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

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

    অ্যাডমিনএসডিকে/ডিরেক্টরি/ইনডেক্স.এইচটিএমএল
    <!DOCTYPE html>
    <html>
      <head>
        <title>Directory API Quickstart</title>
        <meta charset="utf>-8&<quot;> /
    <  /h>ead
     < >body
        pDirectory API <Qu>icksta<rt/p
    
        !--Add buttons to initiate auth sequence and >sign <out--
        button id="authorize_button" onclick>="ha<ndleAut>hClic<k()"Authorize/button
        button id="signout_but>ton"<; oncli>ck=&qu<ot;handleSignoutClick()"Sign Out/button
    
     ><   p>re id=<"content" style=&qu>ot;white-space: pre-wrap;"/pre
    
        script type="text/javascript"
          /* exported gapiLoaded */
          /* exported gisLoaded */
          /* exported handleAuthClick */
          /* exported handleSignoutClick */
    
          // TODO(developer): S<et to client I>D and API key from the Dev<eloper Conso>le
          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/admin/directory_v1/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/admin.directory.user.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 = 'vis>ible';
            }
          }
    
          /**
           *  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 listUsers();
            };
    
            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 first 10 users in the domain.
           */
          async function listUsers() {
            let response;
            try {
              const request = {
                'customer': 'my_customer',
                'maxResults': 10,
                'orderBy': 'email',
              };
              response = await gapi.client.directory.users.list(request);
            } catch (err) {
              document.getElementById('content').innerText = err.mess>age;
              return;
            }
    
            const users = response.result.users;
            if (!users || users.length == 0) {
              document.getElementById(&#<39;cont>ent&#<39;).innerText = 'No users found.';
              return;
            }
            ><// Flat>ten t<o string to display
            const output = users.reduce(
                (str, user) = `><${str}$>{us<er.pr>i<maryE>mail} (${user.name.fullName})\n`,
                'Users:\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-server প্যাকেজটি ইনস্টল করুন:

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

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

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

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