-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
157 lines (157 loc) · 9.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="zh-TW">
<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>LIFF v2 基本使用筆記及範例 - August - Let's Write</title>
<link rel="canonical" href="https://letswritetw.github.io/letswrite-liff-init/"/>
<meta property="og:url" content="https://letswritetw.github.io/letswrite-liff-init/"/>
<meta property="fb:app_id" content="911000986339138"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Let's Write"/>
<meta property="og:title" content="LIFF v2 基本使用筆記及範例 - August - Let's Write"/>
<meta itemprop="name" content="LIFF v2 基本使用筆記及範例 - August - Let's Write"/>
<meta name="description" content="本篇大綱：本篇要解決的問題。建立 LIFF。LIFF init。取得基本環境資訊。登入、登出。取得使用者資料。傳訊息。連結。打開 QR Code 掃描器。關閉 LIFF。LIFF 轉成公開。範例、原始碼。"/>
<meta property="og:description" content="本篇大綱：本篇要解決的問題。建立 LIFF。LIFF init。取得基本環境資訊。登入、登出。取得使用者資料。傳訊息。連結。打開 QR Code 掃描器。關閉 LIFF。LIFF 轉成公開。範例、原始碼。"/>
<meta itemprop="description" content="本篇大綱：本篇要解決的問題。建立 LIFF。LIFF init。取得基本環境資訊。登入、登出。取得使用者資料。傳訊息。連結。打開 QR Code 掃描器。關閉 LIFF。LIFF 轉成公開。範例、原始碼。"/>
<meta itemprop="image" content="https://letswritetw.github.io/letswrite-liff-init/fb.png"/>
<meta property="og:image" content="https://letswritetw.github.io/letswrite-liff-init/fb.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="LIFF v2 基本使用筆記及範例"/>
<link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"/>
<link rel="stylesheet" href="dist/style.min.css?v=1.1.3"/>
<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
</script>
</head>
<body>
<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div class="container" id="app">
<h1>LIFF v2 基本使用示範</h1>
<h6>筆記文：<a href="https://letswrite.tw/liff-init/" target="_blank">Let's Write</a></h6>
<section class="row">
<div class="twelve column">
<!-- 填寫 LIFF ID-->
<div class="box">
<h2>填寫 LIFF ID 以啟動範例功能</h2>
<p>請參考筆記文，建立自己的 LIFF 後，將取得的 LIFF ID 填入以下欄位。</p>
<input class="u-full-width" id="liff-input" type="text" placeholder="請填入LIFF ID"/>
<button class="button-primary" id="liff-btn">確認並啟動</button>
</div>
<!-- 基本環境資訊-->
<div class="box">
<h2>基本環境資訊</h2>
<script src="https://gist.github.com/letswritetw/d789bc9bb90def936d8380f376ff6859.js"></script>
<h3>示範</h3>
<textarea class="u-full-width" id="result-basic" placeholder="結果會顯示在這"></textarea>
</div>
<hr/>
<!-- 登入、登出-->
<div class="box">
<h2>登入、登出</h2>
<ul>
<li>僅支援外部瀏覽器</li>
<li>「redirectUri」的網址必須要在後台中的「Callback URL」先設定好，不然會 400 error</li>
</ul>
<script src="https://gist.github.com/letswritetw/dbeeaa558161b9eafeb83b09f12dce58.js"></script>
<h3>示範</h3>
<ul>
<li>外部瀏覽器時才有作用</li>
<li>登入 / 登出 後，可以看上面的「isLoggedIn」是否有變動，true 為登入、false 為未登入</li>
</ul>
<button id="login">登入 LINE</button>
<button id="logout">登出 LINE</button>
</div>
<hr/>
<!-- 取得使用者資料-->
<div class="box">
<h2>取得使用者資料</h2>
<p>官方提醒：</p>
<blockquote>
<p>Do not track a user with cookies, localStorage, or sessionStorage or link LINE user information with external session information without getting the user's consent. While you can use cookies, localStorage, or sessionStorage with the LIFF app, their use may be restricted in the future.</p>
<p>未經用戶同意，請勿使用 cookie，localStorage 或 sessionStorage 跟踪用戶或將 LINE 用戶信息與外部會話信息鏈接。雖然您可以通過 LIFF 應用程序使用 cookie，localStorage 或 sessionStorage，但將來可能會限制它們的使用。</p>
</blockquote>
<script src="https://gist.github.com/letswritetw/1e0bc0ad0b62cefc353e294bcee4de58.js"></script>
<h3>示範</h3>
<p>需先登入 LINE</p>
<button id="getContext">取得使用者類型資料</button>
<button id="profile">取得使用者公開資料</button>
<button id="getEmail">取得使用者 email</button>
<textarea class="u-full-width" id="result-info" placeholder="結果會顯示在這"></textarea>
</div>
<hr/>
<!-- 傳訊息-->
<div class="box">
<h2>傳訊息</h2>
<ul>
<li>會用你的帳號傳訊息</li>
<li>傳送訊息：無法在外部瀏覽器使用</li>
<li>傳送訊息：後台 Scopes 的「chat_message.write」要打勾</li>
<li>傳送訊息給朋友：登入 LINE 帳號即可使用</li>
<li>傳送訊息給朋友：LIFF 後台上的「shareTargetPicker」必須要是打勾</li>
<li>這邊傳訊息的部份，是用你的帳號傳訊息到 好友、聊天室、群組、機器人</li>
<li>使用者登入時的「傳送訊息至聊天室」要是「許可」</li>
</ul>
<script src="https://gist.github.com/letswritetw/1c8275d7a0780941f2da5b6850d2e2ad.js"></script>
<h3>示範</h3>
<input class="u-full-width" id="message" type="text" placeholder="請填入要傳送的訊息"/>
<button id="sendMessage">傳送訊息</button>
<button id="sendShareTarget">傳送訊息給朋友</button>
</div>
<hr/>
<!-- 連結-->
<div class="box">
<h2>連結</h2>
<script src="https://gist.github.com/letswritetw/6b77b5af7c5c2ce1ed87bcc909e743e8.js"></script>
<h3>示範</h3>
<div class="row">
<div class="one-half column">
<input class="u-full-width" id="uri" type="url" placeholder="請填入要開啟的連結"/>
<button id="openWindow">開啟連結</button>
</div>
<div class="one-half column">
<input class="u-full-width" id="result-uri" type="url" placeholder="這邊會顯示本頁連結"/>
<button id="getLink">取得當下頁面的連結</button>
</div>
</div>
</div>
<hr/>
<!-- 掃描器-->
<div class="box">
<h2>掃描器</h2>
<ol>
<li>僅支援在 LINE App 內開啟時</li>
<li>後台的「Scan QR」必須是打勾的，而且使用者要在 LINE App 上開啟時才能使用</li>
<li>會回傳字串回來</li>
<li>IOS 的 LINE 在 9.19.0 以上的版本無法使用，會回傳 undefined</li>
</ol>
<script src="https://gist.github.com/letswritetw/bc975bf7db7d049b0687e6a038b88f74.js"></script>
<input class="u-full-width" id="result-qr" type="text" placeholder="這邊會顯示掃描後的結果"/>
<button id="qrScan">打開 QR code 掃描器</button>
</div>
<hr/>
<!-- 關閉-->
<div class="box">
<h2>關閉 LIFF</h2>
<p>僅支援在 LINE App 內開啟時</p>
<script src="https://gist.github.com/letswritetw/229c09fe6a65788a3fd68c8c09c197ba.js"></script>
<button id="closeLIFF">關閉 LIFF</button>
</div>
</div>
</section>
</div>
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="dist/main.min.js?v=1.1.4"></script>
</body>
</html>