[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 เลยครับ

build.gradle (project)
build.gradle (app)

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

ระบุชื่อโครงการ Firebase ที่เราจะเอาไปใช้กับแอพ

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

หน้าตาของ Firebase Console ในส่วน Authentication

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

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

แถบ Assistant ของ Android Studio สำหรับเชื่อมต่อ Firebase
หน้าต่างให้เลือกโครงการ Firebase ที่เราจะเชื่อมต่อ

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

หน้าต่างแสดงรายละเอียดของ lib ที่จะเพิ่มเข้ามาในโปรเจค

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

Internet Permission

ก็เป็นอันเสร็จพิธี ไปลงมือลุย code กันเลยดีกว่าครับ …

Create Android Application

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

หน้าแรก activity_main.xml

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

MainActivity.kt

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

หน้า Sign in activity_login.xml

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

LoginActivity.kt

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

หน้า Sign up activity_register.xml

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

RegisterActivity.kt

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

หน้าโชว์ข้อมูล activity_result.xml

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

ResultActivity.kt

เป็นอย่างไรกันบ้างครับ ไม่ยากใช่ไหมครับ ผมได้อัพโหลด Source code ไว้บน Github แล้ว สามารถ pull ลงมาลองเล่นกันดูได้ครับผม

หวังว่าจะเป็นประโยชน์กับทุกท่านครับ หากมีข้อสงสัยเพิ่มเติม สามารถเข้ามาสอบถามหรือแนะนำได้ครับผม

สำหรับบทความหน้า ผมจะมาพูดต่อในส่วนของการ Sign in ด้วย Facebook อย่าลืมติดตามกันนะครับ :D

imkrz

krz space

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade