nitip.at

nitip.at

ทำ Social Login ด้วย Line API (PHP)

ทำ Social Login ด้วย Line API (PHP)

Nitipat Lowichakornthikun's photo
Nitipat Lowichakornthikun
·Sep 7, 2018·

2 min read

ตอนนี้งานที่เรากำลังทำอยู่ในบริษัทได้ตั้งโจทย์ที่สำคัญขึ้นมานั่นก็คือ “การให้ผู้ใช้งานของ Platform เรา สามารถเข้าสู่ระบบโดยผ่าน Social network เจ้าต่าง ๆ ให้ได้มากที่สุด เพื่อให้ อำนวยความสะดวกให้กับผู้ใช้จะได้สมัครสมาชิกกับเว็บเรา หรือ เข้าสู่ระบบได้อย่างรวดเร็วขึ้น”

ซึ่ง Project ที่เรารับมานั้นใช้ภาษา PHP บน Codeigniter framework สิ่งแรกเลยที่เราต้องค้นหาคือหาว่าตอนนี้มี Library ไหนไหมที่รองรับการใช้งาน Social network ได้เยอะ ๆ ตามโจทย์ที่เราได้รับมาข้างบน

จนเราได้มาเจอกับเจ้าตัวนี้ นั่นก็คือ Hybridauth, open source social login php library เรียกว่าเจ้า Library ตัวนี้ มันตอบโจทย์การใช้งานของเราอย่างมาก มีการรองรับ Social provider ต่าง ๆ ไว้อย่างมากมาย อีกทั้งก็มี Community ที่ยังมีความเคลื่อนไหวอย่างต่อเนื่อง

https://hybridauth.github.io/providers.html

แต่สิ่งนึงถ้าคุณได้ดูจากตารางด้านบน จะพบว่ายังไม่รองรับการใช้งานด้วย Line API วันนี้ผมเลยจะพาทุกคนมาสร้างระบบ Login ที่ผ่าน Line API กันครับ
โดยวิธีการทำผมจะแบ่งออกเป็น 2 ส่วนด้วยกัน นั่นก็คือ
Part 1 : การสร้าง Provider ใหม่ บน Line Developer เพื่อให้เราสามารถเชื่อมต่อกันกับ Line API ได้ด้วย client id และ secret key
Part 2: การติดตั้งตัวอย่างสคริปต์ และ การแก้ไข Config เพื่อทดลองใช้งาน

เรามาเริ่มกันเลย!

Part 1 : การสร้าง Provider ใหม่ บน Line Developer

  1. เข้าไปที่เมนูของการสร้าง Provider ใหม่ในหน้านี้

2. จากนั้นเข้าไปยัง Provider ที่เราสร้างใหม่เมื่อสักครู่นี้ ให้ทำการเลือก Create channel เป็น Line Login

3. กรอกข้อมูลเกี่ยวกับ Channel นี้ให้เรียบร้อย แต่ App name นั้นต้องไม่มีคำว่า Line อยู่ ไม่อย่างงั้นระบบจะไม่ให้ผ่านไปขั้นตอนถัดไปแบบนี้

สำหรับ App type ก็ให้เลือกเป็นประเภท WEB ด้วยครับ

4. ไปยัง Channel ที่เราสร้างใหม่ ตรงแท๊บ Channel settings ให้เลื่อนลงมาด้านล่างครับ จะเห็นหัวข้อ OpenID Connect ซึ่งเราต้องทำการยืนยันข้อตกลง และ ส่งรูปหน้าตาของระบบเรา (ตอนขั้นตอนการทดสอบสามารถส่งรูปอะไรไปก็ผ่าน แต่ของจริงใช้งานจริง ๆ ก็คงต้องมาสร้างใหม่อีกทีครับ) ใช้ในการยื่นขอสิทธิเข้าถึงข้อมูล E-mail ของผู้ใช้ เนื่องจากการที่เราทำระบบลงทะเบียนสิ่งที่เราขาดไม่ได้คือ E-mail ของผู้ใช้งาน

พอกรอกเสร็จ สถานะจะเป็น Applied

ตอนนี้เราก็ได้สร้าง Provider และข้างในก็มี Channel สำหรับเรียกใช้งาน Line login API กันไปแล้ว เดี๋ยวขั้นตอนถัดมาเราจะลองเอาสคริปต์ PHP ที่เขียนไว้มาทดลองเชื่อมต่อกันดู

Part 2: การติดตั้ง และ ทดลองเล่นสคริปต์

  1. ให้คุณทำ clone repo นี้ >> https://github.com/nitipatl/hybridauth-with-linelogin ลงไปที่เครื่องของคุณ
  2. เข้าไปที่โฟลเดอร์ของ code จากนั้นเปิด Terminal ให้ทำการติดตั้ง composer ด้วยคำสั่ง curl -sS getcomposer.org/installer | php
  3. สั่ง Install package ที่ใช้งานของ code ชุดนี้ ซึ่งผมใช้ hybridauth และ php-jwt ของ Firebase (ในการ Decode ตัว JWT token) ด้วยคำสั่ง php composer.phar install
  4. ทำการย้ายไฟล์ Line.php ไปอยู่ใน vendor/hybridauth/hybridauth/src/Provider/ เนื่องจาก Line ยังไม่รองรับใน hybridauth ซึ่งไฟล์นี้เราได้เขียนขึ้นมากันเองก่อน
  5. นำเอา Client id และ Secret key มาใช้งานจาก Channel settings ใน Part แรก โดยนำมาใส่ที่ไฟล์ index.php

หน้า Channel settings จากที่เราสร้างไปจะได้สองค่านี้มาใข้งาน

แก้ไข id (Channel id) และ secret (Channel secret) ในไฟล์ index.php

6. ทดลองเข้าใช้งานตาม Path ที่เราเอา Code นี้ไว้ เมื่อเข้ามาก็จะเจอปัญหานี้

เนื่องจากเรายังไม่ได้ไปเพิ่ม Callback url ที่เชื่อถือได้สำหรับตัว Channel นี้ในระบบ ให้ไปที่ App settings > Callback URL ให้กรอก Path ของระบบเรา เช่นของผมรันอยู่ที่ localhost:8082/index.php ผมก็กรอกค่านี้ไป เพื่อ Line API จะได้เชื่อมั่นว่านี้คือ Url ที่เราต้องการรับค่า token จริง ๆ หลังจากที่ผู้ใช้ Login สำเร็จแล้ว

7. หลังจาก Login ผ่าน Line ได้สำเร็จ เราจะได้หน้าตาออกมาประมาณนี้ ซึ่งสามารถใช้งานต่อได้ว่าจะเอาไปเชื่อมกับระบบสมาชิกของเราอย่างไรต่อไป

Next step

สำหรับ Line provider ที่ผมเขียนขึ้นมานั้นก็จะทำการส่ง PR กลับไปที่ HybridAuth ต่อไปครับ ถ้าได้รับการ Merge เข้า master ของโปรเจกต์แล้ว ผมจะมาอัพเดทบทความนี้ใหม่อีกทีนึงครับ วิธีการใช้งานก็น่าจะใช้งานได้ง่ายมากยิ่งขึ้น ไม่ต้องเสียเวลาคัดลอกไฟล์แบบตอนนี้

อ้างอิง

Integrating LINE Login with your web app
Note: This guide describes how to integrate LINE Login v2.1 which supports the OpenID Connect protocol and allows you…
developers.line.me

Getting started with LINE Login
You have now created a channel for your app or website. Next, configure your channel to integrate LINE Login into your…
developers.line.me

สร้างระบบ Firebase Custom Authentication ด้วย LINE Login v2.1
ตลอด 1 ปีที่ผ่านมา ผมได้รับคำถามจากสมาชิกในเพจ Firebase Thailand เรื่องการทำ Custom Authentication จำนวนไม่น้อย…
medium.com

Hybridauth Social Login PHP Library
HybridAuth Open Source PHP Social Sign On Library, © 2009-2017. HybridAuth code is licensed under MIT License…
hybridauth.github.io

Pingback : https://nitip.at/2018/09/07/%E0%B8%97%E0%B8%B3-social-login-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-line-api-php/

 
Share this