LINE LOGIN รู้จักการใช้ Login by LINE
สวัสดีครับเคยสงสัยกันไหมว่าในหลายๆ เวบหรือ App ที่เราสามารถ Log in by facebook, apple, google หรือ line มันมีหลักการทำงานกันยังไง
การที่สามารถ log in by …(อะไรก็แล้วแต่)… ทำให้เราสามารถข้ามขั้นตอนการกรอกฟอร์มสมัครที่มีความจุกจิกไปได้อย่างง่ายๆ ซึ่งแน่นอนว่าตัวผู้ใช้เองก็ขี้เกียจที่จะต้องมานั่งกรอกอะไรพวกนี้อย่างแน่นอนใช่ไหมครับ ทำสามารถเพิ่ม UX ให้กับผู้ใช้งานระบบของเราได้อย่างดีเลยทีเดียว
หลังจากร่ายกันมาซะยาวก็มาเข้าเรื่องกันเลยดีกว่าวันนี้ทางผมจะเลือกทำตัวอย่างโดยใช้ Firebase + Firebase function+ Nextjs + Express สำหรับการ setting project ผมได้เขียนไว้แล้วในบทความข้างล่างนะครับ จะขอข้ามขั้นตอนนี้ไปเลยนะครับ
ว่ากันด้วยขั้นตอนของการเชื่อมต่อการล๊อคอินโดย Line account ทาง Line ก็ได้มี guide line ดังนี้ครับ
- ผู้ใช้งานกดปุ่ม Log in by Line หน้าระบบจะ redirect ไปยังหน้ายืนยันตัวตนของ Line platform
- ผู้ใช้ทำการยืนยันตัวตนผ่าน Line platform
- เมื่อทำการยืนยันตัวตนเสร็จสิ้น Line จะทำการ callback กลับมายัง url ที่เราลงทะเบียนไว้กับทาง Line พร้อมด้วย authorization code
- เมื่อได้ authorization code ระบบก็จะทำการขอ access token จากทาง Line
- หลังจากได้ access token มาแล้วเราก็จะเอาไปขอ user profile เพื่อที่จะลงทะเบียนผู้ใช้งานใหม่หรือทำการสร้าง token จากระบบของเราเองอีกทีหนึ่งเพื่อนำไปใช้งานยืนยันตัวตนกับระบบเราอีกทีครับ
เห็นไหมครับว่าขั้นตอนไม่ได้ยุ่งยากเลยโดยต่อไปมาดูขั้นตอนในการขอเปิดการใช้งาน Line login กันเลยครับเริ่มจากเข้าไป Line developer console ทำการสร้าง Provider หรือใครที่อยู่แล้วก็เลือก Provider ที่ต้องการ
ทำการสร้าง Channel ใหม่โดยเลือกเป็น Line Login สำหรับขั้นตอนการสร้าง Channel ผมได้เขียนไว้ในบทความนี้ครับ
หลังจากที่สร้าง Channel ขึ้นมาแล้วก็เข้าไปทำการตั้งค่า Line login setting เพื่อลงทะเบียนลิ้งค์ (Callback URL) สำหรับการยืนยันตัวตนผ่าน web หรือกรณีที่ต้องการใช้การ login เพื่อใช้ใน mobile app ก็ทำหน้าหน้านี้เช่นกัน
สำหรับ Callback URL นั้นทางไลน์อนุญาติให้เพิ่มได้สูงสุด 400 URL 1 บรรทัดต่อ 1 URL และเราสามารถใช้ localhost ได้ด้วยนะครับ สำหรับ local develop
สุดท้ายขั้นการลงทะเบียนที่สำคัญที่สุดคือการลงทะเบียน OpenID Connect ที่จะทำการขอ email ของผู้ใช้งาน เพื่อนำมาสร้าง user account ของระบบเราครับ
การขอ OpenID เราต้องเขียนรายละเอียดว่าเราต้องการใช้ email ไปทำอะไรบ้างโดยอัปโหลดเป็นไฟล์รูปส่งเข้าไปแล้วทำการ submit เป็นอันเสร็จสิ้น
ต่อไปให้เราทำการเตรียม Parameter ดังนี้ครับ
Channel ID / Channel secret ID
จากรูปที่วาดไปข้างบนจะเห็นได้ว่าเราต้องเตรียมหน้า page ที่ต้องรองรับการยืนยันตัวตนอย่างน้อย 2 page คือ
- หน้า Login
- หน้าที่เอาไว้รอรับ callback url กลับมาจาก Line
อย่างแรกเราก็ทำการสร้างหน้า Log in ขึ้นมาก่อน
ต่อด้วยหน้าเอาไว้รอ callback กลับมา
ในส่วนของ callback กลับมานั้นจะเห็นว่าใน function getInitialProps เราจะได้รับ authorization code ซึ่งฝากมากับ query parameter เพื่อที่จะนำไปใช้ขอ access token และนำ access token ไปขอ user profile ในขั้นต่อไปตาม code ตัวอย่างด้านล่างเลยครับ จากตัวอย่าง code อย่าลืมเปลี่ยน line channel ID และ line channel secret ด้วยนะครับ
สุดท้ายแล้วหลังจากที่เราได้ข้อมูล email / displayname / avatar สำหรับนำไปสร้างข้อมูลผู้ใช้ใหม่ นอกจากนี้ยังสามารถใช้ access token ที่ออกโดย line ไปใช้ในการยืนยันตัวผ่าน API ระหว่าง client / server ของ application ที่เราจะพัฒนาต่อไปได้หลายเลยครับ
ส่วนเรื่องการทำ backend ขอยังไม่พูดถึงในบทความนี้นะครับเพราะก็เขียนมาซะยาวแล้วเดี๋ยวคนอ่านจะง่วงเอา 55555 สุดท้ายนี้ก็หวังว่าบทความนี้จะช่วยเป็น guide line ในการพัฒนาของผู้อ่านได้ไม่มากก็น้อยนะครับ ส่วนวันนี้ขอจบบทความไว้เพียงเท่านี้ครับ ใครที่สงสัยก็คอมเม้นไว้ได้เลยนะครับ
อ้างอิง