LIFF v2のLINEログインでセキュアにWinActorを起動してみる

LIFF v2でLINEログイン周りが強化されました。LINEログインをしてWinActorを起動してみました。
この記事は[enebular Advent Calendar 2019](https://qiita.com/advent-calendar/2019/enebular)の19日目の記事です。

## システム構成図
enebularで作成したLIFFのログインページを経由してLINEログインを行っています。
ログインが完了すると、ngrok経由で立ち上がっているサーバーにリダイレクトします。
あとは、node.jsでWinActorの.lnkファイルを起動しています。

<img width="511" alt="s100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d164d59b-903c-3632-95f5-d57e81d8bd1e.png">

## デモ動画
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LIFF v2の機能を使ってLINEログインからセキュアにWinActorのロボを実行するデモです。<br><br>ログインしないとロボを実行させないといった使い方もできるはず...<a href="https://twitter.com/hashtag/WinActor?src=hash&amp;ref_src=twsrc%5Etfw">#WinActor</a> <a href="https://twitter.com/hashtag/enebular?src=hash&amp;ref_src=twsrc%5Etfw">#enebular</a> <a href="https://twitter.com/hashtag/LIFF?src=hash&amp;ref_src=twsrc%5Etfw">#LIFF</a> <a href="https://t.co/4UImFYDu2Y">pic.twitter.com/4UImFYDu2Y</a></p>&mdash; がおまる@LINE API Expert (@gaomar) <a href="https://twitter.com/gaomar/status/1202223195392102401?ref_src=twsrc%5Etfw">December 4, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 1. LINEログインチャネルを作成する
LINEログインするためのチャネルをLINE Developerで作成します。
下記URLにアクセスしてください。

https://developers.line.biz/ja/

### 1-1. LINEログインチャネル新規作成
LINEログインをクリックします。

<img width="943" alt="s200.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/a4bcc056-4151-8ae0-50b1-400bbd3e73f3.png">

|項目|値|
|:--|:--|
|①チャネル名|LIFF-LOGIN|
|②チャネル説明|LIFF-LOGIN|
|③アプリタイプ|2つチェック入れる|
|④メールアドレス|ご自身のメールアドレスを入力|

<img width="637" alt="s201.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0353aca8-0057-d7b1-ae6d-85708b5207a1.png">

チェックを入れて［作成］ボタンをクリックします。

<img width="433" alt="s202.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b746d783-59ba-7b2b-3901-4dffc0f1544b.png">

### 1-2. LIFFのIDを作成する
`LIFF` タブをクリックして、LIFFの設定をします。［追加］ボタンをクリックします。

<img width="723" alt="s203.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/1c87da45-6d4b-ffe1-6931-48c6cc609d39.png">

各種項目を設定する

|項目|値|
|:--|:--|
|①LIFFアプリ名|LIFF-LOGIN|
|②サイズ|Tall|
|③エンドポイントURL|enebularのリンクの末尾に `liff` を追加する<br>例）https://ev2-prod-node-red-xxxxxxxx-xxx.herokuapp.com/liff |
|④Scope|profile|
|⑤ボットリンク機能|On (Normal)|

<img width="1127" alt="s204.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/20f7ee17-7227-c849-e48d-f92d9710daf5.png">

［作成］ボタンをクリックします。
<img width="928" alt="s205.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/e1b0085f-782f-b57a-f748-eeb08496f5a0.png">

LIFFのIDが生成されるので、ID（ `xxxxxxxxxx-xxxxxxxx` 部分）をメモしておきます。 
line://app/xxxxxxxxxx-xxxxxxxx

<img width="975" alt="s206.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ac8051b1-5bbc-3f67-976c-7ae186ab25f5.png">

## 2. WinActorの設定をする
コマンドプロンプトを立ち上げて、GitHubからファイルをCloneしてきます。

### 2-1. GitHubからCloneする
下記コマンドを実行してください。

```
> cd %homepath%\Documents
> git clone https://github.com/gaomar/liff-enebular-winactor-exec.git
```

### 2-2. WinActorショートカット作成
WinActorを起動して、［設定］- [起動ショートカット作成]をクリックします。

<img width="365" alt="s301.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/23af2867-06e5-542a-c13d-2b2dbc7e235d.png">

ドキュメントフォルダの `liff-enebular-winactor-exec` フォルダにある `callMemo.ums6` ファイルを選択します。
実行オプションは2つ共チェックを入れてください。［作成］ボタンをクリックします。

![s302.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/5f1c942f-916c-3588-83be-516665e6c18d.png)

保存先は `liff-enebular-winactor-exec` フォルダの直下に保存しておいてください。
ファイル名は `callMemo` という名前にしてください。

![s303.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3af1cdae-ec0f-cb48-a96d-f9993c75ee75.png)

### 2-3. モジュールインストール
下記コマンドを実行してください。

```
> code liff-enebular-winactor-exec
```

Visual Studio Codeが起動するので、必要なモジュールをインストールします。
`Ctrl + @` でターミナルウィンドウが開くので、そこにコマンドを入力します。

```
> npm install
```

![s300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/5178b75e-d607-6ad1-3c60-c35ba1acc8c6.png)

必要なモジュールがインストールできたら、プログラムを起動します。
下記コマンドを実行してください。

```
> node index.js
```

`Server running on 3000` と表示されればOKです。

![s304.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/28bf056c-a0f8-d2dc-b495-702240d340fd.png)

### 2-４. ngrokインストール
ngrokがまた未インストールの方は下記コマンドを実行してください。

```
> npm i -g ngrok
```

### 2-5. ngrok起動
まず、VSCodeでウィンドウを分割します。
インストール済みの方は下記コマンドを実行してngrokを起動してください。

```
> ngrok http 3000 
```

![s305.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/22301b43-7b2d-d79f-4e44-b5e4b6e63a3c.png)

起動したら発行される `ngrokの値` をメモしておきます。
今回の例だと `4ab2d27b` です。この値はngrokを起動し直す毎に値が変化しますので注意してください。

![s306.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/0653ebe0-d242-2dc5-2f4f-195ef12e1be8.png)

## 3. enebularの設定をする
enebularにLIFFの設定を行います。

### 3-1. http in ノードを設定する
入力カテゴリにある `http in` ノードをエディタ画面にドラッグアンドドロップします。
ノードをクリックして、 `URL` 部分に `/liff` と入力します。

<img width="1252" alt="s400.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/8f6f2d68-4b0d-c025-6b34-2db1cf3d4b97.png">

### 3-2. change ノードを設定する
これまでに取得したIDをenebularに適用します。機能カテゴリにある `change` ノードをドラッグアンドドロップします。
値の代入を各変数に入れていきます。

|項目|値|
|:--|:--|
|msg.liffid|1-2でメモしたLIFFのID|
|msg.ngrok|2-5でメモしたngrokの値|

<img width="1070" alt="s401.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/6ec0046c-7844-1ca0-8830-4f396f10c67c.png">

### 3-3. template ノードを設定する
機能カテゴリにある `template` ノードをドラッグアンドドロップします。
ノードをクリックして、構文を `HTML` に変更します。コードは下記をコピペしてください。

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
        <title>LIFF-enebular-WinActor</title>
    </head>
    <body>
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script>
            liff.init({
                liffId: '{{liffid}}'
            })
            .then(async () => {
                if (liff.isInClient()) {
                    window.location='https://{{ngrok}}.ngrok.io';
                } else {
                    if (liff.isLoggedIn()) {
                        console.log('Logged in.');
                        liff.logout();
                        window.location = 'https://{{ngrok}}.ngrok.io';
                    } else {
                        liff.login();
                    }
                }
            })
            .catch((err) => {
                console.log(err.code, err.message);
            });
        </script>
    </body>
</html>
```

<img width="1228" alt="s402.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/1cf0c1aa-97cf-bdc4-ec5f-2e3c42b12813.png">

### 3-4. http response ノードを設定する
出力カテゴリの `http response` ノードをドラッグアンドドロップします。
このノードは特に設定することはありません。

<img width="863" alt="s403.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/4f40b61e-282a-4c2f-8170-319b53415142.png">

### 3-5. 各ノードを繋ぐ
各ノードを線で繋いでいきます。繋ぎ終わったら、デプロイボタンをクリックしてください。

<img width="1038" alt="s404.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3fbe3722-9be4-8978-d7ac-beca6c32f469.png">

## 4. 動作確認する
1-2のエンドポイントURLで設定したURLにブラウザでアクセスしてください。
すると、LINEのログイン画面が表示されるので、ログインします。ログインが完了するとWinActorが起動します。

`https://ev2-prod-node-red-xxxxxxxx-xxx.herokuapp.com/liff`

<img width="676" alt="s500.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/aad357ad-b19b-ddca-e534-c3381c6a1c62.png">

## まとめ
LIFFがv2になったことで非常に簡単にLINEログインを実装できるようになりました。
enebularを使うことで直ぐに試すことが可能です。

LINEアプリから `line/app/xxxxxxxxxx-xxxxxxxx` のリンクを踏むと自動的にログインして
そのまま実行することも可能です。

LIFFを使っていろんなサービスを試してみましょう！

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/