การทำ AUTHEN ด้วย FIREBASE กับ REACTJS
ตัวอย่างการ authen facebook ด้วย firebase กับ Reactjs Step by step
เบื้องต้นขอสรุปสั้นๆ ก่อนว่า Firebase คือ Google Cloud ที่มี feature ให้ใช้อยู่มาก รายละเอียดยังไม่ขอพูดถึงนะว่ามีอะไรบ้าง หาอ่านได้ง่ายมาก โดย firebase เนี่ยสามารถช่วยลดงานต่างๆ ในส่วนของฝั่ง Server ไปได้มาก ซึ่งมีความเสถียร สามารถ scale ได้ เป็นตัวเลือกควรมากที่จะนำมาใช้งาน
ในส่วนนี้เราจะมาลองใช้งาน Firebase Authentication กับสุดยอด javascript library Reactjs (ความเห็นส่วนตัวนะ)
(ถึงแม้ว่าบทความนี้จะใช้ react แต่ถ้าท่านเขียนด้วย javascript ปกติ ส่วนตัวผมคิดว่าก็สามารถปรับเปลี่ยนได้ไม่ยาก)
ก่อนอื่นเลย ท่านต้องไปลงทะเบียนที่ https://firebase.google.com/ คงไม่มีใครติดปัญหาอะไรในการลงทะเบียนนะครับหลังจากลงทะเบียนแล้วก็เริ่มสร้าง Project กันนะครับ กรอกชื่อ Project เลือก Country แล้วกดปุ่ม CREATE PROJECT เลยย
หลังจากสร้างโปรเจคเสร็จจะได้เข้ามาอยู่ในส่วนของหน้าจัดการของ firebase คอลั่มทางซ้ายคือ Feature ต่างๆ ของ firebase นะครับ ไว้ลองเล่น แต่ตอนนี้เราจะสอนใจ Authentication และที่เราบอกไปแล้วว่าเราจะใช้ร่วมกับ reactjs ซึ่งคือการทำ Web นั้นเราจะสนใจตรง Add Firebase to your web app
คลิก Add Firebase to your web app จะได้ข้อมูล config ในรูป json ตามรูปนะครับ ผมขอเรียกมันว่า firebase config เดี๋ยวตอนเราลงมือโค้ดเราจะเอามันไปใช้นะ ตอนนี้จำไว้ก่อน
เครครับ มาถึงตรงนี้แล้วเรากลับมาส่วนของ react กันก่อนนะครับ
มาสร้าง project กันก่อนเลย ด้วย create-react-app
create-react-app reactjs-authen-facebook
cd reactjs-authen-facebook
เมื่อสร้าง react project เสร็จแล้วทำการติดตั้ง package firebase ต่อเลยด้วยคำสั่ง
yarn add firebase
เมื่อลง package เสร็จจะขึ้นตามรูป
start project ด้วยคำสั่ง yarn start และเปิด browser ใส่ localhost:3000 จะได้หน้าจอตามรูปด้านล่างนี้นะ
ในส่วนของโค้ดจะมีโครงสร้างไฟล์ตามรูปนะครับ
เราจะไม่ได้ทำการสร้าง UI หรือตกแต่งอะไรเลยนะครับ จะเน้นไปที่ส่วนของการใช้ firebase เพียงอย่างเดียว
ให้ท่านเปิดไฟล์ App.js ขึ้นมา ในไฟล์จะมีโค้ดอยู่นิดหน่อย ให้ทำการลบให้เหลือตามรูปตัวอย่างด้านล่างนะครับ
ต่อไปเราจะเพิ่มส่วนโค้ดไว้สำหรับเชื่อมต่อกับ firebase โดยการ import firebase และใช้ฟังก์ชัน initializeApp
ถ้ายังจำข้อมูล config (่json) ได้ เรากลับไปก๊อปมาจากเว็บ firebase เลยได้ครับ แล้วใส่ โค้ดตามรูปต่อไปเลย
(ตอนแรกเซนเซอร์ apiKey ไว้ ตอนนี้ไม่ละ 555)
โค้ดที่เราเพิ่มขึ้นจากขั้นตอนก่อนหน้าคือบรรทัดที่ 2–11 นะครับ
บรรทัดที่ 2 คือการ import package firebase เข้ามาไว้ใช้งาน ส่วนบรรทัดไป 3–11 คือส่วนที่ copy มาจากเว็บ firebase แต่ละ project ของแต่ละคนจะได้ apiKey, authDomain, databaseUrl, projectId, storageBucket, messagingSenderId ไม่เหมือนกันนะครับ
พักโค้ดไว้เท่านี้ก่อน กลับไปที่ firebase ก่อนนะครับ เราจะทำการเปิดใช้งาน authen กับ facebook และต้องทำการ config ที่ develop facebook ด้วยครับ
กลับไปที่ firebase console ต่อไปนี้คือการตั้งค่าระหว่าง firebase กับ facabook ซึ่งผมจะอธิบายตามขั้นตอน โดยอธิบายแล้วมีรูปตัวอย่างหน้าล่างไปเรื่อยๆ นะครับ สังเกตตัวเลยสีแดงแต่ละรูป
- คลิกเลือก Authentication 2) คลิก SET UP SIGN-IN METHOD เพื่อเข้าไป Enable
firebase มีหลาย Prodiver สถานะตอนนี้คือทุก Prodiver เป็น Disabled หมด ให้เราเลือกใช้ในการทำ authen เลย ในบทความนี้เราจะใช้ facebook เป็นตัวอย่างนะครับ 3) ให้เลือกคลิก Facebook
หลังจากคลิกเลือก Facebook มาแล้ว จะแสดงฟอร์มให้กรอกข้อมูลครับ
4) ให้ทำการ Enable
5, 6) เราก๊อป App ID, App Secret มาจาก Facebook มาใส่นะครับ เดี๋ยวเราจะไปสร้าง App ID กับ developer facebook กัน
7) เราจะก๊อปปี้ไว้ เพื่อไปใส่ให้กับ Facebook
มาที่ส่วนของ facebook กันบ้าง developers.facebook.com
ให้ท่านทำการสร้าง New App ID
ไปที่เมนู Dashboard ให้ก๊อปปี้ App ID และ App Secret ไปใส่ให้กับ firebase จากขั้นตอนก่อนหน้า 5, 6)
(สังเหตุ จุดวงกลมเส้นรอบสีเขียวหลังคำว่า reactjs-authen)
เลือกโปรดัก Facebook Login
วาง redirect URIs ที่ก๊อปปี้ไว้จากข้อ 7) ตามรูปนะครับ
ขั้นตอนสุดท้ายที่สำคัญคือเปิดให้ App นี้ public โดยคลิกเมนู App Review และคลิกตามรูปด้านล่าง แล้วเลือก Category ของ App
กลับมาดูที่หน้า Dashboard ถ้าวงกลมสีเขียวขึ้นตามรูป เป็นอันเสร็จสมบูรณ์
มาโค้ดกันต่อได้
เรามาเพิ่มโค้ดบรรทัดที่ 12,13 และ 15–18 ตามรูปด้านล่าง โดย บรรทัด 12 เราจะสร้างตัวแปร auth ไว้จาก firebase.auth
บรรทัด 13 สร้าง object provider จาก FacebookAuthProvider
บรรทัด 15 คือ construtor ของ class โดยสร้าง state ให้ user มีค่าเท่ากับ null
ต่อมาเพิ่มฟังก์ชั่น login และ logout บรรทัด 19–29, 30–36 ตามลำดับ อ้างอิงจาก Document ของ firebase
โดยโค้ดในส่วนนี้จะใช้งานเมื่อ user click Login และ Logout
เมื่อทำการ login เสร็จฟังชั่นจะ return ค่ากลับมา เราจะเอามาเก็บไว้ใน state user
ตรงข้ามกับ login เมื่อ logout จะกำหนดค่า user ให้เป็น null
หลังจากมีฟังชั่นแล้วต่อมาเรามาเพิ่ม ปุ่มเมื่อคลิก login, logout และส่วนของการ render display name
ปุ่ม Login บรรทัด 46–48
ปุ่ม Logout บรรทัด 49–51
ส่วนของการ render เราจะแยกเป็นฟังชั่นออกมาคือ บรรทัด 37–41 และส่วนที่เรียกใช้ฟังชั่นคือ บรรทัดที่ 45
หลังจากโค้ดเสร็จแล้ว เรามาทดสอบผลลัพธ์กันครับ เปิด browser url http://localhost:3000
ก่อน login
เมื่อคลิก Login ก็กรอก email password ของ facebook
กลับมาดูผลลัพธ์ users ที่ firebase จะเห็นว่ามีสมาชิกเพิ่มขึ้นมาแล้ว
ตัว Authen ของ firebase นี้ยังมีระบบส่งเมล์เพื่อ active user อีกทั้งส่วนของการ reset password ไว้ให้ใช้งานด้วย ถ้ามาถึงจุดนี้แล้ว ส่วนที่เหลือในการจัดการสมาชิกคงไม่ยากแล้วนะครับ
โค้ดทั้งหมด https://github.com/autsakorn/reactjs-authen-facebook
ผลลัพธ์ https://autsakorn.github.io/reactjs-authen-facebook/
ผลลัพธ์เดียวกันบน firebase hosting https://reactjs-authen.firebaseapp.com/
