web analytics

Flutter : ทำระบบลงทะเบียนยืนยันหมายเลขโทรศัพท์ด้วย Firebase Auth

สวัสดีผู้อ่านครับ บล็อกต่อเนื่องของ Firebase Auth ใน Flutter โดยในบล็อกนี้ผมจะพาไปลองเล่น Phone provider ซึ่งมันคือการ login ด้วยหมายเลขโทรศัพท์ และใช้ verify code ที่ส่งมาใน SMS ฟังดูเป็นเรื่องที่น่าจะทำยากใช่ไหม แต่ทว่า Firebase Auth ทำมาให้ใช้งานแบบง่ายๆ และจบในตัวเรียบร้อย และในบล็อกนี้ผมจะพาลองเล่น phone verification กัน เป็นไอเดียให้ผู้อ่านครับ

หากยังไม่ได้อ่านตอนก่อนหน้านี้ แนะนำอ่านก่อนนะครับ เพราะ Flutter Project จะต้องติดตั้ง Firebase ไว้แล้ว ใน android/iOS

เปิดใช้งาน Phone Provider

เริ่มจากเปิดใช้งาน Phone provider ใน Firebase โดยจะมีช่องสำหรับโหมดทดสอบ
บน emulator ให้ใส่หมายเลขโทรศัพท์อะไรก็ได้ลงไป และ verification code สำหรับทดสอบลงไป

ใน iOS จะต้อง enable app verification ก่อน ลองทำตามลิงค์ด้านล่างนี้เลย

https://firebase.google.com/docs/auth/ios/phone-auth#enable-app-verification

(ถ้าเคยทำแล้วก็ข้ามไปได้เลย) กรณี android เราต้องไปกำหนด fingerprint ใน Fireabse Project ของเรา ให้รันคำสั่งด้านล่างนี้ใน jre/bin โดยคำสั่งข้างล่างนี้จะเป็นการแสดง SHA-1 ของ debug ดังนั้นเลยใช้ path keystore ของโหมด debug

จากนั้นก็ copy fingerprint SHA-1 มาใส่ใน Firebase ที่เมนู Project Setting > Certificate fingerprint โดยในหน้านี้สามารถเพิ่ม
fingerprint ได้หลายอัน ดังนั้นในอนาคตถ้าเราจะ deploy app ขึ้น store เราก็มาเพิ่ม
fingerprint ของ release keystore

เพิ่ม Dependencies

ถ้ายังไม่ได้เพิ่ม firebase_auth ให้เพิ่มก่อนนะ ใน pubspec.yaml

เพิ่มปุ่ม login ด้วยหมายเลขโทรศัพท์

ในหน้าจอ login ให้เพิ่มปุ่มสำหรับเปลี่ยนไปที่หน้า phone verification ของเรา เพราะว่าต้องให้ user กรอกหมายเลขโทรศัพท์และ verify code

เพิ่ม route ให้กับปุ่ม ไปที่ MyPhoneVerifyPage

สร้างหน้า Phone verification

ที่หน้า phone verify จะมี TextField 2 ตัว คือ ช่องกรอกหมายเลขโทรศัพท์ และช่องกรอก verify code ดังนั้นจะต้องมี TextEditingController 2 ตัว และอย่าลืม พระเอกของเรา คือ FirebaseAuth

เอา controller ไปใส่ให้กับ TextField และตกแต่งได้ตามใจชอบ โดยจะต้องมีปุ่มสำหรับกดเพื่อให้ Firebase ส่ง verify codeไปยังหมายเลขโทรศัพท์ และปุ่มสำหรับ sign in ซึ่งในตัวอย่างนี้ผมขอ hardcode กำหนดรหัสประเทศเป็น +66 ตายตัวสำหรับประเทศไทย แต่ในการใช้งานจริงจะใช้แบบให้เลือกรหัสประเทศ (มี library อยู่)

method สำหรับส่ง sms ไปที่ user กับยืนยัน ขอเว้นไว้ก่อน เดี๋ยวค่อยมาเขียนเพิ่มเติม

จะได้หน้าจอแบบนี้ ไม่ได้เขียนให้รองรับ responsive ดังนั้นถ้ารันในจอเล็ก TextField มันอาจจะถูกบีบ

Verify phone number

มาทำส่วน verify จริงๆกัน เมื่อ user กดปุ่ม send แล้ว Firebase จะส่ง verify code 6 หลักไปทาง sms ซึ่งเราไม่รู้รหัสนั้น แต่สิ่งที่ firebase ให้เราคือ
verificationId ดังนั้นนเราจำเป็นต้องเก็บค่า verificationId เอาไว้ เพื่อนำไปแนบยืนยันกับ verify code ที่ user กรอก

การทำงานของการส่ง verify code ให้ user สามารถเรียก auth.verifyPhoneNumber ได้เลย แล้วกำหนด phoneNumber ให้มัน จากนั้นที่ codeSent เราจะได้ verificationId

ตอนนี้ verify code ได้ส่งไปที่ user แล้ว เราก็เอา verificationId กับ verify code มาใส่ให้ Firebase ผ่าน PhoneAuthProvider หากสำเร็จก็ให้ route ไปที่หน้า home

ที่หน้า home จากตอนก่อน ผมใช้ค่า email ของ user ที่ login มาแสดง ตอนนี้เนื่องจากเรา login ด้วย phone number ทำให้ email ค่าของมันจะเป็น null ดังนั้นผมเลยปรับให้เช็คว่าถ้า email เป็น null ก็ใช้ phone number แทน

มาลองเล่นกัน ให้ใส่หมายเลขโทรศัพท์ที่เราใส่ไว้ใน test ของ Firebase จากนั้นกด send เสร็จแล้ว ใส่ verify code กด sign in

ได้แล้ว ล้อคอินมาที่หน้า home แล้ว

ลองมาดูที่ Firebase จะพบว่า มี user ที่ล็อคอินด้วยหมายเลขโทรศัพท์เพิ่มขึ้นมาแล้ว

หากใช้งานแบบทดสอบ ใน emulator ได้แล้ว ลองไปใช้บนอุปกรณ์จริงได้เลย โดยใช้หมายเลขโทรศัพท์ของเราจริงๆ ก็จะมี verify code ส่งมาแบบนี้

สรุป

ง่ายใช่ไหมครับ ไม่ได้มีอะไรเยอะเลยสำหรับ Phone verification ดูเหมือนเป็นเรื่องที่ยาก ซึ่งเมื่อก่อนก็คงจะยากจริงๆ แต่เมื่อเราใช้ Firebase auth แล้วมันก็ง่ายไปหมด ยิ่งนำมาใช้กับ Flutter ยิ่งสะดวกไปอีกนะ

ยังมีบทความเรื่อง Flutter ที่ผมเขียนไว้ อีกเยอะเลยในบล็อกนี้ ไม่จำเป็นต้องไปเรียนที่ไหนแล้วละ แค่พยายามศึกษาด้วยตนเองเหมือนผมก็เขียนได้
https://benzneststudios.com/blog/category/flutter/

ฝาก facebook page ด้วยนะครับ (:
https://facebook.com/benzneststudios/

ตอนอื่นๆของ Firebase Auth