ทำ Passwordless Authentication (Email link) ด้วย Firebase

เพราะการยืนยันตัวตน ไม่ได้มีแค่ password อีกต่อไป…

จริงๆ หลักของการยืนยันตัวตน เพียงแค่ต้องการรู้ว่าใช่คนๆนี้จริงไหม ซึ่งก็ทำได้หลากหลายวิธีด้วยกัน: ยืนยันด้วย สิ่งที่รู้ อย่าง password สิ่งที่มี อย่าง กุญแจ, smart card หรือ สิ่งที่เป็น อย่าง fingerprint และ biometric

วิธีการสุดเบสิคในการยืนยันตัวตนทั้งบนแอปมือถือและเว็บไซต์ทุกยุคทุกสมัย ก็คงหนีไม่พ้น password ซึ่ง password เป็นการยืนยันตัวตนด้วยสิ่งที่รู้ (ที่คนอื่นก็ห้ามรู้!) ปัญหาของ password ก็คือ ต้องง่ายพอที่จะจำได้ แต่ต้องไม่ง่ายไปจนคนอื่นเดาออก เหตุผลที่คนไม่อยากสร้าง password เพิ่ม เพราะต้องใช้พื้นที่สมองในการจดจำเพิ่ม คนส่วนใหญ่จึงรู้สึกสบายใจที่จะยืนยันตัวตนด้วยสิ่งที่มีอยู่แล้วมากกว่า ซึ่งเป็นไอเดียของ Passwordless Authentication ที่ใช้สิ่งที่มีอยู่แล้วอย่าง email account หรือเบอร์โทรศัพท์ในการยืนยันตัวตนแทน password

Slack ใช้ email ในการ Authentication

Medium เอง ก็ยังมีทางเลือกให้ใช้ Email ในการ Authentication

ซึ่ง 2–3 ปีมานี้ ก็เริ่มมีการใช้ Passwordless Authentication กันมากขึ้น แต่อาจจะยังไม่แพร่หลายมากนัก ด้วยข้อจำกัดที่ต้องพัฒนาทั้ง backend และ frontend ซึ่งหลายทีมก็อาจจะรู้สึกว่ายังไม่อยากจะเสียเวลาและ effort ไปกับตรงนั้นมากนัก แต่ตอนนี้ขอบอกเลยว่าง่ายกว่าเดิมเยอะ เพราะเริ่มมีหลายๆ service ที่ทำให้การพัฒนาระบบ Passwordless Authentication ง่ายขึ้นเยอะมาก ไม่ว่าจะเป็น Auth0 หรือ Firebase

Passwordless Authentication with Firebase

หลักการก็เหมือนที่ Slack และ Medium ใช้เลย คือ ผู้ใช้กรอกแค่ email จากนั้นจะมี link ที่คลิกแล้วสามารถเข้าสู่ระบบได้เลยส่งไปให้ ซึ่งไม่ได้มีข้อดีแค่ user ไม่ต้องจำ password เพิ่ม แต่วิธีการนี้ยัง…

• ช่วยลดความเสี่ยงในการใช้ password ซ้ำกันหลายๆ account ของ user
• ช่วย verify ว่า user เป็นเจ้าของ email จริงๆ
• ใช้แค่ email account ไม่จำเป็นต้องมีเบอร์โทรศัพท์ หรือบัญชี social media
• user ปัจจุบันที่อาจจะเคยสมัครสมาชิกไว้ แต่ลืม password ไปแล้ว สามารถเข้าสู่ระบบได้ โดยไม่จำเป็นต้อง reset password

ซึ่งวันนี้เราจะมาลองทำ Passwordless Authentication แบบง่ายๆ ด้วย Firebase ตาม flow ด้านล่างนี้

กรอก email เพื่อรับ link > กด link จาก email เพื่อเข้าสู่ระบบ

1. เปิดใช้งาน Passwordless sign-in โดยเข้าไปที่เมนู Authentication ใน Firebase console

2. เปิดใช้งาน Dynamic links และ Setup แอปเพื่อให้สามารถรับ dynamic links ได้ (กรณีที่ยังไม่เคยใช้งาน Dynamic links มาก่อน) โดยเข้าไปที่ Firebase console และทำตามขั้นตอน 2–3 steps ส่วนการ setup ในแอปขอสรุปเป็นขั้นตอนสั้นๆ ดังนี้

• ติดตั้ง Dynamic links โดยทำการ install pod ‘Firebase/DynamicLinks’ เข้ามาในโปรเจค
• ตั้งค่า URL Types ใน Info tab ของโปรเจค โดยใช้ $(PRODUCT_BUNDLE_IDENTIFIER) เป็น URL Scheme
• ตั้งค่า Associated Domains ใน Capabilities tab ของโปรเจค — enable Associated Domains แล้ว add domain ที่เพิ่งสร้างมาจากข้อ 2 ลงไป ตาม format ดังนี้ applinks:your_subdomain.page.link
• ตั้งค่า iOS bundle ID, App Store ID และ Apple Developer Team ID ที่ Project Setting ใน Firebase Console

3. ติดตั้ง Firebase Authentication ในแอป (กรณีที่ยังไม่เคยใช้งาน Authentication ของ Firebase มาก่อน) โดยทำการ install pod ‘Firebase/Auth’ เข้ามาในโปรเจค

4. Implement หน้าสำหรับขอ Passwordless sign-in link — จริงๆตามใจเลยแหละว่าอยากได้หน้าตา หรือ flow ของแอปแบบไหน ตามตัวอย่าง มีแค่ TextField ไว้ให้ user กรอก email และปุ่มเพื่อกดขอรับ link

UI สำหรับขอ Passwordless authentication link

5. ส่ง Passwordless sign-in link ให้ user โดยการเรียก function sendSignInLinkToEmail:actionCodeSettings:completion: จะเห็นว่า function นี้รับ parameters 2 ตัวด้วยกัน นั่นก็คือ email และ ActionCodeSettings ซึ่งแน่นอน email เราได้จาก user อยู่ละ แล้ว ActionCodeSettings ล่ะ มาจากไหนกัน?

ActionCodeSettings เป็น object ที่เราสามารถ set คุณสมบัติต่างๆให้กับ link ที่จะถูกส่งให้ user โดยค่าที่ต้อง set มีดังนี้

• iOSBundleID และ AndroidPackageName แอปที่ต้องการจะเปิด ถ้า user กด link นั้นจาก email บนมือถือ
• handleCodeInApp อันนี้ต้อง set เป็น true เสมอ เพราะสุดท้ายแล้วตอนจบของ flow Passwordless sign-in นี้คือ user เค้าต้องการเข้าสู่ระบบในแอปไงล่ะ คนดี
• url url นี้จะถูกใช้ในกรณีที่ user กด link จาก email ในช่องทางอื่นๆ เช่น กดจากในคอม หรือกดในมือถือเครื่องอื่นที่อาจจะไม่ได้ลงแอปไว้… โดยเราอาจจะตั้ง url ตรงนี้เป็น static page โง่ๆที่บอกว่า หึ่ย แก แกต้องกด link จาก email ในเครื่องที่แกติดตั้งแอปไว้เท่านั้นนะเว้ย …หรือบางคนอาจมีท่ายากกว่านั้น แบบว่า ถ้า user ไปกด link ในเครื่องที่ยังไม่มีแอป อยากพา user ไปหน้า download แอปเลย พอ download เสร็จกดเข้ามา ก็อยากจะ sign-in ให้ user เลย แบบนี้ก็อาจต้องตั้ง url ตรงนี้เป็น dynamic link ที่แนบ email เป็น query string ไปด้วย เพื่อ handle ในท่าที่ยากๆแบบนั้นได้ ซึ่งเอาจริงคือ ก็แล้วแต่เราแหละว่าต้องการให้ flow มันออกมาเป็นรูปแบบไหน แต่สิ่งที่สำคัญคือ โดเมนของ url นี้จะต้องอยู่ใน Authorised domains ซึ่งเราสามารถเข้าไป set ได้ที่เมนู Authentication > Sign-in Method ใน Firebase Console

ActionCodeSettings

อย่าลืมเอา domain ของ url ที่ใช้ มาเพิ่มใน Authorised domains

เมื่อสร้าง ActionCodeSettings และมี email พร้อมแล้ว ก็ได้เวลาส่ง link ให้ user โดยถ้าส่งเรียบร้อยแล้ว เราจะแอบเก็บ email ไว้ในแอปด้วย เพื่อเอาไว้ sign-in ให้ user ในขั้นตอนถัดไป

ลองไปเช็ค email จะได้ email ลักษณะนี้ ซึ่งถ้าลองแกะ link ดู มันก็คือ dynamic link ที่มี query string เกี่ยวกับการ sign in เพิ่มเข้ามา ซึ่ง Firebase generate มาให้จาก ActionCodeSettings ที่เรากำหนดไปข้างต้นนั่นแหละ

Email ที่ได้รับ

6. รับมือตอน user กด link จาก email — อย่างที่บอกว่า link ที่ได้ ก็เป็น dynamic links ทั่วไปนั่นแหละ ซึ่งแปลว่าเราก็ต้อง handle ในแอปเหมือนกับ dynamic links รูปแบบอื่นๆ

ด้วยการ verify ก่อนว่า link นี้ เป็น sign-in link มั้ย ถ้าใช่ ก็จะทำการ sign-in เข้าสู่ระบบให้ user ด้วย link (ที่เพิ่งได้มา) และ email (ที่แอบ save เอาไว้ในแอปตั้งแต่ขั้นตอนก่อนหน้านี้) ได้เลย

การ sign-in ก็แค่เรียก signInWithEmail:link:completion:ซึ่งถ้าไม่มีอะไรผิดพลาด เราก็จะได้ข้อมูล user กลับมา และถือว่าการ sign-in เสร็จสมบูรณ์แล้ว ฮูเร! 🥳

ข้อจำกัด
ตอนนี้ใน Firebase ยัง customise email ไม่ได้ ก็คือ email ที่ user จะได้รับ หน้าตาจะโล้นๆ เหมือนกับภาพที่แนบไว้ด้านบน แต่คาดว่าอีกไม่นานคงทำได้เหมือนกับเจ้าอื่นๆ

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

จริงๆ อยากบอกว่า ทำเลยค่ะ มีคนรอใช้อยู่ 🙋‍♀️