การทำ Vue Login Social + Firebase (จับมือทำ)

Blog นี้ผมพึ่งได้ลองทำ Login social ใน vue มาไม่นานมานี้เลยว่าน่าสนใจ เลยอยาก share เพราะเห็น Blog thai ไม่ค่อยจะมี share มาสักเท่าไหร่ ใน Blog ที่เขียนนี้สำหรับผู้เริ่มต้นแต่พอมีความรู้เรื่อง vue พื้นฐานมาแล้วนะ ถ้าใครไม่มีก็ลองไปอ่านในนี้ดู

มาเล่น vue.js กันเถอะ มาเล่น vue.js กันเถอะ

มาเกริ่นกันนิดนึง

สิ่งที่เราจะนำมาใช้ใน Project นี้หลักๆ เลยก็คือ Vue.Js แล้วส่วนการทำ Login Social นั้นผมเลือกใช้ Firebase ในการทำใน Project นี้เนื่องจากง่ายแหละเป็นที่นิยมมากในการ Project ที่มีขนาดใหญ่ไม่มาก

ซึ่ง Firebase Authentication นั้นจะช่วยให้เราดึง Library ที่ทำ Login Social มาใช้ได้ง่ายมาก ไม่เชื่อลองตามลงมาอ่านดู

มาเริ่มสร้าง Project กัน

vue create vue-login-social

สำหรับ Project นี้ผมจะติดตั้งผ่าน Vue Cli ถ้าใครยังไม่ได้ติดตั้งอะไรเลย แล้วพึ่งมาติดตั้ง vue ให้แนะนำไปโหลด Node.js ไว้ในเครื่องแล้วพิมพ์คำสั้ง

# ทำการติดตั้ง vue cli
$ npm install -g @vue/cli
# แล้วลอง ตรวจสอบ version ของ vue ดู
$ vue --version

จากนั้นทำการเริ่ม Run Project กัน

# ทำการ run vue
$ npm run serve

ทำการไป เข้า website ของเราที่สร้างมาได้เลย http://localhost:8080/ ก็จะได้หน้า website vue ขึ้นมา

เดียวเราจะทำการปรับเปลี่ยนหน้าตา website VueJs ที่เราได้ติดตั้ง ซึ่งผมจะทำการ mockup หน้า website ก่อนที่จะเอา function ไปใช้งาน

เราจะทำการสร้างปุ่มเพิ่ม ชื่อว่า facebook และ google เพราะตัวอย่างที่ผมจะทำ จะแสดงให้เห็นว่า เราจะทำ login social ของ facebook และ google ทำยังไง

เดียวแปะ code ที่แก้ไขให้ โดยเราจะไปแก้ไขใน File src/components/HelloWorld.vue

จากนั้นก่อนที่เราจะทำการแก้ไข code เราจะไปทำการ setting ตัว firebase ก่อนเพื่อที่จะขออนุญาติเปิดการใช้งาน Login Social ของแต่ละเจ้า

มาเริ่มจาก สร้าง Firebase ให้ได้

เอา link นี้ไป สะ !!!

Sign in - Google Accounts

link นี้จะเป็นการเข้าใช้งาน Firebase โดยที่สำคัญเราต้องมีรหัสของ Google ก่อนถ้าใครไม่มีลองไปสมัครพวก Gmail ก่อนเลย

เมื่อสมัครอะไรเรียบร้อย ก็เข้ามากรอกรหัสที่เราสมัครเพื่อที่จะเข้าใช้งาน Firebase

เมื่อเรา Login เรียบร้อยจะเห็น ปุ่มเพิ่มโครงการในลักษณะแบบนี้เพื่อที่เราจะเพิ่มโครงการ ก็ทำการกดเข้าไปโลด

จากนั้นเราก็จะทำการกรอกข้อมูล เพื่อสร้าง โครงการของ Firebase

1. จะเป็นส่วนที่ให้เรากรอกชื่อของโครงการ
2. จะเป็น checkbox เพื่อที่จะให้เรายอมรับข้อตกลงเงื่อนไข ตามกฏของ Firebase กำหนด
3. ทำการกดสร้างโครงการ

ถ้าเราสร้างเสร็จไม่มีขั้นตอนไหนผิดพลาดก็จะแสดงหน้านี้ขึ้นมา แล้วกด ต่อไป

ก็ถือว่าขั้นตอนการสร้างโครงการของเราเป็นอันเสร็จสิ้น

ต่อไปทำ Login Google

เราจะทำการเลือก เข้าไปใน menu ที่มีชื่อว่า Authentication แล้วก็เข้าไปยัง วิธีการลงชื่อเข้าใช้ จากนั้นเราก็จะมาเรียกใช้งานส่วนของ Google

จากนั้นเราก็จะทำการ set ข้อมูลเพื่อใช้ Google Login

1. เราจะกรอกชื่อของโครงการที่เราทำไป
2. เลือก email ที่สนับสนุนโครงการ
3. เปิดใช้งาน Login google
4. บันทึกเพื่อที่จะเปิดใช้งาน Login Google

ทำการ setting เรียบร้อยแต่ว่ายังใช้งานไม่ได้ เพราะว่าขั้นตอนนี้เป็นเพียงแค่เรามาเปิดใช้งานเฉย แต่เรายังไม่ได้เอามาใช้งานเลย

ใช้งาน Login Google กัน Let’s go.

เราจะกลับมาหน้าแรกของโครงการที่เราได้สร้างขั้นมาก่อน

จากนั้นเราจะทำการ กดปุ่มที่ผมตีกรอบให้สีแดงเพื่อที่เราจะรับ code สำหรับ config ที่เราจะเอาไปใส่ใน vue ก่อน

เราก็จะเอา code ส่วนที่ผมตีกรอบนั้นเอาเข้าไปใช้ใน vue โดน File ที่เราจะเอา code ไปไว้จะอยู่ใน src/main.js

ยืมรูปมาแปะ

แล้วเราก็มาทำการติดตั้ง Library Firebase เข้าไปใช้ใน Project ของเราโดยการเข้าไปที่ Terminal แล้วพิมพ์คำสั่งนี้เลย

$ npm install --save firebase

อย่าลืม import firebase มาด้วยนะ จากรูป ในบรรทัดที่ 2

$ import firebase from 'firebase'

และแล้วเราก็จะกลับไปแก้ไข code ในหน้า src/components/HelloWorld.vue กันก่อนเพื่อที่จะทำ Login google

จากนั้น ลองกด login google แล้วเปิดเมนูตรวจสอบเพื่อดู console log ผมจะทำให้มัน console log ออกมาซึ่ง ถ้าได้แค่นี้ก็ถือว่าได้แล้วที่เหลือก็อยู่ที่ตัวเองแล้วละ ^_^

Step ต่อไป ทำ Login Facebook

เดียวเรากลับไปที่ Firebase กันก่อนเพื่อที่จะไป set up ข้อมูลเพื่อให้ทำการ Login

แต่ Login ของ Facebook มันจะไม่ได้จบที่ Firebase อย่างเดียวดิ เราต้องไป ตั้งค่าใน Facebook developer ด้วย

Facebook for Developers

เข้าไป website ข้างบน ทำการเข้าสู่ระบบ เรียบร้อย จากนั้นเราจะเข้าไปสร้าง แอพสำหรับให้รองรับการทำ Login Social Facebook โดยเข้าไปที่เมนู แอพของฉัน -> เพิ่มแอพใหม่

การเพิ่ม Product ที่ใช้สำหรับ Login Facebook กด set up แล้วก็เอา Url ของ vue ไปใส่ก่อน localhost:8080

จากนั้นกลับไปที่ Firebase เพื่อที่จะไป Copy Url OAuth มาใช้งาน

เมื่อ Copy เสร็จแล้วเราจะเอา Url ตัวนี้ไป แปะไว้ใน Facebook Develop ที่ได้สร้างขึ้นมา โดยเมื่อเข้าไปที่หน้า Facebook Develop จะมีเมนูด้านซ้ายมือเราจะเข้าไปที่ Setting -> Basic จากนั้นเอา url ที่ได้มาไป แปะไว้ใน input ของ Privacy Policy URL ได้เลย

ข้อสังเกตุ จะเห็นว่าหน้านี้ที่เราเข้าไปใน Facebook Dev (ขอพิมพ์ย่อละกันขี้เกียจพิมพ์ยาว ) จะมี input ที่หัวข้อ App ID และ App Secret ซึ่งตรงกับที่ Firebase ต้องการพอดี เรากก็จะทำการพวกนี้ไปแปะใน Firebase ตัว App secret นั้นเราต้องกด show ก่อนนะถึงจะได้ key ของมันมา

เฮ้ยลืมบอกอย่างหนึ่ง กดเปลียน status จาก In Development ที่เป็น off ให้เปลี่ยนเป็ฯ on ด้วยละ

เออ ลืมบอก อีกหนึ่งขึ้นตอนไป ก็คือว่า ตัว Url ตัวที่เราเอาไปใส่ตัว Privacy Policy URL เราจะต้องเอาไปแปะ ไว้ใน Product ของเราด้วย

จากนั้นก็เป็นเรียบร้อยเราก็จะกลับไปนำ App ID และ App Secret ไปแปะไว้ใน Firebase โดย input นั้นมันจะปิดอยู่โดยการที่เราจะเอาไปแปะได้นั้นเราต้องกดเปิดใช้งานก่อนแล้วทำการเอา key 2 ตัวนั้นมาใส่จากนั้นกด Save

เมื่อ save เสร็จเราก็จะไปปรับ code ใน File HelloWorld.vue อีกนิดนึงโดยการเพิ่มส่วนของ login Facebook ลงไป

ถือว่าเสร็จสิ้นเรียบร้อยในการทำ Login Facebook กับ Google โดยการใช้ Firebase ใน vue.js ไม่ยากเลยใช้ไหม

ที่จริงไม่ได้ยากหลอกแค่ผมอธิบายไม่รู้เรื่องแค่นั้นเอง Hahaha!!

หากมีข้อผิดพลาดประการใดต้องขออภัยด้วย 😀😀😀😀😀😀😀

Vue 2 + Firebase: How to add Firebase Social Sign In into your Vue application