Peerachet's MiniBlog

สร้างเว็บไซต์อย่างไรให้ล็อกอินผ่าน LINE ได้

บทความนี้จะมาแนะนำการทำ JSON Web Token (JWT) บน PHP

JSON Web Token (JWT) ถูกใช้ในกระบวนการยืนยันตัวตนบนเว็บไซต์ที่ได้รับความนิยมมากระดับหนึ่ง ยกตัวอย่างเช่น หากจะทำให้เว็บไซต์เราสามารถล็อกอินผ่าน LINE ได้โดยที่เราไม่ต้องรู้ชื่อผู้ใช้และรหัสผ่านของคนๆ นั้นจะทำได้อย่างไร เราจะมาดูกันในบทความนี้ครับ

วิธีการก็คือ เมื่อเราจะล็อกอินเข้าเว็บของเรา พอกดล็อกอินปั๊บ มันจะกระโดดไปหน้าล็อกอินของไลน์ เมื่อล็อกอินผ่านแล้ว ก็จะกระโดดกลับมาที่เว็บของเรา โดยที่เว็บของเราจะได้ Access Token เพื่อใช้ระบุตัวตน และยืนยันการล็อกอินของผู้ใช้คนนั้นๆ ซึ่งใน Token นี้สามารถอ่านออกมาเป็น JSON String ได้

Token

ทำไมต้องมี JWT

JWT มีข้อดีหลายอย่าง อย่างแรกก็คือ สามารถทำให้เราใช้สิ่งที่เรียกว่า Single Sign-On (SSO) ได้ กล่าวคือ เมื่อเราล็อกอิน Application หนึ่งแล้ว เมื่อเราใช้อีก Application หนึ่งในตระกูลเดียวกัน เราก็ไม่ต้องเสียเวลาล็อกอินใหม่ (เช่น เวลาล็อกอิน Gmail กับ Google Drive ก็ล็อกอินครั้งเดียวแต่เชื่อมกันได้หมด)

อีกอย่างหนึ่งก็คือ มีผลดีต่อผู้พัฒนาระบบ ที่ไม่ต้องเสียเวลาเก็บ Session และค้นหา Session ให้เสียเวลา เพราะทุกอย่างสามารถ Decode ออกมาได้จาก Token อยู่แล้ว

หลายคนอาจจะถามว่าแล้วจะปลอดภัยไหม อันนี้ก็ขึ้นกับว่าช่องทางที่สื่อสารเข้ารหัสไหม ตัว JWT ความจริงก็เข้ารหัสไว้ชั้นหนึ่งแล้ว แต่ก็สามารถถูก Decode ได้ไม่ยากนักหากรู้ Secret Key ซึ่งตรงนี้อาจจะเป็นจุดอ่อนของ JWT ก็ได้กรณีที่ Key นี้รั่วไหลออกไป (เผลอๆ อาจจะมี Key เดียวต่อ 1 บริการ) ซึ่งเนื่องจากผมก็ไม่ได้อยู่ในวงการของ Security จึงไม่อาจบอกว่าได้ว่าปลอดภัยมากน้อยแค่ไหน อาจจะต้องไปดู Specification และการ Implement ของแต่ละบริการไป

แน่นอนว่า เมื่อใช้ๆ ไปอาจจะมีบริการที่ทำหน้าล็อกอินปลอมขึ้นมาหลอกให้คนใส่ Username และ Password ก็เป็นได้ ดังนั้นจำเป็นต้องรู้อย่างยิ่งว่าเว็บของเราที่กำลังเข้านั้นเป็น HTTPS ที่มี Certificate ถูกต้องหรือไม่ มิฉะนั้นอาจโดนขโมยตัวตนบนโลกออนไลน์ไปก็เป็นได้

สิ่งที่ผมชอบกับ JWT คือ มันทำให้การพัฒนาเว็บสามารถตัดส่วนลงทะเบียนไปได้เลย ลูกค้าเข้ามามีไลน์อยู่แล้ว ก็สแกนและล็อกอินเข้าใช้งานได้ทันที

ทีนี้จะทำให้เว็บ PHP เราใช้ล็อกอินทาง LINE ได้อย่างไร

เขียนเกริ่นนำมายาวมาก แต่วิธีการนั้นง่ายมากๆ นั่นก็คือ ไปสมัคร Account Line Developer สร้าง Provider ขึ้นมา (ดู https://developers.line.biz/console/)

ตั้งค่าต่างๆ ให้เหมาะสมโดยดูวิธีการจากบทความนี้เลยครับ ผมก็ศึกษาจากบทความนี้ แล้วนำมาดัดแปลงเล็กๆ น้อยๆ

การทำ Social Login ด้วย LINE api

ผมได้เพิ่มการ Login, Redirect, Logout ไว้ให้ด้วย ลองโหลดไปเล่นดูกันได้ครับ

Github Link

ในนี้จะมีไฟล์ index.php หลักๆ เลยคือการ authenticate กระโดดไปยังหน้าล็อกอินของ LINE

$hybridauth = new Hybridauth( $config );
$adapter = $hybridauth->authenticate( 'Line' );
$tokens = $adapter->getAccessToken();
$userProfile = $adapter->getUserProfile();

จากนั้นกระโดดมาหน้า view.php โดยสามารถตรวจสอบได้ว่าตอนนี้ล็อกอินแล้วหรือยัง

$hybridauth = new Hybridauth($config);
$adapters = $hybridauth->getConnectedAdapters();
if ($adapters){
    $storage = new Session;
    $token = $storage->get("access_token");
    print($token);
    $user = $adapters['Line']->getUserProfile();
    print_r($user);
}else{
    print("Not login");
}

สุดท้ายคือการล็อกเอ้าต์ ชิลๆ

hybridauth = new Hybridauth($config);
$adapters = $hybridauth->getConnectedAdapters();
if ($adapters){
    $adapters['Line']->disconnect();
}

ทุกไฟล์มีส่วน config หมด จริงๆ ควรจับแยกแล้ว include เอานะ และส่วนที่เป็น Session ดูเหมือนจะไม่จำเป็น จริงๆ จุดประสงค์ของ JWT คือไม่ใช้ Session แต่ว่าตัว library ที่อำนวยความสะดวกนี้ก็ใช้ Session เพื่อให้ง่ายต่อการใช้งาน ใครต้องการ Performance ก็คงจะต้องใช้ Authentication ของตัวเองกันไป

สรุป

ดูแล้วความนิยมของ LINE ก็คงจะเพิ่มขึ้นเรื่อยๆ ครับ ใครที่ทำเว็บที่เชื่อมกับ LINE ได้ ก็น่าจะทำให้เข้าถึงกลุ่มลูกค้าได้ง่ายขึ้น ยิ่งถ้ามี bot ที่ฉลาดๆ ด้วยแล้วอาจจะทำให้ขายของแทนเรา หรือทำหน้าที่เก็บข้อมูลต่างๆ แทนเราได้เลยนะครับ บทความก่อนได้แนะนำไปแล้ว ไปค้นดูได้ครับ บทความแรกเลย