Site icon บริษัท โค๊ดบี จำกัด

วิธีทำ LINE Login เข้าสู่ระบบด้วย Line (PHP) บนเว็บไซต์

codebee
วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line

วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">LINE Login API คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO &lpar; Single Sign On &rpar; ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบียนใช้งาน ในตัวอย่างนี้ก็คือการใช้ Line Account ในการเข้าสู่ระบบหรือสมัครสมาชิกเข้าใช้งานซอฟต์แวร์อื่น<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ในเวอร์ชั่นก่อนหน้านี้ของ LINE Login API อาจจะยังไม่ได้รับความนิยมมากนัก เพราะข้อมูล JSON ที่ Response กลับมาจะได้ข้อมูลที่จำเป็นจริง ๆ แค่ชื่อและรูปภาพประจำตัวเท่านั้น ยังไม่ให้อนุญาติให้เข้าถึง email ในแต่เวอร์ชั่นปัจจุบัน 2&period;x ได้อนุญาติให้สามารถเข้าถึงข้อมูลอีเมลแล้ว ผ่าน id&lowbar;token โดยการเข้ารหัส JWT &lpar; Json Web Token &rpar; ด้วยเหตุนี้ทำให้การเข้าสู่ระบบผ่าน LINE Login API กำลังได้รับความนิยมขึ้นเรื่อย ๆ เพราะได้ข้อมูลครบถ้วนขึ้น ทั้งการเข้าระบบผ่าน Mobile Apps และ Web Apps<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>เริ่มต้นด้วยการสร้าง Line Channel<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-1-940x542&period;png" alt&equals;"" class&equals;"wp-image-5141" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-1&period;png" data-full-size&equals;"1468x846" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เข้าไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developers&period;line&period;biz&sol;en&sol;" target&equals;"&lowbar;blank">https&colon;&sol;&sol;developers&period;line&period;biz&sol;en&sol;<&sol;a> ในหัวข้อ Products ให้เลือก LINE Login กดปุ่ม &&num;8216&semi;Start Now&&num;8217&semi;<&sol;li><li>ในหน้า Create a channel ให้เรากรอกข้อมูลทุกอย่างให้ครบถ้วน Provider ถ้ายังไม่เคยสร้าง ให้เลือกไปที่ Create a new Provider <&sol;li><li>หลังจากกด Create ระบบจะพาเรามาที่หน้ารายละเอียดของ Channel และแท็บ Basic Setting ให้เลื่อนลงไปหาหัวข้อ OpenID Connect สถานะเริ่มต้นจะเป็น Unapplied ให้กด Apply และกรอกข้อมูล จนสถานะเปลี่ยนเป็น Applied<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-2&period;png" alt&equals;"" class&equals;"wp-image-5142" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-2&period;png" data-full-size&equals;"864x356" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ต่อไปให้เลือกไปที่แท็บ LINE Login เลือกเปิดใช้งาน Web Apps และ ระบุ Callback URL สำหรับ Callback URL จะเป็น URL ที่เราไว้รับ JSON Response ที่ถูกคืนค่ามาจาก Line API ถ้าไม่สำเร็จเราก็จะรู้ว่า สาเหตุเกิดจากอะไร ถ้าสำเร็จเราก็สามารถ Get ข้อมูลได้จากตรงนี้ และนำไปใช้งานในขั้นตอนต่อ ๆ ไป<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-3-940x345&period;png" alt&equals;"" class&equals;"wp-image-5143" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-3&period;png" data-full-size&equals;"1898x696" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ข้อมูลที่ต้องใส่ตอน Request และข้อมูล JSON Response ที่จะได้กลับมา<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ถ้าเข้าไปดูใน Document ของ LINE API https&colon;&sol;&sol;developers&period;line&period;biz&sol;en&sol;docs&sol;line-login&sol;integrate-line-login&sol; จะมีระบุชัดเจนนะครับว่า ตอน Request ไป เราต้องส่งข้อมูลอะไรไปบ้าง <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-4-940x476&period;png" alt&equals;"" class&equals;"wp-image-5145" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-4&period;png" data-full-size&equals;"1508x764" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>และเมืออ Request สำเร็จเราจะได้ Reponse ข้อมูลอะไรกลับมาบ้าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-5-940x407&period;png" alt&equals;"" class&equals;"wp-image-5146" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-5&period;png" data-full-size&equals;"1956x846" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>เริ่มต้นเขียน PHP Line Login<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-7-940x672&period;png" alt&equals;"" class&equals;"wp-image-5162" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;วิธีทำ-LINE-Login-เข้าสู่ระบบด้วย-Line-7&period;png" data-full-size&equals;"1324x946" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">เบื้องต้นให้เตรียม Environment ตามด้านล่างนะครับ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ดาวน์โหลด <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;github&period;com&sol;makorn645&sol;PHP-line-login-sdk" target&equals;"&lowbar;blank">https&colon;&sol;&sol;github&period;com&sol;makorn645&sol;PHP-line-login-sdk<&sol;a><&sol;li><li>ใช้ PHP 7&period;2 หรือเวอร์ชั่นที่สูงกว่า<&sol;li><li>ใช้ Codeigniter Framework ในการทดสอบ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เปลี่ยนชื่อไฟล์ linelogin&period;php เป็น Linelogin&period;php และเปลี่ยนชื่อคลาสจาก linelogin เป็น Linelogin<&sol;li><li>วางไฟล์ Linelogin ไว้ในส่วนของ <strong>application&sol;libraries<&sol;strong><&sol;li><li>เปิดไฟล์ Linelogin&period;php แก้ไขข้อมูลดังต่อไปนี้<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">private const CLIENT&lowbar;ID &equals; 'ใส่ Channel ID ที่ได้จากการทำในขั้นตอนแรก'&semi;&NewLine;private const CLIENT&lowbar;SECRET &equals; 'ใส่ Channel secret ที่ได้จากการทำในขั้นตอนแรก'&semi;&NewLine;private const REDIRECT&lowbar;URL &equals; 'url ที่เรากรอกไปในแท็บ Line Login'&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>สร้าง Login Controller และทำการ load libraries เข้ามาใช้งานตัวอย่างโค๊ดตามด้านล่าง<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">class Login extends MX&lowbar;Controller&NewLine;&lbrace;&NewLine;&Tab;public function &lowbar;&lowbar;construct&lpar;&rpar;&NewLine;&Tab;&lbrace;&NewLine;&Tab;&Tab;parent&colon;&colon;&lowbar;&lowbar;construct&lpar;&rpar;&semi;&NewLine;&Tab;&Tab;&dollar;this-&gt&semi;load-&gt&semi;library&lpar;'linelogin'&rpar;&semi; &sol;&sol; โหลด line libraries มาใช้งาน&NewLine;&Tab;&rcub;&NewLine;&Tab;public function index&lpar;&rpar;&lbrace;&NewLine;&Tab;&Tab;&dollar;url &equals; &dollar;this-&gt&semi;linelogin-&gt&semi;getLink&lpar;7&rpar;&semi; &sol;&sol; ขอ permission สำหรับเข้าถึง profile&comma; email &NewLine;&Tab;&Tab;redirect&lpar;&dollar;url&rpar;&semi;&NewLine;&Tab;&rcub;&NewLine;&Tab;public function line&lowbar;login&lowbar;callback&lpar;&rpar;&lbrace;&NewLine;&Tab;&Tab;&dollar;get &equals; &dollar;this-&gt&semi;input-&gt&semi;get&lpar;&rpar;&semi; &sol;&sol; รับ json payload&NewLine;&Tab;&Tab;&dollar;code &equals; &dollar;get&lbrack;'code'&rsqb;&semi;&NewLine;&Tab;&Tab;&dollar;state &equals; &dollar;get&lbrack;'state'&rsqb;&semi;&NewLine;&Tab;&Tab;&dollar;token &equals; &dollar;this-&gt&semi;linelogin-&gt&semi;token&lpar;&dollar;code&comma;&dollar;state&rpar;&semi; &sol;&sol; curl เพื่อขอ id&lowbar;token&NewLine;&Tab;&Tab;&dollar;token &equals; json&lowbar;decode&lpar;&dollar;token&rpar;&semi;&NewLine;&Tab;&Tab;print&lowbar;r&lpar;&dollar;token&rpar;&semi;&NewLine;&Tab;&rcub;&NewLine;&rcub;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ข้อมูลสำคัญ 3 อย่างคือ name&comma; picture&comma; email จะถูกเข้ารหัสในรูปแบบ JWT ซึ่งอยู่ใน &dollar;token-&gt&semi;id&lowbar;token สามารถใช้คำสั่ง base64&lowbar;decode ดูข้อมูลเบื้องต้นได้ในรูปแบบ String แต่ถ้าต้องการนำไปใช้งานต่อต้อง ต้องใช้ JWT decode ในการถอดรหัส <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;github&period;com&sol;firebase&sol;php-jwt" target&equals;"&lowbar;blank">https&colon;&sol;&sol;github&period;com&sol;firebase&sol;php-jwt<&sol;a><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code class&equals;"">echo base64&lowbar;decode&lpar;&dollar;token-&gt&semi;id&lowbar;token&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ทดสอบการทำงานได้ที่ <a href&equals;"https&colon;&sol;&sol;www&period;ivomaker&period;com&sol;login" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">https&colon;&sol;&sol;www&period;ivomaker&period;com&sol;login<&sol;a><&sol;p>&NewLine;

Exit mobile version