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. Panduan memulai ini menggunakan pendekatan autentikasi sederhana yang sesuai untuk lingkungan pengujian. Untuk lingkungan produksi, sebaiknya pelajari autentikasi dan otorisasi sebelum memilih kredensial akses yang sesuai untuk aplikasi Anda.

Membuat aplikasi web JavaScript yang membuat permintaan ke Google Drive Activity API.

Tujuan

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

Prasyarat

  • Akun Google

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.

Jika Anda menggunakan project Google Cloud baru untuk menyelesaikan panduan memulai ini, konfigurasikan layar izin OAuth dan tambahkan diri Anda sebagai pengguna uji coba. Jika Anda sudah menyelesaikan langkah ini untuk project Cloud, lanjutkan ke bagian berikutnya.

  1. Di konsol Google Cloud, buka Menu > APIs & Services > OAuth consent screen.

    Buka layar izin OAuth

  2. Untuk Jenis pengguna, pilih Internal, lalu klik Buat.
  3. Lengkapi formulir pendaftaran aplikasi, lalu klik Simpan dan Lanjutkan.
  4. Untuk saat ini, Anda dapat melewati penambahan cakupan dan mengklik Simpan dan Lanjutkan. Pada masa mendatang, saat membuat aplikasi untuk digunakan di luar organisasi Google Workspace, Anda harus mengubah User type menjadi External, lalu tambahkan cakupan otorisasi yang diperlukan aplikasi Anda.

  5. Tinjau ringkasan pendaftaran aplikasi Anda. Untuk melakukan perubahan, klik Edit. Jika pendaftaran aplikasi terlihat baik-baik saja, klik Back to Dashboard.

Memberi otorisasi pada kredensial untuk aplikasi web

Untuk mengautentikasi pengguna akhir dan mengakses data pengguna di aplikasi, Anda perlu 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 konsol Google Cloud, buka Menu > APIs & Services > Credentials.

    Buka Kredensial

  2. Klik Buat Kredensial > Client ID OAuth.
  3. Klik Jenis aplikasi > Aplikasi web.
  4. Di kolom Name, ketik nama untuk kredensial tersebut. Nama ini hanya ditampilkan di Konsol Google Cloud.
  5. Tambahkan URI resmi yang terkait dengan aplikasi Anda:
    • Aplikasi sisi klien (JavaScript)–Pada Asal JavaScript yang diizinkan, klik Tambahkan URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. Atribut ini mengidentifikasi domain tempat aplikasi Anda dapat mengirim permintaan API ke server OAuth 2.0.
    • Aplikasi sisi server (Java, Python, dan lainnya)–Di bagian URI pengalihan yang diotorisasi, klik Tambahkan URI. Kemudian, masukkan URI endpoint yang dapat menjadi tujuan pengiriman respons oleh server OAuth 2.0.
  6. Klik Create. Layar yang dibuat klien OAuth akan muncul, yang menampilkan Client ID dan Rahasia klien Anda yang baru.

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

  7. Klik OK. Kredensial yang baru dibuat akan muncul di Client ID OAuth 2.0.

Catat kredensial ini karena Anda akan memerlukannya nanti dalam panduan memulai ini.

Membuat Kunci API

  1. Di konsol Google Cloud, buka Menu > APIs & Services > Credentials.

    Buka Kredensial

  2. Klik Create credentials > API key.
  3. Kunci API baru Anda akan ditampilkan.
    • Klik Salin untuk menyalin kunci API untuk digunakan dalam kode aplikasi Anda. Kunci API juga dapat ditemukan di bagian "Kunci API" pada kredensial project Anda.
    • Klik Restrict key untuk memperbarui setelan lanjutan dan membatasi penggunaan kunci API. Untuk detail selengkapnya, lihat Menerapkan pembatasan kunci API.

Menyiapkan contoh

  1. Di direktori kerja Anda, buat file bernama index.html.
  2. Di file index.html, tempel kode contoh berikut:

    drive/activity-v2/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>Drive Activity API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Drive Activity 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/driveactivity/v2/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/drive.activity.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 listActivities();
            };
    
            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 recent activity.
           */
          async function listActivities() {
            let response;
            try {
              response = await gapi.client.driveactivity.activity.query({
                'pageSize': 10,
              });
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
    
            const activities = response.result.activities;
            if (!activities || activities.length == 0) {
              document.getElementById('content').innerText = 'No activities found.';
              return;
            }
            // Flatten to string to display
            const output = activities.reduce(
                (str, activity) => {
                  const time = getTimeInfo(activity);
                  const action = getActionInfo(activity['primaryActionDetail']);
                  const actors = activity.actors.map(getActorInfo);
                  const targets = activity.targets.map(getTargetInfo);
                  return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
                },
                'Activities:\n');
            document.getElementById('content').innerText = output;
          }
    
          // Utility methods for formatting activity records
    
          /**
           * Returns a string representation of the first N elements in a list.
           * @param {string[]} array - Values to join
           * @param {number} limit - # of elements to show
           * @return {string} formatted string
           */
          function truncated(array, limit = 2) {
            const contents = array.slice(0, limit).join(', ');
            const more = array.length > limit ? ', ...' : '';
            return `[${contents}${more}]`;
          }
    
          /**
           * Returns the first found property name in an object.
           * @param {object} object - Object to search
           * @return {string} key name or 'unknown'
           */
          function getOneOf(object) {
            const props = Object.getOwnPropertyNames(object);
            if (props.length === 0) {
              return 'unknown';
            }
            return props[0];
          }
    
          /**
           * Returns a time associated with an activity.
           * @param {object} activity - Activity record
           * @return {string} Formatted timestamp
           */
          function getTimeInfo(activity) {
            if ('timestamp' in activity) {
              return activity.timestamp;
            }
            if ('timeRange' in activity) {
              return activity.timeRange.endTime;
            }
            return 'unknown';
          }
    
          /**
           * Returns the type of action.
           * @param {object} actionDetail
           * @return {string} Action type as string
           */
          function getActionInfo(actionDetail) {
            return getOneOf(actionDetail);
          }
    
          /**
           * Returns user information, or the type of user if not a known user.
           * @param {object} user - User record
           * @return {string} user type as string
           */
          function getUserInfo(user) {
            if ('knownUser' in user) {
              const knownUser = user['knownUser'];
              const isMe = knownUser['isCurrentUser'] || false;
              return isMe ? 'people/me' : knownUser['personName'];
            }
            return getOneOf(user);
          }
    
          /**
           * Returns actor information, or the type of actor if not a user.
           * @param {object} actor - Actor record
           * @return {string} actor type as string
           */
          function getActorInfo(actor) {
            if ('user' in actor) {
              return getUserInfo(actor['user']);
            }
            return getOneOf(actor);
          }
    
          /**
           * Returns the type of a target and an associated title.
           * @param {object} target - Activity target record
           * @return {string} target type as string
           */
          function getTargetInfo(target) {
            if ('driveItem' in target) {
              const title = target.driveItem.title || 'unknown';
              return `driveItem:"${title}"`;
            }
            if ('drive' in target) {
              const title = target.drive.title || 'unknown';
              return `drive:"${title}"`;
            }
            if ('fileComment' in target) {
              const parent = target.fileComment.parent || {};
              const title = parent.title || 'unknown';
              return `fileComment:"${title}"`;
            }
            return `${getOneOf(target)}:unknown`;
          }
        </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 kode berikut:

Menjalankan contoh

  1. Di direktori kerja Anda, instal paket http-server:

    npm install http-server
    
  2. Di direktori kerja Anda, mulai server web:

    npx http-server -p 8000
    
  1. Di browser Anda, buka http://localhost:8000.
  2. Anda akan melihat perintah untuk mengizinkan akses:
    1. Jika Anda belum login ke Akun Google, login saat diminta. Jika Anda login ke beberapa akun, pilih satu akun yang akan digunakan untuk otorisasi.
    2. Klik Accept.

Aplikasi JavaScript Anda berjalan dan memanggil Google Drive Activity API.

Langkah berikutnya