Panduan memulai JavaScript

Panduan memulai menjelaskan cara menyiapkan dan menjalankan aplikasi yang memanggil Google Workspace API.

Panduan memulai Google Workspace menggunakan library klien API untuk menangani beberapa detail alur autentikasi dan otorisasi. Sebaiknya gunakan library klien untuk aplikasi Anda sendiri. Sebelum dapat menjalankan aplikasi contoh, setiap panduan memulai mengharuskan Anda mengaktifkan autentikasi dan otorisasi. Jika Anda tidak memahami autentikasi dan otorisasi untuk Google Workspace API, baca Ringkasan autentikasi dan otorisasi.

Membuat aplikasi web JavaScript yang membuat permintaan ke Gmail API.

Tujuan

  • Siapkan lingkungan Anda.
  • Siapkan contoh.
  • Jalankan contoh.

Prasyarat

  • Akun Google dengan Gmail diaktifkan.

Menyiapkan lingkungan Anda

Untuk menyelesaikan panduan memulai ini, siapkan lingkungan Anda.

Mengaktifkan API

Sebelum menggunakan Google API, Anda harus mengaktifkannya di project Google Cloud. Anda dapat mengaktifkan satu atau beberapa API dalam satu project Google Cloud.

Mengizinkan kredensial untuk aplikasi web

Untuk mengautentikasi sebagai pengguna akhir dan mengakses data pengguna di aplikasi, Anda harus membuat satu atau beberapa Client ID OAuth 2.0. Client ID digunakan untuk mengidentifikasi satu aplikasi ke server OAuth Google. Jika aplikasi Anda berjalan di beberapa platform, Anda harus membuat client ID terpisah untuk setiap platform.
  1. Di Google Cloud Console, buka Menu > API & Layanan > Kredensial.

    Buka Kredensial

  2. Klik Create Credentials > OAuth client ID.
  3. Klik Application type > Web application.
  4. Di kolom Name, ketik nama untuk kredensial tersebut. Nama ini hanya ditampilkan di Google Cloud Console.
  5. Tambahkan URI yang diberi otorisasi terkait aplikasi Anda:
    • Aplikasi sisi klien (JavaScript)–Pada Asal JavaScript yang sah, klik Tambahkan URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. Kolom ini mengidentifikasi domain asal aplikasi Anda dapat mengirim permintaan API ke server OAuth 2.0.
    • Aplikasi sisi server (Java, Python, dan lainnya)–Pada URI pengalihan yang diotorisasi, klik Tambahkan URI. Kemudian, masukkan URI endpoint yang akan digunakan server OAuth 2.0 untuk mengirim respons.
  6. Klik Create. Layar klien OAuth yang dibuat akan muncul, yang menunjukkan Client ID dan Rahasia klien baru Anda.

    Catat Client ID. Rahasia klien tidak digunakan untuk aplikasi Web.

  7. Klik OK. Kredensial yang baru dibuat muncul di Client ID OAuth 2.0.
  8. Opsional: Jika membuat kredensial sebagai prasyarat untuk memulai cepat JavaScript, Anda juga harus membuat kunci API.

Catat kredensial ini karena Anda memerlukannya nanti di panduan memulai ini.

Menyiapkan contoh

  1. Dalam direktori kerja, buat file bernama index.html.

  2. Dalam file index.html, tempel kode contoh berikut:

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

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

        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 all Labels in the authorized user's inbox. If no labels
       * are found an appropriate message is printed.
       */
      async function listLabels() {
        let response;
        try {
          response = await gapi.client.gmail.users.labels.list({
            'userId': 'me',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const labels = response.result.labels;
        if (!labels || labels.length == 0) {
          document.getElementById('content').innerText = 'No labels found.';
          return;
        }
        // Flatten to string to display
        const output = labels.reduce(
            (str, label) => `${str}${label.name}\n`,
            'Labels:\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>

    Ganti berikut ini:

Menjalankan contoh

  1. Di direktori kerja, mulai server web:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python3 -m http.server 8000

  2. Di browser, buka http://localhost:8000.

  3. Saat pertama kali menjalankan contoh, Anda akan diminta untuk mengizinkan akses:

    1. Jika belum login ke Akun Google, Anda akan diminta untuk login. Jika Anda login ke beberapa akun, pilih satu akun yang akan digunakan untuk otorisasi.
    2. Klik Accept.
    3. Salin kode dari browser, tempelkan ke command line, dan tekan Enter.

    Informasi otorisasi disimpan dalam sistem file sehingga saat berikutnya Anda menjalankan kode contoh, Anda tidak akan diminta untuk melakukan otorisasi.

Anda telah berhasil membuat aplikasi JavaScript pertama yang membuat permintaan ke Gmail API.

Langkah berikutnya