前言

碰巧最近有個日文五十音消除遊戲的 Side Project 正在實作中，參考之前鐵人賽文章，實作上發現有些內容可能是年久失修，導致實作上不太順利，碰巧近期 LINE Login 的官方文件也有更新，並且搭配之前實作的範例是使用 (Screen-LINE-Bullets)，來延伸 Side Project，以下就為各位介紹一下其中使用 LINE Login 的一些過程。

TL;DR

• LINE Login 範例從 Flask 轉到 Vue+FastAPI
• 前後端分離
  • 前端用兩個頁面清楚展示 LINE Login SSO 步驟
  • 後端兩個 API
    • 取得認證導向網址
    • 認證 JWT 中的使用者參數
    • 環境變數都放後端(較安全)

• LINE Login 事主專案

前言

在 Vue 3 出來之後我有嘗試了一下新的功能，結合 LIFF 做了一個 side project - Announcer-Vue，當然也有寫了一篇相關使用的文章 在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友，那既然會用了，當然也要來了解一下一些 Composition API 的介紹，那以下就是我去參加 Kuro 的簽書會所聽到的內容。

前言

過年前收到了預購的 Vue.js 3 書，除了支持以外也希望透過紀錄把看過的東西在寫下來加深印象，以下就分享一些我看的過程中覺得有學習到的部分。

前言

以往在 LINE 平台上發送公告相關訊息時都只能編排文字順序、傳另一個圖片、抑或是傳影片...anyway，而隨著 LINE 推出了 Flex Message 讓開發者可以將訊息當作網頁 CSS 樣式塑造出一個客製化的訊息格式，這在 Chatbot 的領域裡基本上可以算是殺手級功能了，Chatbot 可以在過程中可以依照對話流程釋出不同樣版的內容，讓使用者體驗更上一層。

隨著時間的演進 LINE 也 release 了自家的前端框架 - LIFF，開發者能夠很快速的使用到 LINE Login 的相關功能並且整合到 Chatbot 上面，讓整體服務的使用體驗更上一層，接著在近些日子釋出了本篇介紹的主軸 - ShareTargetPicker，其功能主要是能將之前只有 Chatbot 才能使用的 Flex Message 透過 LIFF 的這隻 API 使用發送者的名義將客製化訊息幫忙發送給 使用者/群組/聊天室，讓我在群組公布訊息時能有煥然一新的模樣呢！

• 也有 LINE API Expert 分享的 看起來很專業的 LINE 數位版名片 文章可以參考。

會寫這篇的原因也是因為最近寫了一個 Side Project - Announcer 讓我可以再公布訊息時可以發送漂亮的 Flex MEssage，而使用 Node.js 開發時因為需要使用 LIFF 的 ShareTargetPicker，當時只透過 EJS 幫我產生 html template 來發送 FlexMessage，一開始認為應該不會寫太多前端的邏輯，但隨著想增進更多的 UX 因此需要操作更多的前端邏輯(可以看看這個 tag 裡的 views 資料夾)，因此在多種考慮下決定使用 Vue 來簡化我的開發，但在 migrate 之前總是要先了解一下兩邊結合的可行性，本篇就給大家帶來 Vue3 結合 LIFF 的相關使用介紹。 🙂

FlexMessage 詳細介紹可以參考這篇 - Flex Message 的 Update 1 已公開

前言

因為最近正在把自己在公司用的小工具 - Announcer(Base on Node.js)中的前端抽離出來，而也剛好在前一陣子參加了 Vue.js 社群聚會得知 Vue 3 可以開始試玩，那 side project 當然就是第一個試水溫的地方啦！但可能太久沒用 Vue 來處理前端的事情讓找錯誤中有點綁手綁腳，因此把整合 3 版 Router 中的一些除錯過程記錄下來 👍

前言

大家好，我是 LINE Taiwan Technology Evangelist - NiJia Lin，身為場地提供方也很感謝 Vue.js Taiwan 的大家配合相關防疫流程並座無虛席，在此也跟各位分享本次參與的心得，並且也希望透過社群分享的力量能夠讓聊天機器人的開發動能更加的盛大。(熊大也表示有新朋友來了 😆)

• Vue.js Taiwan 社群：https://www.facebook.com/groups/vuejs.tw/
• 活動報名頁面：https://vuejs.kktix.cc/events/v-tw-meetup-006