iT邦幫忙

2025 iThome 鐵人賽

DAY 16
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 16

16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐

  • 分享至 

  • xImage
  •  

前言

在上一篇文章中,我們已經建立好 Vue 專案,並初步認識什麼是 LIFF。這一篇將進一步實作串接LINE 的登入功能,以 Vue 為主角,採用組合式 API(Composition API)的開發風格,來實作一個支援 LINE 的網頁應用。

新增&設定 LIFF App

在開發 LINE 登入功能之前,需要先前往 LINE Developers 網站新增 LIFF Application,才能拿到一組合法的「 LIFF 身份(LIFF ID)」,這個步驟的目的是讓網站具備在「 LINE App 裡運行的資格」,才能順利完成登入並讀取使用者資料等功能操作。

用一個白話的舉例來說明:
假設你今天安排了一場2天1夜的小旅行,想要入住飯店,總不能直接闖進房間吧?這時候需要先到櫃檯辦理入住、領取房卡,讓櫃台確認你的身份後,才會發給你一張房卡,有了這張房卡,你才有權限進入飯店房間。
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示1
在這個情境下,各個角色對應到的功能如下:

  • 櫃檯 = LINE Developers Console(LINE開發者控制台)→ 提交申請的地方。
  • 房卡 = LIFF ID → 作為識別像是通行證,讓網站能在 LINE App 執行。
  • 房間 = LINE App 裡的內建瀏覽器 → LIFF 真正運行的場域。
  • 拿著房卡進入房間的對象 = 網站本身 → 最後確認,是否為合法註冊的 LIFF Application,才可在 LINE App 的內建瀏覽器中成功運行。

理解後,我們來實際操作吧!

  1. 前往 LINE Developers 網站設定 LIFF Applications,選擇前面建立好的LINE login Channel,切換到「LIFF」頁籤。
    16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示2

  2. 點擊「Add」新增 LIFF App
    16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示3

  3. 設定 LIFF Application 資訊會進到以下畫面:
    16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示4

畫面中出現的以下欄位介紹:

  • LIFF app name:輸入功能名稱,手機開啟LIFF App時,會顯示名稱於 Snackbar 上。
  • Size:在 LINE App 內開啟時的視窗大小,總共有:全螢幕(Full)、高(Tall)、小(Compact)。
  • Endpoint URL:需使用 https 開頭,登入完成後要導向的網址,記得一定要設定正確❗,否則點擊「登入」後會出現,400 Bad Request的畫面。

這邊我們先建立一個臨時的 HTTPS 網址作為 Endpoint URL:
(1) 回到 VS Code,開啟終端機切換到「連接埠」頁籤,點擊「轉送連接埠」。
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示5

(2) 輸入你目前開發專案運行中的網址 port,依上一篇例子來看,是輸入「5173」,完成後按 Enter。

(3) 接著將「轉送位址」複製下來,貼回到 Endpoint URL 欄位即可。
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示6
接下來繼續完成以下設定:
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示6-1

  • Scopes:選擇網站需要從使用者取得的資料範圍。
  • Add friend option:在 LIFF 授權畫面中,決定是否要顯示「加好友」選項。

更詳細的選項說明,可以參考官方文件LINE開發者網站,設定完成後,點擊「Add」,LIFF Application 就建立成功囉 🎉!

  1. 回到 LIFF App 列表中找到「LIFF ID」,這是一組唯一的身份識別碼,我們之後要在 Vue 專案中用這組 ID 來做初始化,請將它複製下來。
    16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示4

實作 liff.login()

接下來回到 Vue 專案,要開始實作 LINE 登入功能囉 🌟。畫面樣式會搭配 Tailwind CSS,先處理 UI 再進入登入邏輯實作。

  1. 安裝 Tailwindcss ,請在終端機中輸入 npm install tailwindcss @tailwindcss/vite 詳細安裝步驟可至 TailwindCSS 官網參考

  2. 我們會先做一個簡單的登入按鈕,並加入 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>
  1. 接下來安裝 LINE 官方提供的 LIFF SDK,打開終端機輸入指令:
npm install --save @line/liff

並在 <script setup> 中一併引入:

<script setup>
    import lineLogo from './assets/images/lineLogo.svg'
    import liff from '@line/liff'
</script>

初始化 LIFF 並實作登入邏輯

  1. 登入是點擊按鈕後才觸發的行為,因此新增一個登入函式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>
  1. 可以點擊按鈕來試試看囉~
    點擊登入按鈕後,畫面會切換到 LINE 官方的登入授權畫面:
    16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示7

取得使用者資訊 liff.getProfile() 與 liff.getDecodedIDToken()

登入成功後,我們可以透過 liff.getProfile()liff.getDecodedIDToken() 來取得使用者資訊,用來做後續的會員處理或畫面個人化呈現。

liff.getProfile()

可以透過 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 結果。
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示8

liff.getDecodedIDToken()

另一種方式可以換成 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 結果。
16 讓 Vue 串進 LINE 生活圈!(下):實作 LIFF 免密碼登入🔐 - 圖示9

結語

我們實際操作了從 建立 LIFF ApplicationVue 串接 LIFF SDK、到 完成 LINE 一鍵免密碼登入 的整個流程,並且透過 liff.getProfile()liff.getDecodedIDToken() 成功取得使用者的 LINE 資訊。看到控制台出現使用者資料的那一刻,是不是有種「串起來了!」的成就感呢( •̀ ω •́ )✧

這個登入流程不僅簡化使用者操作,也能讓開發者後續更靈活地,結合 LINE 提供的功能來打造專屬服務,像是:建立會員系統、發送通知、與 LINE Bot 聯動等,這些通通都是實用的延伸應用。

如果未來實務上有使用到,我們可以進一步思考:

  • 如何將這些資訊安全地傳送給後端?
  • 要怎麼讓現有系統的會員綁定 LINE,讓往後可以透過 LINE 登入原有帳號?
  • 能不能加入條件判斷與錯誤處理機制,讓流程更穩定?

這些,都會是未來進階的開發重點。
如果已經覺得 LINE Login 流程其實沒想像中那麼困難,那麼恭喜你成功跨出關鍵的第一步 🙌!

參考資料與延伸閱讀

liff applications 選項說明來源
tailwindcss 安裝參考來源
liff 方法介紹
Add LIFF app 操作來源:LINE Developers
liff SDK 安裝來源


上一篇
15 讓 Vue 串進 LINE 生活圈!(上):建立專案並掌握 LIFF 核心概念
下一篇
17 Nuxt 介紹:基於 Vue 的進階應用框架解析
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言