LIFF v2でLINEログインを試してみた

2019年10月16日にLIFF v2がリリースされました。LIFFって何？な方はこちらをご確認ください。

https://engineering.linecorp.com/ja/blog/liff-v2/

LIFF v2になったことで、様々な恩恵を受けられます。今回は強化されたLINEログイン連携部分を試してみました。

## 完成動画
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LIFF v2をVue.jsでLINE ログインするところを実装してみた。<br>シンプルなコードでセキュアにLINEログインできるのはイイね！<a href="https://twitter.com/hashtag/liff?src=hash&amp;ref_src=twsrc%5Etfw">#liff</a> <a href="https://t.co/fLpUUmnU34">pic.twitter.com/fLpUUmnU34</a></p>&mdash; がおまる@LINE API Expert (@gaomar) <a href="https://twitter.com/gaomar/status/1184680054686543874?ref_src=twsrc%5Etfw">October 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 1. ngrok起動しよう！
ローカル環境で動かすので、ngrokを起動させておきます。

```shell
$ ngrok http 8080
```

発行された `https://` 側のURLをメモしておきます。

<img width="641" alt="s101.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/3c0d4ce6-4fd8-fe79-a79f-cea933b1e5d7.png">


## 2. LIFF IDを作成しよう！

### 2-1. 新規チャネルを作成する
LINE Developersページへログインして、Messaging APIで新規チャネルを作成します。

<img width="785" alt="s100.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b3af9fc9-c97c-8bec-8090-3267bd5e680f.png">

### 2-2. LIFFの設定を行う
LIFFタブをクリックして［追加］ボタンをクリックします。

<img width="762" alt="s102.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/905c61e0-f7e2-8752-b6c6-ef40c5d1e607.png">

|項目|値|
|:--|:--|
|①名前|liff-v2-demo|
|②サイズ|お好きなサイズを選択|
|③エンドポイント URL|https://XXXXXX.ngrok.io<br/>※手順1でメモした内容を反映|
|④Scope|profileにチェックを入れる|
|⑤オプション|共にONにする|

![s103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/49eff9d5-31f1-f6b3-7fde-96a4fd31861d.png)

発行されたLIFFのIDをメモしておきます。メモする部分は line://app/XXXXXXXXX-XXXXXXXX のapp/以降 `XXXXXXXXX-XXXXXXXX` 部分です。

<img width="834" alt="s104.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/95804423-81fb-17df-a8ab-4176db322b00.png">

## 3. サンプルプロジェクトを実行しよう！
今回のプロジェクトは下記にあります。
https://github.com/gaomar/liff-v2-demo.git

### 3-1. GitHubからクローンする
Vue.jsで作成したサンプルプロジェクトがありますので、そちらをクローンしてください。

```shell
$ cd ~/Documents
$ git clone https://github.com/gaomar/liff-v2-demo.git
$ code liff-v2-demo
```

### 3-2. 必要モジュールをインストールする
VSCodeでターミナルウィンドウを開いて、下記コマンドを実行します。

```shell
$ npm install
```

### 3-3. envファイルを編集する
`.env` ファイルを開いて、 2-2でメモしたLIFFのIDを反映させます。

<img width="667" alt="s105.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/63f09668-4713-ac57-1862-58629d29fd0d.png">

### 3-4. プログラムを実行する
下記コマンドを実行します。

```shell
$ npm run serve
```

手順1で発行したngrokのURLにアクセスしてみてください。
ログインボタンが表示され、ログインするとログイン者の名前が表示されます。

<img width="1310" alt="s106.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b1c4e972-0824-ef4b-5854-9b9f48e82e1d.png">

## 4. プログラム解説
### 4-1. LIFF SDK読み込み
LIFF v2のSDKはpublicフォルダのindex.htmlの11行目に設定しています。

```html:public/index.html（11行目）
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
```

### 4-2. LIFF初期化
src/components/Helloworld.vue の22行目にて初期化を行っています。
liffIdで対象のLIFFを設定しています。ログイン済みだったらログイン画面へ遷移させています。

```javascript:src/components/HelloWorld.vue（22行目）
liff.init(
  {
    liffId: process.env.VUE_APP_LIFF_ID
  },
  data => {
    if (liff.isLoggedIn()) {
      // ログイン済み
      me.$router.push({ name: 'login' })
    }
  },
  err => {
    console.log('LIFF initialization failed', err)
  }
)
```

### 4-3. ログイン処理
ログイン処理は単純で、 `liff.login()` で完了します。とてもシンプルです。
引数を省略すると、LINE Developerページで設定したエンドポイントURLに遷移します。

引数を設定するとお好きなURLへジャンプすることも可能です。
詳しくは[こちら](https://developers.line.biz/ja/reference/liff/#login)に解説があります。

```javascript:src/components/HelloWorld.vue（40行目）
loginAction: function () {
  // ログインまだ
  if (!liff.isLoggedIn()) {
    liff.login()
  }
}
```

<img width="1130" alt="s107.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/be194646-d77b-d0d6-9779-c64f8ce5bf44.png">

### 4-4. プロフィール取得
ログイン後にログイン者の名前を取得しています。
src/views/Login.vue の `liff.getProfile()` で取得しています。

```javascript:src/views/Login.vue（46行目）
// ログインチェック
if (liff.isLoggedIn()) {
  // プロフィール取得
  liff.getProfile()
    .then(profile => {
      me.name = profile.displayName
    })
    .catch((err) => {
      console.log('error', err)
    })
} else {
  // ログインまだ
  this.$router.push({ name: 'home' })
}
```

### 4-5. ログアウト処理
ログアウト処理もシンプルです。 `liff.logout()` で完了します。
ログアウトしたら、トップページに遷移するようにしています。

```javascript:src/views/Login.vue（61行目）
logout: function () {
  // ログアウト
  if (liff.isLoggedIn()) {
    liff.logout()
    this.$router.push({ name: 'home' })
  }
}
```

## まとめ
非常にシンプルなコードでLINEログインすることができるようになります。
LIFF v2はこれ以外にも様々な機能が追加されているので、是非他の機能もトライしてみてはいかがでしょうか？

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