Mensimulasikan CRUD API yang diamankan dengan kunci API

Sekilas
Tujuan: Simulasikan CRUD API dengan autentikasi kunci API
Waktu: 10 menit
Plugins:CrudApiPlugin
Prasyarat:Menyiapkan Proksi Dev

Saat membangun aplikasi, Anda sering berinteraksi dengan API backend. Terkadang, API ini belum tersedia, atau tim lain memperbaruinya untuk memenuhi persyaratan terbaru. Untuk menghindari menunggu, Anda biasanya membuat API tiruan yang mengembalikan data yang Anda butuhkan. Meskipun pendekatan ini mengatasi hambatan, pendekatan ini mengharuskan Anda untuk menghabiskan waktu membangun API dan akhirnya menggantinya dengan yang asli. Ini menjadi lebih rumit, ketika Anda perlu mengamankan API Anda dengan kunci API. Untuk menghindari membuang waktu, Anda dapat menggunakan Dev Proxy untuk mensimulasikan CRUD API dan mempercepat pengembangan.

CrudApiPluginDengan menggunakan , Anda dapat mensimulasikan API CRUD (Buat, Baca, Perbarui, Hapus) dengan penyimpanan data dalam memori. Dengan menggunakan file konfigurasi sederhana, Anda dapat menentukan URL mana yang didukung API tiruan Anda dan data apa yang dikembalikannya. Plugin ini juga mendukung CORS untuk penggunaan lintas domain dari aplikasi sisi klien. Plugin ini juga mendukung autentikasi kunci API, sehingga Anda dapat mengamankan API tiruan Anda dengan kunci API dan menguji bahwa aplikasi Anda mengirim kunci dengan benar.

Skenario

Katakanlah, Anda membuat aplikasi yang memungkinkan pengguna mengelola pelanggan. Untuk mendapatkan data, Anda perlu memanggil /customers titik akhir API backend. API diamankan dengan kunci API. Untuk menghindari menunggu tim backend menyelesaikan pekerjaan mereka, Anda memutuskan untuk menggunakan Dev Proxy untuk mensimulasikan API dan mengembalikan data yang Anda butuhkan.

Sebelum Anda mulai

Anda mulai dengan membuat API CRUD yang disimulasikan dengan data pelanggan. Setelah mengonfirmasi bahwa API berfungsi, Anda dapat mengamankannya dengan kunci API.

Contoh 1: Mensimulasikan CRUD API yang diamankan dengan kunci API di header

Dalam contoh pertama, Anda mengamankan seluruh API dengan kunci API yang dikirim klien di header HTTP.

customers-api.json Dalam file, tambahkan informasi tentang autentikasi kunci API.

File:customers-api.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.0.0/crudapiplugin.apifile.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "auth": "apiKey",
  "apiKeyAuthConfig": {
    "apiKey": "my-secret-key",
    "headerName": "X-API-Key"
  },
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

Dengan mengatur properti auth ke apiKey, Anda menyatakan bahwa API diamankan menggunakan kunci API. apiKeyAuthConfig Di properti , Anda menentukan detail konfigurasi. Properti apiKey menentukan kunci API yang valid, dan headerName properti menentukan header HTTP tempat plugin mencari kunci.

Jika Anda mencoba memanggil API tanpa menetapkan header X-API-Key ke my-secret-key, Anda akan menerima respons 401 Unauthorized.

Contoh 2: Mensimulasikan CRUD API yang diamankan dengan kunci API dalam parameter kueri

Di beberapa API, klien mengirim kunci API sebagai parameter string kueri. Anda dapat mensimulasikan perilaku ini dengan mengonfigurasi queryParameterName properti.

customers-api.json Perbarui file sebagai berikut:

File:customers-api.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.0.0/crudapiplugin.apifile.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "auth": "apiKey",
  "apiKeyAuthConfig": {
    "apiKey": "my-secret-key",
    "queryParameterName": "api_key"
  },
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

Dalam contoh ini, plugin mencari kunci API dalam api_key parameter query-string. Misalnya, panggilan https://api.contoso.com/v1/customers?api_key=my-secret-key berhasil, saat panggilan https://api.contoso.com/v1/customers mengembalikan 401 Unauthorized respons.

Contoh 3: Mensimulasikan CRUD API yang menerima kunci API dari parameter header dan kueri

Anda juga dapat mengonfigurasi plugin untuk menerima kunci API dari header dan parameter kueri. Plugin memeriksa header terlebih dahulu. Jika header tidak berisi kunci API, plugin akan memeriksa parameter kueri.

customers-api.json Perbarui file sebagai berikut:

File:customers-api.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v3.0.0/crudapiplugin.apifile.schema.json",
  "baseUrl": "https://api.contoso.com/v1/customers",
  "dataFile": "customers-data.json",
  "auth": "apiKey",
  "apiKeyAuthConfig": {
    "apiKey": "my-secret-key",
    "headerName": "X-API-Key",
    "queryParameterName": "api_key"
  },
  "actions": [
    {
      "action": "getAll"
    },
    {
      "action": "getOne",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "create"
    },
    {
      "action": "merge",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    },
    {
      "action": "delete",
      "url": "/{customer-id}",
      "query": "$.[?(@.id == {customer-id})]"
    }
  ]
}

Dalam contoh ini, permintaan yang menyertakan kunci API di X-API-Key header atau api_key parameter kueri diotorisasi.

Langkah selanjutnya

Pelajari selengkapnya tentang CrudApiPlugin.

CrudApiPlugin

Contoh

Lihat juga sampel Proksi Dev terkait:

  • Last updated on