应用 LINE Front-end Framework 轻松建立互动 (1)

我们的验证码小帮手现在可以完成的项目有：

1. 对使用者进行身份验证与绑定
2. 判断使用者的讯息，进而回覆对应讯息
3. 读取 Gmail 信件中最新的验证码，并回应给使用者

但这些互动过程都是靠文字讯息，稍显无趣～而如果我们想进一步获得使用者在 Line 上的讯息，进而客制化验证码小帮手的回应讯息，那麽就得用 Line Login - 另一种 Channel 提供的服务型态。

Line Login

Line Login 是一个基於 OAuth 2.0 和 OpenID® Connect 协议的身份认证与授权的服务。他可以让使用者在我们自己的 Web App 中经由 Line Login 登入，我们即可以获取该使用者的 userId, name, 和一些个人资讯，也可以经由 userId 主动与使用者互动，甚至是将 userId 与我们自己的身份认证服务做绑定。

文件

LINE Login 介绍

将 LINE Login 的功能整合到 Web app 或 native appnative app 中，用户就可以使用 LINE Login。
当用户使用 LINE Login 後，就能透过用户的 LINE 帐号，轻松建立用於 Web app 和本应用程序的帐号。
LINE Login 的功能可以整合於 Web app、iOS、Android app 以及 Unity 中。

如何使用?

一样的，Line 的官方文件有非常详细的解说与范例可参考，这边就不多作阐述。Line Login API 的情境比较适合应用在整合进现有的 Web App 中，而对於没有 Web App 或者是只想建立几页简单互动的 Web App 的情境，Line 提供了 LINE Front-end Framework(LIFF) 的服务。但首先，我们还是得从建立一个 Line Login 的新 Channel 开始。

创建 Line Login Channel

先登入 Line Developer Console 选择我们的验证码小帮手，可以看到现在只有一个类型是 Messaging Api 的 Channel。虽然 Messaging Api 也有 LIFF 的选项，但实际点进去後就会看到如下图的提示：

所以回到验证码小帮手的 Provider 底下，新增一个 Channel

这边再次提醒～

• 一个 Line Developer Account 底下可以有很多个 Provider，每个 Provider 应该是独立的个人服务或品牌。
• 一个 Provider 底下可以有很多个 Channel，Channel 也有很多种类型

新建的 Channel 类型选择 Line Login，然後把设置填一填。App types 的部分可以只选 Web App 也可以都选，差别在於这个 Line Login 的服务是用在 website 还是 iOS or Android App，会需要去设置对应的 callback 选项。

建好了之後就可以看到 LIFF 的选项，就可以准备进一步设置了。

LINE Front-end Framework

LINE Front-end Framework (LIFF) 为 LINE 运作 web app 的平台。以往我们需要在自己的 Web App 串接 Line Login 来回取得使用者的资讯，但使用 LIFF App 就可以直接从 Line 取得 user ID 等资讯，相较之下方便很多！

文件

LINE Front-end Framework | LINE Developers
Trying the LIFF starter app

用 Heroku 部署第一个 LIFF App

Line 非常贴心的直接帮你写好一个 Node.js 的范例，还教你怎麽部署到 Heroku 这个平台上。

• Heroku是什麽?

  Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

1. 首先要申请一个 Heroku 帐号，申请的过程很简单就是有什麽填什麽～这边就不多阐述。
2. 接着按下 line-liff-v2-starter/README.md 里面的 Deploy to Heroku 按钮，Heroku 就会用这个 line-liff-v2-starter 作为 template 部署
3. 接着出现如下图的画面，填入 App Name (如果名字已被使用就在後面加上日期或时间戳吧)
   
4. 按下 Deploy App 并等待部署完成，如下图
   
5. 按下 View 可以看我们部署好的网站～如下图
   

因为我们还没有填入 LIFF ID，所以页面提示我们应该怎麽修正这个问题
Heroku 的部署第一阶段先到这边，接着我们要在 Line Developer Console 设置 LIFF 才能取得 LIFF ID

设定 LIFF APP

在刚刚建好的 Line Login Channel 找到 LIFF 选项点下去，然後点选 Add 按钮，填选必要资讯如下：

• LIFF app name: 输入你想要的 App Name
• Size: Size 的选择可以看这里 screen-size 选择你想要的视窗大小，这边选择 Tall (注意: 如果你想要分享按钮，就一定要选择 Full)
• Endpoint URL: 输入刚刚产生的 Heroku Url，类似 https://{Heroku app name}.herokuapp.com/
• Scopes: 选取你想取得的使用者资讯范围，profile & openid 都要勾，另外按下 View all 可以看到一个 chat_message.write，这个会询问使用者是否愿意让我们发送讯息到聊天室，也把他勾起来(虽然如果使用者不许可的话还是没办法发送)
• Bot link feature: 这边是选择当使用者使用 LIFF APP 时，提示使用者加入 Bot 好友的方式。这边选择什麽都不影响，想看详细的资讯可参考 registering-liff-app
• Scan QR: 这个 LIFF App 是否要提供扫描 QR Code 的功能，先不用开。

设定好了之後就可以看到 LIFF APP 已经产生如下图：

如果你的 LIFF APP 是 Developing 的状态，记得按下 Developing 变成发布状态，别人才能用 LIFF URL 连到你的 LIFF APP

在 Heroku 设定 LIFF ID

有了 LIFF ID～接着我们就可以回到 Heroku 继续完成部署设定了。

首先在刚刚部署完成的页面点击 Manage App，然後点击 Settings Tab，找到 Config Vars 如下图：

在 Key 的部分填入 MY_LIFF_ID，Value 的部分填入刚刚取得的 LIFF ID，接着按下 Add 储存。这样我们就设好了 MY_LIFF_ID 这个环境变数，先前部署好的程序就可以成功拿到 LIFF ID 了

接着重整部署好的 Heroku 页面，应该就可以看到如下图的结果：

因为不是用 Line 内建浏览器开启，所以还是未登入的状态。

在 Line 上测试 LIFF APP

接着我们改用 Line 内建的浏览器来测试我们的 LIFF APP 吧。将先前取得的 LIFF URL 贴到验证码小帮手的对话框送出，我们就可以点击连结用 Line 内建的浏览器开启这个网址。如下图：

如果使用者没有许可发送讯息到聊天室，按下 Send Message 就会出现如下的错误提示：

因为在 Line 上已经是登入状态，所以按下 Get Access Token 跟 Get Profile 都可以成功拿到资讯

以上～今天就到这里，明天继续研究这个 LIFF APP 范例里到底写了什麽，其实只要看懂这个范例就能了解大部分的 LIFF APP 该怎麽开发，基本功不论何时都是很重要的～