前言

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

新增&設定 LIFF App

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

用一個白話的舉例來說明：
假設你今天安排了一場2天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」頁籤。
   

2. 點擊「Add」新增 LIFF App
   

3. 設定 LIFF Application 資訊會進到以下畫面：
   

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

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

這邊我們先建立一個臨時的 HTTPS 網址作為 Endpoint URL：
(1) 回到 VS Code，開啟終端機切換到「連接埠」頁籤，點擊「轉送連接埠」。

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

(3) 接著將「轉送位址」複製下來，貼回到 Endpoint URL 欄位即可。

接下來繼續完成以下設定：

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

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

4. 回到 LIFF App 列表中找到「LIFF ID」，這是一組唯一的身份識別碼，我們之後要在 Vue 專案中用這組 ID 來做初始化，請將它複製下來。
   

實作 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>

3. 接下來安裝 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 並實作登入邏輯

4. 登入是點擊按鈕後才觸發的行為，因此新增一個登入函式onLineLoginClick，綁定在按鈕上：

<button class="...." @click="onLineLoginClick"

接著在 <script setup> 初始化LINE SDK後做LINE登入，記得將前面複製好的「LIFF ID」貼上，登入邏輯如下：

<script setup>
    const onLineLoginClick = async() => {
        try {
            await liff.init({
                liffId: "<貼上剛剛複製的LIFF ID>",
            })
            if (!liff.isLoggedIn()) {
                liff.login();
            }
        }
        catch (error) {
            console.error('錯誤: ', error);
        }
    }
</script>

5. 可以點擊按鈕來試試看囉～
   點擊登入按鈕後，畫面會切換到 LINE 官方的登入授權畫面：
   

取得使用者資訊 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 結果。

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 結果。

結語

我們實際操作了從 建立 LIFF Application、Vue 串接 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 安裝來源