มารวมการทำงาน Facebook Login กับ Firebase สำหรับ iOS กันเถอะนะ

สวัสดีค่ะ มาถึงขั้นตอนนี้เราจะลองประยุกต์รวมการทำงานของ Facebook กับ Firebase กันดูบ้างค่ะ ซึ่งการทำงานที่จะลองเล่นกันนี้เป็นการ Login เข้าสู่แอปพลิเคชันผ่าน Account Facebook และเก็บข้อมูลของ Uesr คนนั้นไว้ใน Firebase ค่ะ ลองดูภาพการทำงานกันง่ายๆ ก่อนนะคะ




เริ่มการทำงานเมื่อเราสร้าง Project ให้เราเลือกสร้าง app ที่จะนำมาใช้ร่วมกับ Firebase Project นี้ (หากเลือกใช้ Firebase อันเดิม เราสามารถสร้าง app ใหม่เชื่อมต่อเพิ่มได้เช่นกันค่ะ)

สร้าง App ที่จะใช้งานกับ Firebase ก้อนนี้

จากนั้นจะเข้าสู่หน้า Add Firebase to iOS App ค่ะ ขั้นตอนนี้ลองไปดูที่ หัวข้อการเชื่อมต่อ Firebase ได้นะคะ

เมื่อเราจัดการโปรเจคกับ Firebase เสร็จแล้วคราวนี้เราจะไปจัดการส่วนของ Facebook กันบ้าง โดยเริ่มจากเปิดหน้าเว็บ developers ของ facebook ตามลิงค์นี้เลยค่ะ https://developers.facebook.com แล้วสร้าง App ID สำหรับนำไปเชื่อมโยงกับ Firebase เพื่อให้ทั้งคู่รู้จักกันค่ะ

สร้าง App ID ส่วนของ Facebook

พอเข้าสู่หน้า Dashboard แล้ว เราจะเอาข้อมูลอย่าง App ID กับ App Secret  ไปให้กับ Firebase ค่ะ

Dashboard ส่วนของ Facebook

โดยไปที่ส่วนของ Authentication ใน Firebase ค่ะจากนั้นกำหนดส่วนของ Facebook ให้เป็น Enable แล้วเอา App ID กับ App Secret ไปใส่ค่ะ แล้วอย่าลืม Save นะคะ 😅

ระบุค่า App ID และ App Secret ที่ได้จาก Facebook

เสร็จการ Setting ต่างๆ เบื้องต้นแล้ว ถึงเวลาไปเขียนคำสั่งและจัดการคำสั่งใน Xcode กันแล้วค่ะ (จริงๆ มีลำดับการทำงานอยู่ในนี้นะคะ https://developers.facebook.com/docs/ios/getting-started ) เรามาไล่กันไปทีละลำดับเลยค่ะ หรืออีกทางเมื่อเราไปที่ Dashboard แล้วเลือกที่ Platform ก็จะมีลำดับให้ทำเหมือนกันค่ะ

เริ่มจาก Download Framework เพิ่มส่วนของ info.plist และกำหนด Bundle ID ค่ะ

เมื่อ Download ได้แล้วให้เอา Bolts.framework, FBSDKCoreKit.Framework, FBSDKLoginKit.Framework, FBSDKShareKit.Framework ใส่ใน Xcode Project ของเรา

Copy ข้อมูลเหล่านี้ใส่ใน info.plist

กำหนด Bundle ID แล้วกด Next

หลังจากนั้นเราจะต้องเพิ่มคำสั่งในไฟล์ AppDelegate.swift ด้วยการ

 

และเพิ่ม Function ลงไป

คราวนี้เรามาทำส่วนของ ViewController.swift กันบ้าง หลักๆ เลยคือการสร้างปุ่ม Facebook Login ค่ะ ให้เรา import FBSDKLoginKit มาก่อนค่ะ แล้วใส่คำสั่งสร้าง Button ของ Facebook ใน viewDidLoad ตามตัวอย่างค่ะ

สร้างปุ่ม Login Facebook

เพียงเท่านี้เมื่อเราลอง Run แอปพลิเคชันดูผลลัพธ์ที่ได้จะเป็นหน้าดังนี้ค่ะ

หน้าการทำงานของแอปพลิเคชัน

แต่เท่านั้นยังไม่พอค่ะ เราอยาก Login ผ่าน Account Facebook แล้ว Firebase ของเราจะต้องเก็บข้อมูลของสมาชิกด้วย ดังนั้นงานถัดมาของเราคือ จัดการเรื่องของ Authentication ใน Firebase ก่อนเลยค่ะ

ขอกลับไป Setting อะไรอีกสักนิดที่ Facebook กับ Firebase นะคะ ส่วนของ Authentication Facebook จะมี URI ของ OAuth ให้ Copy ไปวางที่ส่วนของ Products Facebook Login ดังภาพ

ใส่ URI ของ OAuth

ไปค่ะ ... ไปเขียน Code กันต่อ ที่ไฟล์ AppDelegate.swift เพิ่มคำสั่งตามนี้ค่ะ

เรียบร้อยแล้วเราไปจัดการการทำงานของปุ่ม Login กันต่อค่ะ โดยที่ไฟล์ ViewController.swift เราจะเพิ่ม FBSDKLoginButtonDelegate ให้กับ ViewController รวมทั้งประกาศ FIRDatabaseReference สำหรับเก็บข้อมูลสมาชิกเข้า Database ด้วยเลยค่ะ และเพิ่มอีก 1 คำสั่ง คือ loginButton.delegate ใน viewDidLoad เป็น

คราวนี้ Project ของเราจะมี Error อยู่ เพราะว่าเมื่อเราเพิ่ม FBSDKLoginButtonDelegate แล้ว เราจะต้องเพิ่ม function อีก 2 function คือ

ในการทำงานของ function loginButton ถ้าไม่มี Error อะไร ก็ขึ้นอยู่กับเราแล้วค่ะ จะให้ทำงานอะไรต่อ แต่ของเราคือเก็บข้อมูลลง Database ดังนั้นเราจะใส่

(class member อยู่ในบทความก่อนหน้าลองย้อนไปดูนะคะ)

เพียงเท่านี้เราก็จะสามารถ Login ผ่าน Account Facebook และเก็บบันทึกข้อมูลลง Database ได้แล้วค่ะ ลองดูนะคะ ขั้นตอนอาจเยอะไปหน่อย 😅😅😅