在上一篇文章中,我們已經建立好 Vue 專案,並初步認識什麼是 LIFF。這一篇將進一步實作串接LINE 的登入功能,以 Vue 為主角,採用組合式 API(Composition API)的開發風格,來實作一個支援 LINE 的網頁應用。
在開發 LINE 登入功能之前,需要先前往 LINE Developers 網站新增 LIFF Application,才能拿到一組合法的「 LIFF 身份(LIFF ID)」,這個步驟的目的是讓網站具備在「 LINE App 裡運行的資格」,才能順利完成登入並讀取使用者資料等功能操作。
用一個白話的舉例來說明:
假設你今天安排了一場2天1夜的小旅行,想要入住飯店,總不能直接闖進房間吧?這時候需要先到櫃檯辦理入住、領取房卡,讓櫃台確認你的身份後,才會發給你一張房卡,有了這張房卡,你才有權限進入飯店房間。
在這個情境下,各個角色對應到的功能如下:
理解後,我們來實際操作吧!
前往 LINE Developers 網站設定 LIFF Applications,選擇前面建立好的LINE login Channel,切換到「LIFF」頁籤。
點擊「Add」新增 LIFF App
設定 LIFF Application 資訊會進到以下畫面:
畫面中出現的以下欄位介紹:
https
開頭,登入完成後要導向的網址,記得一定要設定正確❗,否則點擊「登入」後會出現,400 Bad Request的畫面。這邊我們先建立一個臨時的 HTTPS 網址作為 Endpoint URL:
(1) 回到 VS Code,開啟終端機切換到「連接埠」頁籤,點擊「轉送連接埠」。
(2) 輸入你目前開發專案運行中的網址 port,依上一篇例子來看,是輸入「5173」,完成後按 Enter。
(3) 接著將「轉送位址」複製下來,貼回到 Endpoint URL 欄位即可。
接下來繼續完成以下設定:
更詳細的選項說明,可以參考官方文件LINE開發者網站,設定完成後,點擊「Add」,LIFF Application 就建立成功囉 🎉!
接下來回到 Vue 專案,要開始實作 LINE 登入功能囉 🌟。畫面樣式會搭配 Tailwind CSS,先處理 UI 再進入登入邏輯實作。
安裝 Tailwindcss ,請在終端機中輸入 npm install tailwindcss @tailwindcss/vite
詳細安裝步驟可至 TailwindCSS 官網參考。
我們會先做一個簡單的登入按鈕,並加入 LINE Logo 圖示。在 SFC 的<template>
輸入以下:
<button class="lineLogo w-full bg-[#00c300] cursor-pointer font-bold text-white py-3 px-4 rounded-md flex items-center justify-center mb-4">
<img
alt="LINE Logo"
:src="lineLogo"
width=24
height=24
class="mr-2"
/>
LINE 登入
</button>
專案新增 lineLogo.svg
圖片後,在 <script setup>
中匯入圖片資源:
<script setup>
import lineLogo from './assets/images/lineLogo.svg'
</script>
npm install --save @line/liff
並在 <script setup>
中一併引入:
<script setup>
import lineLogo from './assets/images/lineLogo.svg'
import liff from '@line/liff'
</script>
onLineLoginClick
,綁定在按鈕上:<button class="...." @click="onLineLoginClick"
接著在 <script setup>
初始化LINE SDK後做LINE登入,記得將前面複製好的「LIFF ID」貼上,登入邏輯如下:
方法 | 功能說明 | 執行時是否要求登入狀態 |
---|---|---|
liff.init() |
初始化 LIFF SDK,必須先執行。 | ❌ |
liff.login() |
執行 LINE 登入流程 | ❌ |
liff.isLoggedIn() |
判斷使用者目前是否已登入。 | ❌ |
<script setup>
const onLineLoginClick = async() => {
try {
await liff.init({
liffId: "<貼上剛剛複製的LIFF ID>",
})
if (!liff.isLoggedIn()) {
liff.login();
}
}
catch (error) {
console.error('錯誤: ', error);
}
}
</script>
登入成功後,我們可以透過 liff.getProfile()
或 liff.getDecodedIDToken()
來取得使用者資訊,用來做後續的會員處理或畫面個人化呈現。
可以透過 liff.getProfile()
主動向 LINE server 發送請求,取得使用者資訊做其他用途,例如 顯示使用者的 LINE名稱、大頭貼、userId 等呈現個人化資訊 。
<script setup>
const onLineLoginClick = async() => {
......
if (!liff.isLoggedIn()) {
......
}
else {
const profile = await liff.getProfile();
console.log('取得使用者資訊: ', profile);
}
}
</script>
可以在瀏覽器控制台(Console)查看 console.log
結果。
另一種方式可以換成 liff.getDecodedIDToken()
,這會回傳 LIFF SDK 初始化後產生的 ID Token Payload,裡面也包含使用者的基本資料,例如 LINE的名稱、驗證方式、sub(同樣是userId)等,通常用於登入驗證與後端串接。
<script setup>
const onLineLoginClick = async() => {
......
if (!liff.isLoggedIn()) {
......
}
else {
const profile = await liff.getDecodedIDToken();
console.log('取得ID token 內容: ', profile);
}
}
</script>
可以在瀏覽器控制台(Console)查看 console.log
結果。
我們實際操作了從 建立 LIFF Application、Vue 串接 LIFF SDK、到 完成 LINE 一鍵免密碼登入 的整個流程,並且透過 liff.getProfile()
與 liff.getDecodedIDToken()
成功取得使用者的 LINE 資訊。看到控制台出現使用者資料的那一刻,是不是有種「串起來了!」的成就感呢( •̀ ω •́ )✧
這個登入流程不僅簡化使用者操作,也能讓開發者後續更靈活地,結合 LINE 提供的功能來打造專屬服務,像是:建立會員系統、發送通知、與 LINE Bot 聯動等,這些通通都是實用的延伸應用。
如果未來實務上有使用到,我們可以進一步思考:
這些,都會是未來進階的開發重點。
如果已經覺得 LINE Login 流程其實沒想像中那麼困難,那麼恭喜你成功跨出關鍵的第一步 🙌!
⑴ liff applications 選項說明來源
⑵ tailwindcss 安裝參考來源
⑶ liff 方法介紹
⑷ Add LIFF app 操作來源:LINE Developers
⑸ liff SDK 安裝來源