[Kotlin] เขียนแอพ Sign in/Sign up อย่างง่ายโดยใช้ Firebase Authentication ตอนที่ 1

เขียนแอพ Android ด้วยภาษา Kotlin สุดฮิต ให้สามารถ Login ผ่าน Service ของ Firebase Authentication เค้าทำกันยังไง วันนี้มาเรียนรู้ไปพร้อมๆกันเลยครับ
ก่อนอื่นเลยนะครับ เรามาทำความรู้จักเจ้า Firebase Authentication กันก่อนว่ามันทำงานยังไง
Firebase Authentication เป็น Service ที่จะเข้ามาจัดการในส่วนของการ Sign up, Sign in, Reset password และยังมีบริการการยืนยัน Email ให้อีกด้วย โดยจะมี SDK ให้ทาง Web, Android, iOS ไปติดตั้งและใช้งาน ซึ่งจะรองรับการ Sign in หลายรูปแบบทั้ง Email และ Password หรือจะเป็น Sign in ด้วย Social Network ต่างๆ จำพวก Facebook, Twitter, Google หรือจะ Sign in แบบไม่ระบุตัวตน ก็มีให้เลือกเช่นกัน

มาเริ่มกันเลยดีกว่าครับ :)
Setup Firebase และ Implement Auth SDK
ในการเขียนผมใช้ Android Studio 3.0 Canary 8 นะครับ เริ่มแรกมาก็สร้างโปรเจคตามปกติครับ ในที่นี้เราจะเขียนด้วย Kotlin เราก็เลือก Include Kotlin Support ด้วยครับ
ในส่วนของ build.gradle ส่วนแรก Library ที่ผมเพิ่มไปคือ Anko ครับ Anko คือ Lib ที่จะช่วยให้การเขียน Android ของเราง่ายขึ้นครับ เมื่อเสร็จเรียบร้อยก็ Sync Gradle เลยครับ


ทีนี้เราจะมาเพิ่ม Firebase Authenticate เข้าไปที่โปรเจคกันครับ โดยผมจะเริ่มจากการสร้างโปรเจคใหม่ใน Firebase Console ก่อนนะครับ

สร้างโครงการเสร็จจะเข้ามาในส่วนของ Dashboard ของโครงการ ซึ่งเราสามารถดู Stats ทุกอย่างได้ที่นี่ เราจะเข้ามาในส่วนของ Authentication จะเห็นได้ว่าสามารถ Sign in ได้หลากหลายแบบตามที่ได้กล่าวไปแล้วในข้างต้น

ซึ่งในตอนนี้เราจะเปิดใช้งานแค่ส่วนของการ Sign-in ด้วย Email และ Password เท่านั้นก่อนนะครับ

หลังจากเราเปิดใช้งานแล้วเนี่ย เราสามารถสร้าง User จากตัว Firebase Console ได้โดยตรงเลย แต่เราไม่ได้ต้องการแบบนั้นครับ เราจะมาสร้างแอพ Android เพื่อ Sign up และ Sign in กัน เราต้องมาเพิ่ม Firebase Authentication เข้าไปในโปรเจคของเราก่อนโดยไปที่ Android Studio ของเรา เลือกเมนู Tools > Firebase ทีนี้จะมี Assistant โผล่ขึ้นมาด้านขวาครับ เราก็เลือก Firebase Authentication แล้ว Connect to Firebase เลยครับ


จากนั้นเราก็เลือกโครงการที่จะเชื่อมต่อเข้ากับแอพของเรา แต่ยังไม่เสร็จนะครับ เราต้องเพิ่ม Lib ของ Firebase เข้ามาในโปรเจคก่อนโดยเลือก Add Firebase Authentication to your app

จะสังเกตได้ว่ามันจะไปเพิ่ม lib ที่ไฟล์ build.gradle ทั้ง 2 levels เลย หลังจากกด Accept Changes ไปแล้ว ก็รอให้ Gradle Sync ให้เรียบร้อย ต่อมาเรามาเพิ่ม Permission ให้กับแอพของเรา เพราะแอพเราต้องใช้ Internet โดยไปที่ไฟล์ AndroidManifest.xml

ก็เป็นอันเสร็จพิธี ไปลงมือลุย code กันเลยดีกว่าครับ …
Create Android Application
มาที่ MainActivity กันก่อนเลยครับ ในส่วนของ layout ผมได้ทำคร่าวๆไว้ประมาณนี้ โดยจะใช้ Constraint Layout ครับ ผมได้สร้างปุ่ม 3 ปุ่ม คือ Sign in ด้วยอีเมล, Sign in ด้วย Facebook และ Sign in ด้วย Google ซึ่ง 2 ปุ่มนี้ เราจะมาทำในตอนถัดๆไปนะครับ

ทีนี้มาดูที่ไฟล์ MainActivity.kt ผมแค่เช็คว่ามันมี Session ค้างอยู่หรือไม่ ถ้ามีอยู่แล้วให้เข้าไปที่หน้า Result เลย อีกส่วนหนึ่งคือ set action ให้ปุ่มไปหน้าถัดไป ซึ่งคือหน้า Sign in ครับ

หน้าถัดมาคือหน้า Login ผมทำ layout ไว้เพียงแค่ช่องกรอกอีเมลและรหัสผ่าน กับปุ่ม Sign in และ Create Account ครับ

ไฟล์ LoginActivity.kt เช่นเดิมครับ เช็คเหมือนเดิมว่าถ้ามี Session อยู่แล้ว ให้ไปโผล่หน้า Result เลย กับปุ่ม Sign in ที่จะรับค่าจากช่องอีเมลและรหัสผ่านมาเพื่อ Validate เบื้องต้นก่อน แล้วค่อยทำการ Sign in ซึ่งถ้าสำเร็จก็ไปที่หน้า Result ครับ

หน้า Create Account ผม copy layout เดิมมาเลยครับ เปลี่ยนตำแหน่งปุ่มนิดหน่อย

ส่วนไฟล์ RegisterActivity.kt หลักๆก็คล้ายๆกับ Sign in เลยครับ มี Validate หยาบๆก่อน ถ้า Sign up สำเร็จ ก็เข้าสู่หน้า Result ครับ

และสุดท้ายหน้า Result ผมทำ layout เพียงโชว์ข้อมูลพวก UID ของ user กับ email ที่สมัคร แล้วก็มีปุ่ม Sign out ออกง่ายๆครับ

ใน ResultActivity.kt ผมดึงข้อมูล user ที่ Sign in เข้ามาเพื่อมาโชว์บนหน้าจอ ถ้าไม่มีข้อมูล user ให้มันกลับไปที่หน้า Sign in ครับ

เป็นอย่างไรกันบ้างครับ ไม่ยากใช่ไหมครับ ผมได้อัพโหลด Source code ไว้บน Github แล้ว สามารถ pull ลงมาลองเล่นกันดูได้ครับผม
หวังว่าจะเป็นประโยชน์กับทุกท่านครับ หากมีข้อสงสัยเพิ่มเติม สามารถเข้ามาสอบถามหรือแนะนำได้ครับผม
สำหรับบทความหน้า ผมจะมาพูดต่อในส่วนของการ Sign in ด้วย Facebook อย่าลืมติดตามกันนะครับ :D
