Panduan memulai JavaScript

Buat aplikasi web JavaScript yang membuat permintaan ke Google Drive API.

Panduan memulai menjelaskan cara menyiapkan dan menjalankan aplikasi yang memanggil Google Workspace API. Panduan memulai ini menggunakan pendekatan autentikasi yang disederhanakan dan sesuai untuk lingkungan pengujian. Untuk lingkungan produksi, sebaiknya pelajari autentikasi dan otorisasi sebelum memilih kredensial akses yang sesuai untuk aplikasi Anda.

Panduan memulai ini menggunakan library klien API yang direkomendasikan Google Workspace untuk menangani beberapa detail alur autentikasi dan otorisasi.

Tujuan

• Menyiapkan lingkungan Anda.
• Menyiapkan contoh.
• Menjalankan contoh.

Prasyarat

• Node.js & npm diinstal.
• Project Google Cloud.

• Akun Google dengan Google Drive 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.

• Di konsol Google Cloud, aktifkan Google Drive API.

  Mengaktifkan API

Mengonfigurasi layar izin OAuth

Jika Anda menggunakan project Google Cloud baru untuk menyelesaikan panduan memulai ini, konfigurasikan layar izin OAuth. Jika Anda telah menyelesaikan langkah ini untuk project Cloud Anda, lanjutkan ke bagian berikutnya.

1. Di Konsol Google API, buka Menu menu > Google Auth platform > Branding.

   Buka Branding

2. Jika telah mengonfigurasi platform Google Auth, Anda dapat mengonfigurasi setelan Layar Izin OAuth berikut di Branding, Audiens, dan Akses Data. Jika Anda melihat pesan yang menyatakan Google Auth platform not configured yet, klik Get Started:
1. Di bagian App Information, di App name, masukkan nama untuk aplikasi.
2. Di User support email, pilih alamat email dukungan tempat pengguna dapat menghubungi Anda jika mereka memiliki pertanyaan tentang izin mereka.
3. Klik Next.
4. Di bagian Audience, pilih Internal.
5. Klik Next.
6. Di bagian Contact Information, masukkan Email address tempat Anda dapat menerima notifikasi tentang perubahan apa pun pada project Anda.
7. Klik Next.
8. Di bagian Finish, tinjau Kebijakan Data Pengguna Layanan Google API dan jika Anda setuju, pilih I agree to the Google API Services: User Data Policy.
9. Klik Continue.
10. Klik Create.
3. Untuk saat ini, Anda dapat melewati penambahan cakupan. Pada masa mendatang, saat membuat aplikasi untuk digunakan di luar organisasi Google Workspace Anda, Anda harus mengubah User type menjadi External. Kemudian, tambahkan cakupan otorisasi yang diperlukan aplikasi Anda. Untuk mempelajari lebih lanjut, lihat panduan lengkap Mengonfigurasi izin OAuth guide.

Memberi otorisasi kredensial untuk aplikasi web

Untuk mengautentikasi pengguna akhir dan mengakses data pengguna di aplikasi Anda, Anda harus membuat satu atau beberapa Client ID OAuth 2.0. Client ID digunakan untuk mengidentifikasi aplikasi tunggal ke server OAuth Google. Jika aplikasi Anda berjalan di beberapa platform, Anda harus membuat client ID terpisah untuk setiap platform.

1. Di Konsol Google API, buka Menu menu > Google Auth platform > Clients.

   Buka Klien

2. Klik Create Client.
3. Klik Application type > Web application.
4. Di kolom Name, ketik nama untuk kredensial tersebut. Nama ini hanya ditampilkan di Konsol Google API.
5. Tambahkan URI resmi yang terkait dengan aplikasi Anda:
   • Aplikasi sisi klien (JavaScript)–Di bagian Authorized JavaScript origins, klik Add URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. URI ini mengidentifikasi domain tempat aplikasi Anda dapat mengirim permintaan API ke server OAuth 2.0.
   • Aplikasi sisi server (Java, Python, dan lainnya)–Di bagian Authorized redirect URIs, klik Add URI. Kemudian, masukkan URI endpoint tempat server OAuth 2.0 dapat mengirim respons.
6. Klik Create.

   Kredensial yang baru dibuat akan muncul di bagian OAuth 2.0 Client IDs.

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

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

Menyiapkan contoh

1. Di direktori kerja Anda, buat file bernama index.html.

2. Di file index.html, tempelkan kode contoh berikut:

   drive/quickstart/index.html

   Lihat di 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>

   Ganti kode berikut:

   • YOUR_CLIENT_ID: client ID yang Anda buat saat Anda memberi otorisasi kredensial untuk aplikasi web.

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
   

3. Di browser Anda, buka http://localhost:8000.
4. Anda akan melihat perintah untuk memberi otorisasi 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 API.

Langkah berikutnya

• Coba Google Workspace API di API Explorer
  • Memecahkan masalah autentikasi dan otorisasi
  • Dokumentasi referensi Drive API
  • google-api-javascript-client bagian di GitHub