1 of 13

每天五分鐘

LINE API 輕鬆上手 #23

什麼？LINE開網頁不用跳窗

​

2019@RenZhou

LINE Front-end Framework 實作篇

2 of 13

昨天了解了LIFF的函式應用

今天就來看看實際範例吧

3 of 13

來準備我們的網頁 step 1

來做一個能夠接LIFF的簡易網站

​

  1. 首先我們建立一個新的文字檔
  2. 然後把它檔名改成 index.html
  3. 寫入基本的 html 區塊 （如右圖）

​

3

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>標題在這裡</title>

</head>

<body></body>

</html>

​

​

​

4 of 13

來準備我們的網頁 step 2

  1. 然後在 body 底下 引入 SDK文件
  2. 並將 LIFF 初始化

​

4

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Document</title>

</head>

<body></body>

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>

<script>

liff.init(

data => {

// Now you can call LIFF API

},

err => {

// LIFF initialization failed

}

)

</script>

</html>

​

​

5 of 13

來準備我們的網頁 step 3

  • 使用者名稱要透過 liff.getProfile() 來拿
  • 我們把它寫在 data 內
  • 因為非同步的關係，所以要透過 promise 來接資料

​

​

5

​

liff.init(

data => {

// Now you can call LIFF API

liff.getProfile().then(profile => {

// 拿取 profile

})

},

err => {

// LIFF initialization failed

}

)

​

6 of 13

來準備我們的網頁 step 4

  • 資料拿到後要顯示在 body 中，所以來改一下body
  • getProfile() 這邊也讓他去改 body 的文字
  • 基本上到這邊就已經大致完成了

​

​

6

<body>

<p>userId: <span id="userId"></span></p>

<p>displayName: <span id="displayName"></span></p>

<p>pictureUrl: <span id="pictureUrl"></span></p>

<p>statusMessage: <span id="statusMessage"></span></p>

</body>

​

liff.getProfile().then(profile => {

// 拿取profile

document.getElementById('userId').innerHTML = profile.userId

document.getElementById('displayName').innerHTML = profile.displayName

document.getElementById('pictureUrl').innerHTML = profile.pictureUrl

document.getElementById('statusMessage').innerHTML = profile.statusMessage

})

​

7 of 13

全部的Code大概這樣

​

​

7

​

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Document</title>

</head>

<body>

<p>userId: <span id="userId"></span></p>

<p>displayName: <span id="displayName"></span></p>

<p>pictureUrl: <span id="pictureUrl"></span></p>

<p>statusMessage: <span id="statusMessage"></span></p>

</body>

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>

<script>

liff.init(

data => {

liff.getProfile().then(profile => {

// 拿取profile

document.getElementById('userId').innerHTML = profile.userId

document.getElementById('displayName').innerHTML = profile.displayName

document.getElementById('pictureUrl').innerHTML = profile.pictureUrl

document.getElementById('statusMessage').innerHTML = profile.statusMessage

})

})

</script>

</html>

​

​

8 of 13

部署之路

8

網站檔案

伺服器

http-server

(localhost:8080)

ngrok

(區網網址=>外部網址)

可用

LIFF

網址

“

9 of 13

安裝 http-server 並啟動

這邊用 npm 來做安裝

沒 npm 的朋友，請先去裝 node.js

​

​

接下來到你的 index.html 的目錄，透過終端機開啟 http-server

9

npm i -g http-server

http-server ./

10 of 13

測試 http-server 是否成功

開起來終端機會跑出這些字樣

​

​

接下來用瀏覽器開啟 http://127.0.0.1:8080

​

只要開得起來就沒問題了

​

這邊還沒用LINE開，所以沒有內容很正常

10

11 of 13

開啟 ngrok

沒 ngrok 的朋友，請先安裝 ngrok ， 在前面部署chatbot時有用到

我們一樣用指令開啟，之前用 3000 port 現在改成 8080 port

​

​

這樣就好囉，接下來就把網址貼到開發者後台

之後就能來測試我們的LIFF囉

​

11

./ngrok http 8080

https://ngrok.com/

12 of 13

貼到後台 然後... 完成 ！！！

​

​

12

13 of 13

下集內容預告

差不多要來到LINE Pay了