เขียน React ทำหน้า Login แบบเรียกใช้ API ง่ายสุดๆ 😉

2 min readMay 23, 2021

บทความสำหรับมือใหม่ React เลยนะครับ โดยจะเป็นการสร้างหน้าจอ Login และหน้าจอ Profile (สำหรับใช้ดู profile ของ user ที่ login เข้ามา) และจะมีการเรียกใช้ API จาก MeCallAPI.com ครับ

มี clip ให้ดูด้วยนะครับ สามารถทำตามได้เช่นเดียวกันกับบทความครับ

API

API ที่เราจะใช้กันในบทความนี้มาจาก MeCallAPI.com ซึ่งเป็น API ที่ผมสร้างขึ้นมาเองเพื่อแชร์ให้ทุกคนได้ลองใช้ก่อน โดยจะเรียก API 1 เส้นสำหรับการ Login โดยมีรายละเอียดดังนี้

Method: POST
URL: https://www.mecallapi.com/api/login
Body (JSON):

Response:

สำหรับถ้าใครอยากลองใช้เส้นอื่น ๆ ที่เกี่ยวกับการแสดงข้อมูล User หลาย ๆ คน หรือการยืนยันตัวตน ยืนยันสิทธิการเข้าถึงข้อมูลสามารถทดลองใช้ API เส้นอื่น ๆ ได้ที่ MeCallAPI.com

Software Installation

ติดตั้ง Software

Node.js https://nodejs.org
Yarn ใช้คำสั่ง

npm install --global yarn

เริ่มต้นสร้าง React

ใช้ create-react-app เพื่อสร้าง react project ขึ้นมา โดยตั้งชื่อ project ว่า react-basic-login

npx create-react-app react-basic-login

เข้าไปที่ folder ที่ถูกสร้างขึ้น

cd react-basic-login

ติดตั้ง Package เพิ่มเติม

Package เพิ่มเติมที่จะใช้ในบทความนี้ ประกอบไปด้วย

Material UI สำหรับใช้แสดงส่วนประกอบต่าง ๆ บนหน้าจอ (เช่น กล่องข้อความ ปุ่ม เป็นต้น)
react-router-dom สำหรับจัดการเส้นทางภายใน app ของเรา
Sweetalert ใช้แสดง Alert Box

yarn add @material-ui/core @material-ui/icons react-router-dom sweetalert

สร้างหน้าจอ

ให้เพิ่มหน้าจอ 2 หน้าจอด้วยการสร้างไฟล์

Sigin.js สำหรับแสดงหน้า login และเรียกใช้ API login
Profile.js สำหรับแสดงหน้า profile ของผู้ใช้ (จะต้อง login ก่อนถึงจะเข้าสู่หน้าจอนี้ได้)

สร้าง Sigin.js สังเกตที่บรรทัดที่ 41 เป็นการเรียกใช้ API login จาก MeCallAPI.com

สร้าง Profile.js

สุดท้าย แก้ไขไฟล์ App.js เพื่อจัดการเส้นทาง (Route) ระหว่างหน้า Signin และหน้า Profile โดยถ้าไม่มี token จากการเรียก API Login จะไม่สามารถไปหน้าอื่นได้นอกจากหน้า Signin

ทดสอบ

start react ขึ้นมาด้วยคำสั่ง

yarn start

ทดสอบด้วยการใส่ Email Address และ Password เป็น

karn.yong@mecallapi.com / mecallapi
ivy.cal@mecallapi.com / mecallapi

สามารถดาวน์โหลด source code ทั้งหมดได้จาก GitHub: https://github.com/KarnYong/react-basic-login

บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต