Melewati Token Bearer dalam Permintaan Fetch

Dalam pengembangan web modern, komunikasi yang aman antara klien dan server sangat penting. Salah satu cara umum untuk memastikan keamanan ini adalah dengan menggunakan Bearer Token untuk autentikasi API. Blog ini akan memandu Anda melalui apa itu Bearer Token, mengapa itu penting, dan bagaimana cara meneruskan Bearer Token dalam permintaan Fetch.

Apa itu Bearer Token?

Bearer token adalah jenis token akses yang memungkinkan pembawa, atau pemegang, untuk mengakses sumber daya tertentu. Biasanya digunakan dalam autentikasi OAuth 2.0. Token dikeluarkan oleh server autentikasi dan harus disertakan dalam header permintaan HTTP saat membuat panggilan API ke titik akhir yang dilindungi.

💡

Apidog menyederhanakan proses pengelolaan Bearer Token untuk autentikasi API, membuat komunikasi dan pengujian yang aman menjadi mudah. Gratis! Coba sekarang!

button

Mengapa Menggunakan Bearer Token?

Keamanan: Bearer Token memastikan bahwa hanya pengguna yang berwenang yang dapat mengakses sumber daya tertentu.
Kesederhanaan: Setelah dikeluarkan, token mudah digunakan untuk permintaan API berikutnya.
Fleksibilitas: Token dapat memiliki masa pakai dan cakupan yang bervariasi, memungkinkan kontrol akses yang terperinci.

Apa itu Fetch Requests?

Fetch requests adalah cara untuk membuat permintaan jaringan di JavaScript, biasanya digunakan untuk mengambil sumber daya dari server. Fetch API menyediakan antarmuka modern dan fleksibel untuk membuat permintaan HTTP, menawarkan fitur yang lebih kuat dan fleksibel dibandingkan dengan XMLHttpRequest yang lebih lama.

Fetch requests dapat digunakan untuk mengambil data, mengirim data, atau melakukan berbagai operasi jaringan lainnya. API ini mendukung promises, yang memungkinkan penanganan operasi asinkron yang lebih mudah dan bersih.

Sintaks Dasar

Sintaks dasar untuk fetch request adalah sebagai berikut:

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

url: URL sumber daya yang ingin Anda ambil.
options: Objek opsional yang berisi pengaturan khusus untuk permintaan (misalnya, method, headers, body).

Contoh

Berikut adalah contoh sederhana dari permintaan GET menggunakan Fetch API:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch request ini mengambil data dari URL yang ditentukan dan mencatatnya ke konsol.

Mendapatkan Bearer Token untuk Fetch Requests

Sebelum membuat permintaan, Anda perlu mendapatkan Bearer Token. Ini biasanya melibatkan autentikasi dengan server OAuth 2.0. Berikut adalah contoh sederhana untuk mendapatkan token:

const tokenUrl = 'https://auth.server.com/token';
const clientId = 'your-client-id';
const clientSecret = 'your-client-secret';

async function getToken() {
    const response = await fetch(tokenUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
    });
    const data = await response.json();
    return data.access_token;
}

Meneruskan Bearer Token dalam Fetch Requests

Setelah Anda memiliki Bearer Token, Anda dapat menggunakannya untuk membuat permintaan API yang diautentikasi. Token harus disertakan dalam header Authorization dari permintaan Fetch Anda.

async function fetchData() {
    const token = await getToken();
    const apiUrl = 'https://api.server.com/data';

    const response = await fetch(apiUrl, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
        },
    });

    if (!response.ok) {
        throw new Error(`Error: ${response.statusText}`);
    }

    const data = await response.json();
    console.log(data);
}

Contoh: Mengambil Data yang Dilindungi

Mari kita telusuri contoh lengkap di mana kita mengambil data yang dilindungi dari API menggunakan Bearer Token.

Dapatkan Token: Pertama, kita perlu mendapatkan token dari server autentikasi.
Buat Permintaan: Selanjutnya, kita menggunakan token untuk membuat permintaan GET ke titik akhir API yang dilindungi.

Berikut adalah kode lengkapnya:

async function getToken() {
    const tokenUrl = 'https://auth.server.com/token';
    const clientId = 'your-client-id';
    const clientSecret = 'your-client-secret';

    const response = await fetch(tokenUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
    });

    if (!response.ok) {
        throw new Error('Failed to obtain token');
    }

    const data = await response.json();
    return data.access_token;
}

async function fetchData() {
    try {
        const token = await getToken();
        const apiUrl = 'https://api.server.com/data';

        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json',
            },
        });

        if (!response.ok) {
            throw new Error(`Error: ${response.statusText}`);
        }

        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

fetchData();

Cara Meneruskan Bearer Token dalam Fetch Requests Menggunakan Apidog

Saat bekerja dengan API yang memerlukan autentikasi, meneruskan bearer token dalam fetch requests adalah tugas umum. Meskipun ini dapat dilakukan secara manual dengan menambahkan token ke header permintaan, Apidog menyediakan cara yang lebih mudah untuk menangani bearer token tanpa menulis kode. Dalam posting blog ini, kita akan menjelajahi bagaimana Apidog menyederhanakan proses meneruskan bearer token dalam fetch requests.

Apa itu Apidog?

Apidog adalah alat pengujian, desain, dan dokumentasi API yang kuat yang memungkinkan pengembang untuk dengan mudah menguji dan berinteraksi dengan API. Ini menyediakan antarmuka yang ramah pengguna untuk mengirim permintaan HTTP, mengelola autentikasi, dan memeriksa respons. Apidog mendukung berbagai metode autentikasi, termasuk bearer token.

button

Gunakan Apidog untuk Mendapatkan Bearer Token

Mendapatkan bearer token yang valid adalah langkah pertama untuk mengirim fetch request. Menggunakan Apidog untuk mendapatkan bearer token untuk permintaan API Anda mudah tanpa coding. Berikut caranya:

Prasyarat:
Sebelum kita mulai, pastikan Anda memiliki yang berikut:

Akses ke dokumentasi API atau titik akhir autentikasi
Kredensial yang diperlukan (misalnya, nama pengguna, kata sandi, ID klien, rahasia klien)
Apidog diinstal di mesin Anda

Langkah 1: Buka Apidog dan Buat Permintaan Baru
Luncurkan aplikasi Apidog dan buat permintaan baru dengan mengklik tombol "New Request".

Langkah 2: Konfigurasikan Permintaan Autentikasi
Di panel konfigurasi permintaan, masukkan URL titik akhir autentikasi yang disediakan oleh dokumentasi API atau cukup impor cURL ke Apidog. Titik akhir ini biasanya bertanggung jawab untuk mengeluarkan bearer token setelah autentikasi berhasil.

Atur metode HTTP ke POST (atau metode yang sesuai yang ditentukan oleh dokumentasi API).

Langkah 3: Atur Header Permintaan
Jika API memerlukan header khusus untuk permintaan autentikasi, tambahkan di tab "Headers" dari panel konfigurasi permintaan. Header umum termasuk Content-Type dan Accept.

Langkah 4: Konfigurasikan Body Permintaan
Di tab "Body" dari panel konfigurasi permintaan, pilih jenis body yang sesuai (misalnya, JSON, form-data) dan masukkan parameter autentikasi yang diperlukan. Parameter ini biasanya mencakup:

Nama pengguna dan kata sandi
ID klien dan rahasia klien
Jenis pemberian (misalnya, "password", "client_credentials")

Lihat dokumentasi API untuk parameter spesifik dan formatnya.

Langkah 5: Kirim Permintaan Autentikasi
Setelah Anda mengonfigurasi permintaan autentikasi, klik tombol "Send" untuk mengirim permintaan ke server API.

Langkah 6: Periksa Respons
Setelah mengirim permintaan, Apidog akan menampilkan respons API di panel respons. Cari bearer token di body respons. Biasanya dikembalikan sebagai objek JSON dengan kunci bernama "access_token" atau serupa.

Inspect the endpoint response for the access token

Langkah 7: Salin Bearer Token
Temukan bearer token di body respons dan salin ke clipboard Anda. Anda akan memerlukan token ini untuk mengautentikasi permintaan API berikutnya.

Langkah 8: Simpan Bearer Token (Opsional)
Jika Anda ingin menggunakan kembali bearer token untuk permintaan di masa mendatang, Anda dapat menyimpannya di variabel lingkungan Apidog. Ini memungkinkan Anda untuk dengan mudah mereferensikan token dalam permintaan lain tanpa menyalin dan menempelkannya secara manual setiap kali.

Meneruskan Bearer Token dengan Apidog

Apidog membuatnya mudah untuk meneruskan bearer token dalam fetch requests. Berikut cara Anda dapat melakukannya:

Langkah 1. Buka Apidog: Luncurkan aplikasi Apidog dan buat permintaan baru.

Langkah 2. Konfigurasikan Autentikasi: Di panel konfigurasi permintaan, temukan tab "Auth". Dari menu dropdown, pilih "Bearer Token" sebagai jenis autentikasi.

Langkah 3. Masukkan Bearer Token: Di bidang input yang disediakan, masukkan bearer token Anda. Apidog menyimpan token dengan aman dan secara otomatis menyertakannya dalam header permintaan saat mengirim permintaan.

Enter bearer token at Apidog for request authentication

Langkah 4: Kirim Permintaan: Dengan bearer token yang dikonfigurasi, Anda sekarang dapat mengirim permintaan ke titik akhir API. Apidog akan menyertakan token dalam header Authorization dari permintaan secara otomatis, dalam format Bearer your-bearer-token.

Langkah 5: Lihat Respons: Setelah permintaan dikirim, Apidog akan menampilkan respons API. Anda dapat memeriksa body respons, header, dan kode status untuk memverifikasi autentikasi yang berhasil dan akses ke sumber daya yang dilindungi.

Manfaat Menggunakan Apidog untuk Bearer Token:

1. Autentikasi yang Disederhanakan:

Apidog menghilangkan kebutuhan untuk menambahkan bearer token secara manual ke header permintaan dalam kode Anda. Ini menangani autentikasi dengan mulus, menghemat waktu dan tenaga Anda.

2. Pengujian dan Debugging yang Mudah

Dengan Apidog, Anda dapat dengan cepat menguji dan men-debug API yang memerlukan autentikasi bearer token. Anda dapat dengan mudah beralih di antara token yang berbeda, memeriksa permintaan dan respons, dan memecahkan masalah autentikasi apa pun.

3. Kolaborasi dan Berbagi

Apidog memungkinkan Anda untuk berbagi permintaan dan dokumentasi API Anda dengan anggota tim. Anda dapat berkolaborasi dalam pengembangan, pengujian, dan dokumentasi API, memastikan semua orang memiliki akses ke detail autentikasi yang diperlukan.

Kesimpulan

Meneruskan bearer token dalam fetch requests adalah persyaratan umum saat bekerja dengan API yang diautentikasi. Meskipun dapat dilakukan secara manual dalam kode, Apidog menawarkan solusi tanpa kerumitan. Dengan memanfaatkan fitur autentikasi bearer token Apidog, Anda dapat dengan mudah menyertakan token dalam permintaan Anda tanpa menulis kode apa pun. Ini menyederhanakan proses autentikasi, meningkatkan keamanan, dan merampingkan pengujian dan debugging API. Coba Apidog dan rasakan kenyamanan autentikasi bearer token yang mudah dalam alur kerja pengembangan API Anda.