Pengantar

API Slack memungkinkan pengembang untuk membangun aplikasi yang memanggil Slack, tetapi hambatan umum yang muncul adalah kesalahan CORS (Cross-Origin Resource Sharing). Artikel ini menyajikan solusi untuk masalah ini dengan membuat fungsi sisi server di Next.js, untuk memanggil API Slack.

Menghindari Kesalahan CORS dengan Slack API di Next.js

Dalam membangun aplikasi yang memanggil Slack, pengembang sering kali menghadapi kesalahan CORS. Masalah ini timbul karena kebijakan keamanan dari API Slack, yang membatasi permintaan AJAX dari domain yang berbeda. Namun, dengan membuat fungsi sisi server di aplikasi Next.js Anda, Anda dapat berhasil mengatasi hambatan ini dan mengaktifkan komunikasi yang aman dengan API Slack.

Menyiapkan API Slack

Langkah pertama adalah menyiapkan API Slack untuk aplikasi Anda. Proses ini melibatkan instalasi paket yang diperlukan, @slack/web-api, melalui npm dan menginisialisasi klien Slack baru menggunakan token Slack unik Anda.

// Import the required modules
import { WebClient } from '@slack/web-api';

// Initialize a new Slack client
const slack = new WebClient(process.env.SLACK_TOKEN);

Ingatlah untuk menggantikan process.env.SLACK_TOKEN dengan token Slack aktual Anda, yang disimpan sebagai variabel lingkungan.

Membuat Fungsi Sisi Server di Next.js

Next.js menyediakan cara yang sederhana dan efisien untuk membuat rute API, berfungsi sebagai fungsi sisi server. Yang perlu Anda lakukan adalah menambahkan file JavaScript di bawah direktori /pages/api. Misalnya, Anda dapat membuat file slack.js dengan kode berikut:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      // Call the chat.postMessage method using the WebClient
      const result = await slack.chat.postMessage({
        channel: '#your-channel',
        text: req.body.text,
      });

      // Return the result to the client
      res.status(200).json(result);
    } catch (error) {
      // If there's an error, return it to the client
      res.status(500).json({ error: error.message });
    }
  } else {
    // If the method is not POST, return an error
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Dalam fungsi ini, kita mengatur endpoint POST yang mengirimkan pesan ke saluran Slack tertentu. Saluran dan teks pesan diterima dari body permintaan. Jika terjadi kesalahan, server akan memberikan respons dengan kode status 500 dan mengembalikan pesan kesalahan.

Panggilan API dari Sisi Klien

Terakhir, dari sisi klien aplikasi Anda, Anda dapat memanggil rute API ini tanpa mengalami masalah CORS:

fetch('/api/slack', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    text: 'Your message',
  }),
});

Penyiapan ini memungkinkan kode sisi klien Anda untuk memanggil fungsi sisi server Anda sendiri, yang kemudian berinteraksi dengan API Slack. Dengan demikian, hal ini menghindari masalah CORS yang akan terjadi jika Anda melakukan permintaan AJAX langsung ke API Slack dari sisi klien.

Melindungi Titik Akhir API dari Pengguna yang Jahat

Saat berinteraksi dengan API Slack melalui Next.js, penting untuk memastikan keamanan titik akhir API Anda. Bab ini menyoroti praktik terbaik untuk melindungi titik akhir API Anda dari serangan yang berpotensi jahat.

Gunakan Token yang Aman untuk Otentikasi API

Dalam komunikasi API, token digunakan untuk mengotentikasi permintaan. Token harus dikelola dengan aman dan tidak pernah terpapar di sisi klien aplikasi Anda. Dalam konteks API Slack, pastikan bahwa token Slack Anda disimpan dengan aman dan digunakan dari sisi server.

Mengimplementasikan Pembatasan Tingkat Permintaan (Rate Limiting)

Pembatasan tingkat permintaan adalah tindakan yang efektif untuk mencegah penyalahgunaan titik akhir API Anda. Dengan membatasi setiap klien untuk sejumlah permintaan dalam periode waktu tertentu, Anda dapat mencegah serangan brute-force yang potensial.

Mengimplementasikan Kunci API

Memberikan kunci API kepada klien titik akhir API Anda berfungsi sebagai lapisan keamanan tambahan. Meskipun melibatkan pengelolaan pembuatan, distribusi, dan validasi kunci-kunci ini, ini dapat sangat meningkatkan keamanan API Anda.

Mengimplementasikan Pembatasan Tingkat Permintaan dengan express-rate-limit

express-rate-limit adalah paket npm yang nyaman yang membantu mengimplementasikan pembatasan tingkat permintaan dalam aplikasi Express.js.

import { WebClient } from '@slack/web-api';
import rateLimit from 'express-rate-limit';

const slack = new WebClient(process.env.SLACK_TOKEN);

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // limit each IP to 100 requests per windowMs
});

export default async function handler(req, res) {
  limiter(req, res, async () => {
    if (req.method === 'POST') {
      try {
        const result = await slack.chat.postMessage({
          channel: '#your-channel',
          text: req.body.text,
        });

        res.status(200).json(result);
      } catch (error) {
        res.status(500).json({ error: error.message });
      }
    } else {
      res.status(405).json({ error: 'Method not allowed' });
    }
  });
}

Potongan kode ini mengilustrasikan rute yang dibatasi tingkat permintaannya dalam aplikasi Express.js, membatasi setiap IP hingga 100 permintaan setiap 15 menit.