มาทำ OAuth Facebook with React กัน
เริ่มกันเลย!!!
1. สร้าง project react
1.1 พิมพ์คำสั่ง
npx create-react-app my-app //สร้าง projectcd my-app //เข้า projectnpm run start //run project
พอรันแล้วก็จะได้แบบนี้
2. run ngrok
ngrok เป็น tool ที่สามารถทำให้ application ที่รันอยู่ localhost ทำเป็น link public ได้ โดยที่เครื่องอื่นสามารถเข้าถึงได้จาก link ที่ ngrok generate ให้
2.1 donwload ไฟล์ zip ด้านล่างนี้
2.2 พิมพ์คำสั่ง
unzip ngrok.zip //แตกไฟล์ zip./ngrok http 3000 --region="ap" // รัน ngrok โดย http 3000 --region="ap" คือ zone Asia
เมื่อรันเสร็จแล้ว ก็จะได้หน้าตาแบบนี้
จากตัวอย่าง link ที่ ngrok ก็คือ https://8f7623d3b338.ap.ngrok.io นั่นเอง
3. สร้าง Facebook App
3.1 คลิก https://developers.facebook.com/apps
3.2 คลิก Create App
3.3 เลือกประเภท App ในตัวอย่างจะเลือก For Everything Else
3.4 ตั้งชื่อแอป ในตัวอย่างจะเป็นชื่อ My App
สร้างแอปเสร็จ ก็จะได้หน้าตาแบบนี้
3.5 ไปที่ Settings -> basic
3.6 ใส่ link ที่ได้จาก ngrok ช่อง App Domains
3.7 ไปที่ Dashboard
3.8 คลิกที่ Setup ของ Fackbook Login
3.9 ไปที่ Fackbook Login -> Quickstart
3.10 ใส่ link ที่ได้จาก ngrok ช่อง Site URL
3.11 กด Save
3.12 Public Facebook App
สังเกตรูปด้านล่างจะเห็นว่า App เป็นสีเทา เพราะยังไม่ได้ public
คลิกที่กรอบสีแดง
3.13 เลือกโหมด ในตัวอย่างเลือกเป็น Education
เมื่อเสร็จแล้วจะมีหน้าแบบนี้
4.เขียน โค้ด
4.1 พิมพ์คำสั่ง
npm install react-facebook-login //ลง package react-facebook-loginอ่าน document package เพิ่มเติมได้ที่นี่
4.2 copy code ด้านล่างนี้ไปใส่ใน src/components/fackbook.js
อธิบายเพิ่มเติม
appId คือ App ID ในตัวอย่างจะเป็น 2783288145248766
fields กำหนดร้องขอสิทธิ์การเข้าถึงข้อมูล name, email, picture ของผู้ใช้
callback ส่วนนี้เมื่อ user อนุญาตสิทธิ์การเข้าถึงข้อมูล name, email, picture สำเร็จแล้ว ก็จะ callback response กลับให้มา application
4.3 copy code ด้านล่างนี้ไปใส่ใน src/App.js
กลับมาาที่ Application
4.4 คลิกขวา Inspect
4.5 คลิกปุ่ม LOGIN WITH FACEBOOK
หากยังไม่ได้ login facebook จะเกิดแท็บใหม่ให้ Login Facebook
เมื่อ login เสร็จแล้วจะได้หน้าตาแบบนี้
สังเกตที่ กรอบสีแดง My App จะขอสิทธิ์การเข้าถึงข้อมูลผู้ใช้
4.6 คลิกปุ่ม Continue as … เพื่ออนุญาตสิทธิ์การเข้าถึงข้อมูลให้กับ Application
เมื่อเสร็จแล้วจะ callback response กลับมา สังเกตได้จาก Console ขวามือ
ตัวอย่าง response ที่ได้จาก callback
สรุป
ก็เป็นอันเสร็จสิ้นกับการทำ OAuth Facebook with React ส่วนข้อมูลที่ได้มากจาก Facebook ก็อยู่ที่ว่าเราจะเอาไปทำไรต่อ อยู่กับว่าเราจะวางระบบยังไง ตัวอย่างเช่น ทำเป็นระบบ Login เชื่อมกับ Application ของเรา อาจจะเก็บข้อมูล user ลง database เช็ค expires หากหมดอายุก็เด้งกลับมา login ใหม่ เป็นต้น อะไรแบบนี้
หวังว่าบทความนี้จะเป็นประโยชน์กับ dev ทุกคนนะครับ
หากผิดพลาดตรงไหน แจ้งได้เลยครับ พร้อมปรับปรุงให้ดีขึ้นครับ
หากติดขั้นตอนไหน Inbox มาพูดคุยได้ครับ
