เฉลยวิธีการดึง Email ของผู้ใช้ใน LIFF v2

เริ่มต้นบทความนี้ ผมขอเล่าความเป็นมาเป็นไปของ LINE Front-End Framework หรือ LIFF กันก่อน โดยแบ่งเป็นช่วงปี 2018 และ 2019 เผื่อใครที่เป็นมือใหม่เข้ามาอ่านบทความนี้ ก็จะเข้าใจมันได้ง่ายขึ้น

2018 ปีแห่งการผงาด

LIFF เกิดขึ้นมาเพื่อเติมเต็มการใช้งาน Chatbot ในเรื่องของการแสดงผล ที่บางอย่าง Chatbot ไม่สามารถทำได้ เช่น การสร้างฟอร์มลงทะเบียนที่ซับซ้อน หรือการแสดงสินค้าจำนวนมากๆในห้องแชท โดย LIFF มาพร้อมกับเทคโนโลยีของเว็บ หรือเรียกให้เข้าใจง่ายๆว่า เป็นการสร้างเว็บในห้องแชท แบบที่ไม่ต้องกระโดดออกไปไหน

นอกจากการแสดงผลแล้ว ความสามารถหลักของ LIFF คือการดึงข้อมูลพื้นฐานของผู้ใช้ที่เปิดใช้งาน เช่น userId, displayImage, pictureUrl, statusMessage โดยที่ผู้ใช้ไม่ต้องทำการ Login ใดๆ อีกทั้งยังสามารถส่งข้อความรูปแบบต่างๆในนามของผู้ใช้กลับไปที่ห้องแชทได้ เช่น Flex Message, Imagemap เป็นต้น

2019 ปีของการ Step up

LIFF ยกเครื่องใหม่ v2 เพิ่มฟีเจอร์ต่อยอดความสามารถเดิมที่มี โดยสิ่งที่โดดเด่นในเวอร์ชั่นนี้ได้แก่ การรองรับการทำ Authentication กับเว็บต้นทางที่ลงทะเบียนไว้ โดยนักพัฒนาไม่จำเป็นต้อง Implement ตัว LINE Login เข้าไปในกรณีที่ต้องการใช้งานร่วมกันทั้งเว็บต้นทางและ LIFF นอกจากนี้ยังสามารถเปิดกล้องเพื่อแสกน QR Code แล้วส่งข้อมูลกลับมาที่ LIFF เพื่อใช้งานต่อใน Use case ต่างๆ

และจากข่าวการมาของ LIFF v2 หากสังเกตดีๆ จะเห็นว่าทาง LINE พูดถึงการดึง Email ในข่าว ซึ่งถ้าเราได้ Email มาก็จะเป็นผลดีทั้งในเรื่องการเพิ่มช่องทางในการติดต่อกับผู้ใช้ หรือการผูก account ของ LINE เข้ากับ account ที่มีอยู่ในระบบเดิม

แต่…วิธีการที่จะดึง Email นั้นกลับยังเป็นปริศนา ไม่เคยถูกเปิดเผยมาก่อน ซึ่งผมเชื่อว่านักพัฒนาหลายคนก็คงสงสัยเช่นกัน ดังนั้นบทความนี้จะมาเฉลยวิธีการเอามันออกมาให้ดูกัน

โดยขั้นตอนการพัฒนาจะมีดังนี้

1. เตรียม Provider ให้พร้อม
2. ลงมือสร้าง LINE Login Channel
3. ลงทะเบียน LIFF
4. วิธีการดึง Profile และ Email

1. สร้าง Provider ให้พร้อม

ในขั้นตอนนี้เราจะต้องสมัครเป็น LINE Developer และสร้าง Provider ให้เรียบร้อยก่อน ใครมี Provider แล้วข้ามข้อนี้ไปได้เลย ส่วนใครยังไม่มีให้ทำตามบทความนี้ในข้อที่ 1 และ 2 นะครับ

ปฐมบทการสร้าง LINE Bot

2. ลงมือสร้าง LINE Login Channel

ในขั้นตอนนี้ให้เราเลือกสร้าง Channel จาก LINE Login …ห๊ะ! นักพัฒนาส่วนใหญ่คงคิดในใจว่ามันต้องสร้างที่ Messaging API เสะ แต่ผมขอยืนยันว่าพิมพ์ไม่ผิดครับ เราจะสร้าง Channel กันที่นี่ เพราะมันมีของดีย์บางอย่างซ่อนอยู่ ให้ดูกันต่อไป

เมื่อกดเข้ามาแล้ว ก็ให้เริ่มระบุรายละเอียดในส่วนต่างๆทั้ง App icon, App name และ App description

ไถลงมาอีกหน่อยจะเจอ App type ซึ่งตรงนี้เป็นการระบุว่าเราจะใช้ LINE Login กับแพลทฟอร์มไหน Web หรือ Native app(Android, iOS, Flutter, Unity) โดยให้เราระบุ Use Web เป็นอย่างน้อย

ถัดไปก็ระบุ Email สำหรับรับการแจ้งเตือนต่างๆที่เกิดขึ้นกับ Channel

ส่วน Privacy Policy และ Terms of Use เป็น URL เกี่ยวกับรายละเอียดว่าเราจะขอข้อมูลอะไรของผู้ใช้บ้าง และจะนำไปใช้อย่างไร โดยสามารถระบุภายหลังได้

พร้อมแล้วก็ยอมรับข้อตกลง แล้วกดปุ่ม Create ไปครับ

ได้ LINE Login Channel มาละ

ยัง…ยัง…ยังไม่หมด เหลืออีกนิสนึง ให้เรากดเข้าไปใน Channel ที่สร้างขึ้นมา แล้วไถไปจนเจอส่วนที่ชื่อ OpenID Connect

จากนั้นกดปุ่ม Apply แล้วยอมรับข้อตกลง และให้อัพโหลดภาพที่มีรายละเอียดว่าจะเอาอีเมลไปใช้อย่างไรลงไป

เสร็จแล้วกด Submit ไป เป็นอันเสร็จสมบูรณ์ในขั้นตอนนี้

3. ลงทะเบียน LIFF

ขั้นตอนนี้ให้เราเลือก Tab สุดท้ายที่ชื่อ LIFF ในหน้า LINE Login Channel นั้น โดยให้เรากดปุ่ม Add เพื่อลงทะเบียน ซึ่งใน 1 Channel เราจะมี LIFF ได้สูงสุด 30 ตัว

ในหน้านี้ให้เราระบุข้อมูลต่างๆดังนี้

• LIFF app name: ชื่อที่ใช้เรียก LIFF ตัวนี้ ซึ่งผู้ใช้จะไม่เห็น มีไว้กันลืมในกรณีเรามีเยอะจัด
• Size: ขนาดในการแสดงผล Ful=100%, Tall=75%, และ Compact 50%
• Endpoint URL: URL ของเว็บที่รองรับ HTTPS ซึ่งในตอนนี้เรายังไม่ได้พัฒนาขึ้นมาดังนั้นให้ระบุ URL ที่ชอบๆ ไปก่อน

ไถลงมาจะเจอส่วนที่สำคัญที่สุด นั่นก็คือการกำหนดคือ Scopes นั่นเอง โดยมีรายละเอียดดังนี้

• profile: ข้อมูลของผู้ใช้ (userId, displayImage, pictureUrl, statusMessage)
• chat_message.write: สิทธิ์สำหรับส่งข้อความกลับเข้าไปในห้องแชท
• email: อีเมลของผู้ใช้
• openid: มาตรฐาน Authentication ที่ LINE Login ใช้ โดยเมื่อยืนยันตัวตนแล้ว จะได้ ID Token ที่บรรจุข้อมูลผู้ใช้(รวมถึง Email) กลับมาในรูปแบบของ JWT

ดังนั้นแล้ว ให้เราติ๊กเลือก 3 อันนี้เลย เพื่อให้ได้ข้อมูลของผู้ใช้ + Email

ส่วนที่เหลือเป็น Optional ได้แก่

• Add friend option: การแนะนำ Chatbot ของเราให้ผู้ที่ยังไม่ได้ Add
• Scan QR: ขอสิทธ์เปิดกล้องเพื่อแสกน QR บน LIFF
• Module mode: การ เปิด/ปิด ปุ่ม action button บริเวณด้านบนขวาของ LIFF

เสร็จแล้วก็กด Add โลด แล้วจะได้ของมาลักษณะเหมือนในรูปด้านล่างนี้

4. วิธีการดึง Profile และ Email

มาถึงขั้นตอนที่ทุกคนรอคอย มาเรามาเริ่มจากการสร้างไฟล์ HTML ขึ้นมา

4.1 ตั้งชื่อ LIFF ให้แสดงใน Title bar ผ่าน <title>

<head>
  ...  
  <meta name="viewport" content="width=device-width />
  <title>My LIFF v2</title>
  ...
</head>

4.2 Import ตัว LIFF SDK เข้ามา

ในตัวอย่างนี้จะใช้ LIFF SDK แบบ edge ที่จะดึงเวอร์ชั่นล่าสัตว์ เอ้ย ล่าสุดเข้ามา

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

4.3 Initial ตัว LIFF

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

https://liff.line.me/1234567890-XXXXXXXXX

ส่วนโค้ดในการ init ก็ง่ายๆสั้นๆแค่นี้ ซึ่งรองรับการใช้งานทั้งใน LIFF และ Web ให้แล้ว

4.4 ดึง Profile และ Email

สำหรับ Profile ก็ดึงได้อย่างตรงไปตรงมา แต่สำหรับ Email เราจะต้องไปดึงออกมาจาก ID Token ซึ่งเป็น JWT(โชคดีที่ทาง LINE เตรียมฟังก์ชัน decode แถมมาให้ละ)

liff.getProfile().then(profile => {
  const userProfile = profile.userId;
  const displayName = profile.displayName;
  const statusMessage = profile.statusMessage;
  const pictureUrl = profile.pictureUrl;
  const email = liff.getDecodedIDToken().email;
}).catch(
  err => console.error(err)
);

และเอาให้ครบจบในไฟล์เดียวจะได้ประมาณนี้ครับ

4.5 Deploy เว็บ

เนื่องจาก Web URL ที่จะนำมาใช้กับ LIFF จะต้องรองรับ HTTPS และถ้าใครยังไม่มี Host ผมขอแนะนำ 🔥Firebase Hosting เนื่องจากฟรี SSL, CDN ทั่วโลก, พื้นที่ 1GB และมันง่ายมว๊ากในการใช้งาน ถ้าสนใจลองศึกษาบทความด้านล่างนี้ได้

รู้จัก Firebase Hosting ตั้งแต่ Zero จนเป็น Hero

4.6 อัพเดท Channel สำหรับ Production

ให้เรานำ URL ที่ได้จากการ deploy ไปอัพเดท Endpoint URL ใน Channel

และคนอื่นจะเข้าใช้งาน LIFF ตัวนี้ไม่ได้เลย ถ้าเราไม่ publish มัน ดังนั้น จัดไป!

กดปุ่ม Developing เพื่อ Publish

สถานะเป็น Publish แล้ว

คราวนี้เราลองเอา LIFF URL มาเปิดจะพบว่า ในหน้าของข้อตกลง(consent) จะมีส่วนของการขอ Email เพิ่มขึ้นมา

ซึ่งผู้ใช้จะอนุญาตหรือไม่ก็ได้ โดยผลลัพธ์ในแต่ละกรณีเป็นดังนี้

• อนุญาต: บรรลุวัตถุประสงค์ เพราะจะได้ Email มา
• ไม่อนุญาต: จะได้ค่า undefined จากคำสั่งใน Javascript มา แต่ไม่ต้องห่วงครับเพราะเมื่อผู้ใช้เปิด LIFF ในครั้งถัดไป หน้า consent ก็จะแสดงขึ้นมาอีก

มาดูตัวอย่างกัน

คำเตือน

• ตั้งแต่ต้นเดือนกุมภาพันธ์ปี 2020 นักพัฒนาจะไม่สามารถเพิ่ม LIFF ที่ Messaging API Channel ได้ จะเพิ่มใหม่ได้ที่ LINE Login Channel เท่านั้น
• LIFF ที่เคยลงทะเบียนไว้ที่ Messaging API Channel ก่อนเดือนกุมภาพันธ์ปี 2020 จะยังคงใช้งานได้ต่อไป(แบบหวั่นๆ 555+)

สรุป

ถึงตรงนี้ นักพัฒนาก็คงเข้าใจเหตุผลแล้ว ว่าทำไมเราจึงควรสร้าง LIFF ที่ LINE Login Channel กันแล้ว นอกจากการดึง Email ก็ยังมีเรื่องของ Bot Prompt ที่สามารถแนะนำ Bot ของเราให้กับผู้ใช้ที่ยังไม่ได้เพิ่ม Bot เราเป็นเพื่อนผ่าน LIFF ได้อีกด้วย

และสำหรับฟีเจอร์ใหม่ๆของ LIFF ที่จะมาในอนาคต ก็จะมาที่ LINE Login Channel เท่านั้น ดังนั้นใครที่ใช้ LIFF จาก Messaging API Channel อยู่ ผมก็แนะนำให้ย้ายมาที่ LINE Login Channel นะครับ ซึ่งถ้าสร้าง Channel ใน Provider เดิม userId ก็จะเหมือนเดิมแน่นอน

สำหรับใครที่อยากอ่านเรื่องของ LIFF เพิ่มเติม ก็ตามอ่านจากบทความด้านล่างนี้นะ

LIFF v2 มาแล้ว! เพิ่มหลาย Feature เพื่อให้นักพัฒนาสร้างสรรค์ Web Apps เจ๋งๆบน LINE ได้มากขึ้น!

มารู้จักกับ LIFF — สิ่งที่จะมาเติมเต็มในการทำ Chat Bot กัน!

เทคนิคการสร้าง Universal Link ให้เปิดได้ทั้ง LIFF URL และ Web URL โดยไม่ต้องพึ่งเครื่องมือ

มาสร้าง Deep Link ให้กับ LIFF App กันดีกว่า