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.

Buat aplikasi web JavaScript yang membuat permintaan ke Admin SDK API.

Tujuan

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

Prasyarat

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

• Domain Google Workspace dengan akses API diaktifkan.
• Akun Google di domain tersebut dengan hak istimewa administrator.

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 Admin SDK 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 sudah menyelesaikan langkah ini untuk project Cloud, lanjutkan ke bagian berikutnya.

1. Di konsol Google Cloud, buka Menu > > Branding.

   Buka Branding

2. Jika telah mengonfigurasi , Anda dapat mengonfigurasi setelan Layar Izin OAuth berikut di Branding, Audiens, dan Akses Data. Jika Anda melihat pesan yang bertuliskan not configured yet, klik Get Started:
1. Di bagian Informasi Aplikasi, di Nama aplikasi, masukkan nama untuk aplikasi.
2. Di Email dukungan pengguna, pilih alamat email dukungan yang dapat dihubungi pengguna jika mereka memiliki pertanyaan tentang izin mereka.
3. Klik Berikutnya.
4. Di bagian Audiens, pilih Internal.
5. Klik Berikutnya.
6. Di bagian Informasi Kontak, masukkan Alamat email tempat Anda dapat menerima notifikasi tentang perubahan apa pun pada project Anda.
7. Klik Berikutnya.
8. Di bagian Selesai, tinjau Kebijakan Data Pengguna Layanan Google API dan jika Anda setuju, pilih Saya setuju dengan Layanan Google API: Kebijakan Data Pengguna.
9. Klik Lanjutkan.
10. Klik Buat.
3. Untuk saat ini, Anda dapat melewati penambahan cakupan. Di masa mendatang, saat membuat aplikasi untuk digunakan di luar organisasi Google Workspace, Anda harus mengubah Jenis pengguna menjadi Eksternal. Kemudian, tambahkan cakupan otorisasi yang diperlukan aplikasi Anda. Untuk mempelajari lebih lanjut, lihat panduan lengkap Mengonfigurasi izin OAuth.

Memberi otorisasi 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 > > Klien.

   Buka Klien

2. Klik Buat Klien.
3. Klik Application type > Web application.
4. Di kolom Name, ketik nama untuk kredensial. Nama ini hanya ditampilkan di konsol Google Cloud.
5. Tambahkan URI resmi yang terkait dengan aplikasi Anda:
   • Aplikasi sisi klien (JavaScript)–Di bagian Asal JavaScript resmi, klik Tambahkan URI. Kemudian, masukkan URI yang akan digunakan untuk permintaan browser. 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 diberi otorisasi, klik Tambahkan URI. Kemudian, masukkan URI endpoint tempat server OAuth 2.0 dapat mengirim respons.
6. Klik Buat.

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

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

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 Anda agar dapat digunakan dalam kode aplikasi. Kunci API juga dapat ditemukan di bagian "API keys" pada kredensial project Anda.
   • Klik Batasi kunci untuk memperbarui setelan lanjutan dan membatasi penggunaan kunci API Anda. Untuk mengetahui detail selengkapnya, lihat Menerapkan pembatasan kunci API.

Menyiapkan contoh

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

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

   adminSDK/reports/index.html

   Lihat di GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Reports API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Reports 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/admin/reports_v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/admin.reports.audit.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 listLoginActivity();
           };
   
           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 10 recent login activities.
          */
         async function listLoginActivity() {
           let response;
           try {
             const request = {
               'userKey': 'all',
               'applicationName': 'login',
               'maxResults': 10,
             };
             response = await gapi.client.reports.activities.list(request);
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.items;
           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 = activity.id.time;
                 const email = activity.actor.email;
                 const eventName = activity.events[0].name;
                 return `${str}-${time}: ${email} (${eventName})\n`;
               },
               'Logins:\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 memberi otorisasi kredensial untuk aplikasi web.
   • YOUR_API_KEY: kunci API yang Anda buat sebagai Prasyarat.

Menjalankan contoh

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

   npm install http-server
   

2. Di direktori kerja Anda, mulai server web:

   npx http-server -p 8000
   

3. Di browser, 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 berjalan dan memanggil Admin SDK API.

Langkah berikutnya

• Memecahkan masalah autentikasi dan otorisasi
• Dokumentasi referensi Reports API Admin SDK
• Bagian google-api-javascript-client di GitHub