การพัฒนาระบบ Log-in ด้วย firebase authentication เป็นที่นิยมอย่างมากในปัจจุบันซึ่งมีความสะดวกอย่างมากในเรื่องของการใช้งาน sign-in ด้วยหลายวิธีตั้งแต่ Facebook SDK , Google account , Github, Email และอีกมากมายโดยขออธิบายเพิ่มเติมจากรูปด้านล่างนะคะ
Firebase Authentication จะเป็นบริการที่เข้ามาจัดการในส่วน Backend ให้ตั้งแต่การทำ register , log-in , การรีเซ็ต password โดยจะมี SDK ให้ทั้ง IOS, Andriod และ Web ให้สามารถนำไปติดตั้งและใช้งานได้นั่นเองโดยจากที่ได้ลองใช้ก็เห็นว่าใช้งานง่ายและสะดวกมาก ๆ เหมาะกับโปรเจ็คที่ต้องการนำส่วน Log-in ไปเพิ่มเติมแต่ก็มีข็ฮเสียคือเจ้า firebase เนี่ยดันจำกัดการใช้งานในกรณีที่ใช้ฟรีน่ะสิ แป๋วววววว 55555 แต่ถ้าโปรเจ็คเราไม่ใหญ่จนเกินไปหรือเก็บข้อมูลมากเกินไปก็เหมาะสมเลยทีเดยวสำหรับนำเจ้า Firebase Authentication มาลองใช้กันนั่นเอง ^^
มาเริ่มสร้างโปรเจ็คกันเลย !!
สำหรับคนที่ไม่เคยเขียน react.js มาก่อนเลย แนะนำให้เริ่มตั้งแต่ส่วนนี้นะคะส่วนใครทำ setup Project เรียบร้อยก็สามารถข้ามส่วนนี้ไปได้เลยค้าาาา
- Check nodejs โดยใช้คำสั่ง node — version
ถ้าไม่ขึ้นดังรูปข้างต้นก็สามารถ Download ได้จากลิงก์นี้ https://nodejs.org/en/ และเมื่อ DOwnload เสร็จสิ้นและทำการ set Path เรียบร้อยแล้วก็สามารถเช็คได้จากคำสั่งข้างต้นได้เลย
PART 1: การ Set up Project
หากเพื่อน ๆ ทำตามคำสั่งข้างบนเรียบร้อยแล้วก็ไป create react app กันเถอะโดยใช้คำสั่ง
npx create-react-app myapp
เมื่อ setup โปรเจ็คเรียบร้อยแล้วนั้นจะได้ผลลัพธ์ดังรูปข้างล่างนั้นเอง จากนั้นก็ให้เราเข้าไปยังโพลเดอร์โปรเจ็ค
แล้วลองใช้คำสั่ง npm start เพื่อรัน project กันได้เลยซึ่งจะได้ผลลัพธ์ดังนี้
เมื่อได้ผลลัพธ์ดังรูปข้างบนแล้วเราลองมาพูดถึงโครงสร้างของโปรเจ็คกันบ้างว่าเมื่อ create-react-app กันแล้วเราจะได้อะไรมาบ้างดังรูปข้างล่างเลยนะคะ
โครงสร้างของ React App ในภาพรวมจะประกอบไปด้วย
- node_modules — เก็บโมดูล ไลบราลี่ต่าง ๆ ของโปรแกรม
- public — เก็บ file index.html เป็น จุดเริ่มต้นของโปรแกรม
- src — เก็บไฟล์ javascript และ css ทั้งหมดที่เราจะทำงานในนี้ โดยเริ่มที่ index.js จะไปเรียกใช้งาน โดยดึงข้อมูลจาก App.js
- .gitignore — ไฟล์แสดงรายชื่อไฟล์ที่ไม่ต้องการ upload ขึ้น git
- package.json — เก็บ dependenc (module) ทั้งหมดที่ใช้ใน project นี้ รวมถึงกำหนด start, stop, test script ในการสั่งให้โปรแกรมทำงาน
- yarn.lock — เก็บรายชื่อ package ที่ติดตั้งไปแล้ว (หากมี dependency เพิ่มจะตรวจสอบจาก yarn.lock กรณีใช้ yarn ในการติดตั้ง หากใช้ npm ก็จะมี package.json.lock)
PART 2: มาเริ่มสร้างส่วน Login Page กัน !!!
เป็นไงกันบ้างสำหรับส่วนการ setup project กันไปแล้วซึ่งในส่วนของการสร้าง Login นั้นให้เข้าไปใน src และสร้าง Folder components จากนั้นให้สร้าง LoginPage.js ใน components ดังรูป
เมื่อเสร็จตามขั้นตอนดังกล่าวให้เข้าไปที่ App.js และลองพิมคำว่า Hello World ให้แสดงบนแอปของเรากันคะ
แท๊นนนนนนนน ๆ !!!!!!
เป็นไงกันบ้างคะ เรามาดูการเขียน Reactjs แบบ Functional component กับแบบ Class Component ว่าแตกต่างกันอย่างไรคะ ซึ่งในบทความนี้ขอเขียนแบบ functional component เป็นหลักนะคะ
และเรามาเพิ่มโค้ดในส่วน LoginPage.js ดังนี้
โดยฟอร์มดังกล่าวเป็นฟอร์มที่ดึงมากจาก mdbreact ซึ่งต้องทำการ npm i mdbreact ก่อนเพื่อให้สามารถใช้งานฟอร์มได้นั่นเองและในส่วนของโค้ดเราต้องประกาศตัวแปรแบบ state คือ emil และ password (โค้ดบรรทัดที่ 11 และ 12) จากนั้นในส่วนของบรรทัดที่ 23 และ 24 ต้องทำการเรียก event onChange เพื่อเปลี่ยนแปลงค่าของ email และ password ซึ่งจะจัดการ event เมื่อมีการกรอกข้อมูลในส่วน input นั้นเองและทำการเพิ่ม LoginForm.css ดังรูปด้านล่าง (อยู่ใน Floder component)
จากนั้นให้เพิ่มโค้ดในส่วนของ App.js ดังรูปข้างล่างเพื่อเรียก LoginPage.js ให้ทำการ render แสดงผลลัพธ์นั่นเอง
จะได้ผลลัพธ์ดังนี้นั่นเองงงงง แท๊นนนน นๆ ( เย้ๆ ได้ฟอร์มแล้วววววววว ^^)
เป็นไงกันบ้างคะเพื่อน ๆ ผ่านมา 2 part แล้วสำหรับการ setup Project และการสร้าง Form Login จากนั้นส่วนต่อไปเรามา setup ใน firebase console กันเพื่อที่จะสามารถเรียกใช้งาน firebase Authentication ได้นั่นเองให้เข้าไปที่ลิงก์ดังนี้ได้เลยคะ https://console.firebase.google.com/
PART 3 : มาเริ่มทำการ Setup Firebase และ Auth SDK กัน !!
ในการพัฒนาในส่วนของ firebase Authentication นั้นจะขอแยกออกเป็นส่วนย่อย ๆ ดังนี้นะคะ
- การ Set up Firebase และ Auth SDK
- การสร้างบัญชีผู้ใช้ และ การเข้าสู่ระบบ
- การ sign-in ด้วยบัญชี Provider ต่างๆ
เรามาเริ่มในส่วนแรกกันเลยนะคะ
เมื่อเราเข้าไปยัง firebase Console แลเวจะเจอหน้าตาดังนี้
จากนั้นให้ทำการสร้างในส่วนของ Project ใหม่และทำตามขั้นตอนดังนี้
จากนั้นเลือกในส่วนของ “สร้างโปรเจ็กต์” แล้วรอสักครู่จากนั้นเมื่อทำการสร้างโปรเจ็กต์จะได้ผลลัพธ์ดังนี้
และจากนั้นให้ทำตามขั้นตอนดังต่อไปนี้
เมื่อเพื่อน ๆ ทำมาถึงตรงนี้แล้วละก็ยินดีด้วยค้าาา 55555 ยังมีต่ออีกนะ ยัง !! ยังไม่จบอีก แท๊นนนนน ในส่วนนี้ก็จบไปแล้วสำหรับการ Set up Firebase และ Auth SDK จากนั้นให้ไปยังส่วนของ การสร้างบัญชีผู้ใช้ และ การเข้าสู่ระบบ
การสร้างบัญชีผู้ใช้และการเข้าสู่ระบบ !!
ในส่วนนี้ให้พื่อน ๆ เข้าไปตั้งค่าได้ตามขั้นตอนดังกล่าวได้เลยนะคะเพื่อกำหนดการ sign-in ด้วยบัญชี email และ password
เมื่อเราทำตามขั้นตอนข้างต้นเสร็จสิ้นแล้วก็ให้ทำการบันทึกซึ่งในส่วนนี้ถือว่าเสร็จไปแล้วกับการตั้งค่าในการกำหนดให้เข้าใช้โดย email และ password นั่นเองซึ่งต่อไปก็ให้เพื่อน ๆ กลับไปยัง Reactjs แล้วทำใน Part ต่อไปกันได้เลยค้าาาาาาา . . .
Part 4 : การกำหนดส่วน Firebase config กับ Reactjs
เมื่อกลับมายังส่วน Reactjs แล้วให้ทำการสร้าง Folder config ใน src จากนั้นสร้าง fire.js ใน config และใส่โค้ดดังนี้ ซึ่งในส่วน firebaseConfig ของแต่ละคนที่คัดลอกมาจาก firebase นั่นจะไม่เหมือนกันซึ่งเราสามารถใส่ของตนเองได้เลยซึ่งในส่วนนี้ให้ทำการ npm i firebase — save ด้วยนั่นเอง
เมื่อทำตามขั้นตอนดังกล่าวเสร็จสิ้นแล้วให้ไปที่ LoginPage.js และทำการเพิ่ม Code ในส่วนของ Login และ Signup ไปดังรูป
และทำการเพิ่ม event OnClick ไปในส่วน ฺ Button และทำการเรียกใช้งาน login และ signup ใน onClick ดังโค้ดข้างล่างนั่นเอง
จากนั้นให้ทำการ save โค้ดและ run อีกครั้งและให้ทดลองใส่ Email และ Password ในส่วน Login
เมื่อลองกดในส่วน Register แล้วนั่นให้เข้าไปยัง firebase อีกครั้งและจะได้ผลลัพธ์ดังนี้ซึ่งจะเห็นว่าเมื่อเราทำการ Register นั้นก็จะทำการเพิ่ม email และ password ที่เราได้กรอกไปมายังส่วนของ Firebase Authentication นั่นเอง ซึ่งหากกด F12 บนหน้าเว็บจะได้ผลลัพธ์ส่วน console ดังนี้
เสร็จแล้วสำหรับส่วน Login ด้วย FIrebase Authentication เป็นไงกันบ้าง 5555+ เหงื่อแตกเลย ซึ่งจากการใช้งาน Firebase Authentication ก็สามารถเปิดใช้งาน sign-in method ได้หลายแบบด้วยเช่นกันซึ่งถ้าเพื่อน ๆ อยากได้โค้ดก็สามารถเข้าไปยัง Link Github ด้านล่างได้เลยค่าาาาา ^^
Link Github : https://github.com/jantapabh/Login-With-Firebase-
