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 tentang alur otentikasi dan otorisasi. Sebaiknya Anda menggunakan library klien untuk aplikasi Anda sendiri. Panduan memulai ini menggunakan pendekatan otentikasi yang disederhanakan yang sesuai untuk pengujian lingkungan fleksibel App Engine. Untuk lingkungan produksi, sebaiknya pelajari tentang autentikasi dan otorisasi sebelum memilih kredensial akses yang sesuai untuk aplikasi Anda.

Membuat aplikasi web JavaScript yang membuat permintaan ke Google Calendar API.

Tujuan

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

Prasyarat

• Node.js & NPM terinstal.
• Google Cloud project Anda.

• Akun Google dengan Google Kalender yang 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 Calendar API.

  Mengaktifkan API

Mengonfigurasi layar izin OAuth

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

1. Di konsol Google Cloud, buka Menu menu > API & Layanan > Layar izin OAuth.

   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, lalu mengklik Simpan dan Lanjutkan. Pada masa mendatang, jika Anda membuat aplikasi untuk digunakan di luar organisasi Google Workspace, Anda harus mengubah Jenis pengguna menjadi Eksternal, lalu menambahkan cakupan otorisasi yang dibutuhkan aplikasi Anda.

5. Tinjau ringkasan pendaftaran aplikasi Anda. Untuk melakukan perubahan, klik Edit. Jika aplikasi pendaftaran tampak tidak bermasalah, klik Kembali ke Dasbor.

Memberi otorisasi kredensial untuk aplikasi web

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

1. Di konsol Google Cloud, buka Menu menu > APIs & Layanan > Kredensial.

   Buka Kredensial

2. Klik Create Credentials > OAuth client ID.
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 yang diberi otorisasi yang terkait dengan aplikasi Anda:
   • Aplikasi sisi klien (JavaScript)–Di bagian Asal JavaScript yang diotorisasi, 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 Authorized redirect URI, klik Add URI. Kemudian, masukkan URI endpoint yang dapat menerima respons dari server OAuth 2.0.
6. Klik Buat. Layar yang dibuat klien OAuth akan muncul, yang menunjukkan Client ID dan Rahasia klien baru Anda.

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

7. Klik Oke. Kredensial yang baru dibuat akan muncul di bagian 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 menu > API & Layanan > Kredensial.

   Buka Kredensial

2. Klik Buat kredensial > Kunci API.
3. Kunci API baru Anda akan ditampilkan.
   • Klik Salin content_copy menyalin kunci API untuk digunakan dalam kode aplikasi Anda. Kunci API juga bisa berupa yang ditemukan dalam "API keys" kredensial project Anda.
   • Klik Restrict key untuk memperbarui setelan lanjutan dan membatasi penggunaan kunci API Anda. Untuk detail selengkapnya, lihat Menerapkan pembatasan kunci API.

Menyiapkan contoh

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

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

   calendar/quickstart/index.html

   Lihat di GitHub

   <!DOCTYPE html>
   <html>
     <head>
       <title>Google Calendar API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Google Calendar 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/calendar/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/calendar.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 listUpcomingEvents();
           };
   
           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 summary and start datetime/date of the next ten events in
          * the authorized user's calendar. If no events are found an
          * appropriate message is printed.
          */
         async function listUpcomingEvents() {
           let response;
           try {
             const request = {
               'calendarId': 'primary',
               'timeMin': (new Date()).toISOString(),
               'showDeleted': false,
               'singleEvents': true,
               'maxResults': 10,
               'orderBy': 'startTime',
             };
             response = await gapi.client.calendar.events.list(request);
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const events = response.result.items;
           if (!events || events.length == 0) {
             document.getElementById('content').innerText = 'No events found.';
             return;
           }
           // Flatten to string to display
           const output = events.reduce(
               (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
               'Events:\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 kredensial yang sah untuk aplikasi web.
   • YOUR_API_KEY: kunci API yang Anda buat sebagai Prasyarat.

Menjalankan contoh

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

   npm install http-server
   

2. Di direktori kerja, jalankan server web:

   npx http-server -p 8000
   

3. Di browser Anda, buka http://localhost:8000.
4. 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 Setuju.

Aplikasi JavaScript Anda menjalankan dan memanggil Google Calendar API.

Langkah berikutnya

• Membuat peristiwa
• Memecahkan masalah autentikasi dan otorisasi
• Dokumentasi referensi Calendar API
• Bagian google-api-javascript-client di GitHub