LINE LoginをSalesforceで実装してみた

今回はちょっと仕事上、調べることがあったLINE LoginをSalesforceで実装してみたので、その手順をまとめます。ググってみたら、割と記事が古くてv2では微妙に異なる部分も会ったので、その辺りも参考になればと思います。

# LINE Loginのアカウントを作る
以下の場所から取得をする。

[LINE Login](https://business.line.me/ja/services/login)
![2017-01-29_19h33_18.png](https://qiita-image-store.s3.amazonaws.com/0/160895/55ec212e-fb35-bc08-27d9-8ee38296ff63.png)

## Basic Informationの設定

あとはなんとなく進めていけば大丈夫ですが、今回はWEBのアプリケーションになるので、

**「Application type」は「WEB」**

を選択しましょう。最終的にはこんな感じになります。
「**Channel ID**」と「**Channel Secret**」は、後で使うのでメモするか確認できるようにしておきましょう。

![2017-01-29_19h44_17.png](https://qiita-image-store.s3.amazonaws.com/0/160895/9b3bede9-8032-4799-6d1f-c80be9997055.png)

## Technical configurationの設定
Callback URLは、ログイン成功後にリダイレクトされる場所を指定します。Salesforceで実装する場合は、当然のことながらサイトで公開しているページを指定する必要があります。

**※後ほど設定する「redirect uri」とイコールにする必要がありますので、気をつけてください**

![2017-01-29_20h01_22.png](https://qiita-image-store.s3.amazonaws.com/0/160895/7a000c24-6e87-b644-d2ec-9f79c1e1e234.png)

# Salesforce側の実装
#### ログインページ

![2017-01-29_20h52_48.png](https://qiita-image-store.s3.amazonaws.com/0/160895/2d5494c5-1fd5-0c14-87d7-46dae8252768.png)

上記のような感じで、特に難しいことはしていませんが、ボタン部分のURLの形式が以下のように決まっているので、そこだけ間違えないようにしてください。

`https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id={Channel ID}&redirect_uri={Callback URL}&state={State}`

| Parameter  | Type  | Description  |
|:-:|:-:|:-:|
| response_type | String | 「code」で固定 |
| client_id | String | Channel ID |
| redirect_uri | String | 前述のCallback URL（要URLエンコード） |
| state | String | 自由に指定していいようです（要URLエンコード） |

---

#### ログイン成功後のページ

![2017-01-29_21h03_13.png](https://qiita-image-store.s3.amazonaws.com/0/160895/5711fdb9-1814-9a6b-3d4b-38611148297d.png)

こちらは結果を表示するだけです。

---
#### 認証コードを取得
ログインに成功すると、以下のサンプルのようにリダイレクト先に指定したURLの後ろにパラメータが付いて表示されます

`http://sample.com/callback?code=b5fd32eacc791df&state=123abc`

| Parameter | Type | Description |
|:-:|:-:|:-:|
| code | String | ログイン成功すると返る認証コード |
| state | String | ログインページのURLでStateで設定した値 |

こちらの認証コードは以下のような形で取得します。

`String codeStr = ApexPages.currentPage().getParameters().get('code');`

---

#### アクセストークンの取得
前述の認証コードを使って、アクセストークンを取得します。データはJSON形式で渡されます。

![2017-01-29_21h37_01.png](https://qiita-image-store.s3.amazonaws.com/0/160895/90847f1f-4e4c-be51-445b-d6164dd317f5.png)

青枠のrequest bodyの部分は以下を参考に値をセットします。

| Parameter | Type | Description |
|:-:|:-:|:-:|
| grant_type | String | 「authorization_code」で固定 |
| client_id | String | Channel ID |
| client_secret | String | Channel Secret |
| code | String | 取得した認証コード |
| redirect_uri | String | リダイレクトURL |

取得結果サンプル
![2017-01-29_21h50_09.png](https://qiita-image-store.s3.amazonaws.com/0/160895/cea566bc-7ac3-62c1-ada6-8d64a27f2cf0.png)
**※この部分がv1の頃と微妙に変わっていて嵌まりました。以前のものをご利用中の方はご注意ください！**

---

#### ユーザの情報を取得
以下のような形でエンドポイントを指定して、先ほど取得いたアクセストークンをセットすることで取得できます。データはJSON形式で渡されます。

![2017-01-29_21h48_57.png](https://qiita-image-store.s3.amazonaws.com/0/160895/8c26b36a-67c0-6ebe-88f4-d1ba39a4e72c.png)

取得結果サンプル

![2017-01-29_21h51_48.png](https://qiita-image-store.s3.amazonaws.com/0/160895/cc65e93d-6302-feda-ab2a-e6560c6da75b.png)

# 実装後のイメージ
![2017-01-29_22h16_21.png](https://qiita-image-store.s3.amazonaws.com/0/160895/f9fd807d-c297-dc7c-59b6-eb14c16807e6.png)
こんなログインページで、ボタンをクリックすると

![2017-01-29_22h17_15.png](https://qiita-image-store.s3.amazonaws.com/0/160895/3a3b4af3-c87f-3737-1007-c91f1fde5003.png)
これが開いて

![2017-01-29_22h19_23.png](https://qiita-image-store.s3.amazonaws.com/0/160895/c317cbf2-29e7-7736-045c-a9522654b2d3.png)
こんな結果を得ることができます。
**※初回はこのアプリ認証しますか？的なものがこのページの前の挟まれます**

ちなみに認証ページのところは、LINEを使っているスマホで開くと、自動的にLINE Profile+が自動的に認証情報を埋めてくれるので便利です。

# まとめ
プログラムについては、GitHubでソースコードを公開しているので、そちらを見ていただければと思います。

https://github.com/hhayai/LineLogin

基本的には、今回レベルの内容でしたらLINE Developersのドキュメントの以下のものを参考に実装すればできると思いますので、詳細はこちらをご確認ください。

[Integrating Web Login](https://developers.line.me/web-api/integrating-web-login-v2)

何か色々なことができそうな気がしていますが、残念ながら個人的に調査したかったことはできなかったので、次に何かやる時に活かせたらいいなーと思ってます。