การใช้งาน Call API with Access Token ในภาษา Next.js

ในยุคที่ข้อมูลและแอปพลิเคชันมีการเชื่อมต่อกันอย่างลึกซึ้ง การเรียนรู้เกี่ยวกับการใช้งาน API (Application Programming Interface) ถือเป็นสิ่งสำคัญสำหรับนักพัฒนาซอฟต์แวร์ทุกคน โดยเฉพาะในแพลตฟอร์ม Next.js ที่เป็นที่นิยมในหมู่นักพัฒนา JavaScript ในบทความนี้ เราจะพูดถึงการเรียกดู API ด้วย Access Token รวมถึงการใช้งานในทางปฏิบัติที่คุณไม่ควรพลาด

ทำความรู้จักกับ Access Token

ก่อนอื่น เรามาทำความรู้จักกับ Access Token กันก่อน Access Token คือ รหัสที่ใช้ในการเข้าถึง API ที่ได้รับการรักษาความปลอดภัย โดยทั่วไปแล้ว เมื่อเราทำการลงชื่อเข้าใช้หรือใช้ OAuth มันจะสร้าง Access Token ขึ้นมา ซึ่งจะต้องส่งไปพร้อมกับคำขอเรียกดู API เพื่อระบุตัวตน หรือตรวจสอบสิทธิ์ในการเข้าถึงข้อมูล ซึ่งเป็นขั้นตอนสำคัญในการพัฒนาแอปพลิเคชันที่ปลอดภัย

ทำไมต้องใช้ Next.js?

Next.js เป็น framework ที่ทำให้การพัฒนาเว็บแอปพลิเคชันทำได้ง่ายขึ้น โดยเน้นการทำงานเป็น Server-Side Rendering และ Static Site Generation นอกจากนี้ยังมีฟีเจอร์ที่ช่วยให้คุณสามารถจัดการ API routes ได้อย่างสะดวก มีความสามารถในด้าน SEO ที่ดี และสามารถสร้าง Progressive Web Apps ได้อีกด้วย

การติดตั้งและตั้งค่า Next.js

ก่อนที่เราจะเริ่มต้น เรียนรู้วิธีการเรียก API ด้วย Access Token ใน Next.js ให้สร้างโปรเจกต์ Next.js ใหม่ ด้วยคำสั่ง:

 npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

เมื่อคุณทำตามขั้นตอนนี้เสร็จเรียบร้อยแล้ว จะเห็นโปรเจกต์ใหม่ที่ได้ถูกสร้างขึ้นในโฟลเดอร์ `my-next-app`

ตัวอย่างการเรียก API ด้วย Access Token

เราจะใช้ `fetch` ในการเรียก API โดยจะ simulating การเรียก API ที่ต้องการ Access Token ในการเข้าถึงข้อมูล ใช้ API ของ JSONPlaceholder เพื่อแสดงข้อมูลผู้ใช้งาน (User)

ขั้นตอนที่ 1: สร้างไฟล์ API

ในโฟลเดอร์ `pages/api` ให้สร้างไฟล์ที่ชื่อว่า `fetchUsers.js` และใส่โค้ดด้านล่างนี้:

 // pages/api/fetchUsers.js
export default async function handler(req, res) {
  const token = req.headers['authorization'];

  // ตรวจสอบ Access Token
  if (token !== 'Bearer your_access_token') {
    return res.status(401).json({ message: 'Unauthorized' });
  }

  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  res.status(200).json(data);
}

ในโค้ดนี้ เราได้สร้าง API route ขึ้นมาใช้ `async` และ `await` เพื่อรอรับข้อมูลจาก JSONPlaceholder ซึ่งต้องการ Access Token ใน Header

ขั้นตอนที่ 2: การเรียก API ใน Component

เราจะสร้าง Component ที่จะเรียก API ที่เราสร้างขึ้น โดยไปที่โฟลเดอร์ `pages/index.js` และเพิ่มโค้ดดังนี้:

 // pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/fetchUsers', {
          method: 'GET',
          headers: {
            'Authorization': 'Bearer your_access_token',
          },
        });

        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        const data = await response.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      }
    };

    fetchData();
  }, []);

  if (error) return <div>Failed to load: {error}</div>;

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

ในComponent นี้ เราใช้ `useEffect` เพื่อเรียก API เมื่อ Component ถูก mount ขึ้นมา การส่ง Access Token ผ่าน header จะช่วยให้เราเข้าถึง API ได้ ถ้าทุกอย่างสำเร็จเราจะได้แสดงชื่อผู้ใช้ทั้งหมด

Use Case ในโลกจริง

การเข้าถึง API ด้วย Access Token สามารถนำไปใช้ในหลายๆ สถานการณ์ เช่น:

สรุป

การใช้งาน Access Token เพื่อเรียกดู API ใน Next.js เป็นวิธีที่มีประสิทธิภาพในการสร้างแอปพลิเคชันที่ปลอดภัยและเชื่อถือได้ รวมถึงพัฒนาทักษะในด้านการเชื่อมต่อข้อมูลและพื้นฐานการเขียนโค้ดที่สำคัญ

ถ้าคุณสนใจที่จะเรียนรู้ถึงเทคนิคและความรู้เพิ่มเติมเกี่ยวกับการพัฒนาโปรแกรมใน Next.js และการทำงานกับ API สามารถเข้าเรียนที่ EPT (Expert-Programming-Tutor) เพื่อพัฒนาตนเองไปสู่การเป็นนักพัฒนาแอปพลิเคชันที่มีทักษะและมีความรู้ความเข้าใจในด้านเทคโนโลยีอย่างครบถ้วน!

ถึงเวลาแล้ว ที่จะเริ่มต้นการเดินทางของคุณในการเรียนรู้การเขียนโปรแกรมกับเราและก้าวไปสู่สายอาชีพที่เป็นที่ต้องการในตลาดแรงงานไทย!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง