Salesforce
Line
LineLogin

LINE LoginをSalesforceで実装してみた

More than 1 year has passed since last update.

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

LINE Loginのアカウントを作る

以下の場所から取得をする。

LINE Login
2017-01-29_19h33_18.png

Basic Informationの設定

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

「Application type」は「WEB」

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

2017-01-29_19h44_17.png

Technical configurationの設定

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

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

2017-01-29_20h01_22.png

Salesforce側の実装

ログインページ

2017-01-29_20h52_48.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

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


認証コードを取得

ログインに成功すると、以下のサンプルのようにリダイレクト先に指定した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

青枠の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
※この部分がv1の頃と微妙に変わっていて嵌まりました。以前のものをご利用中の方はご注意ください!


ユーザの情報を取得

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

2017-01-29_21h48_57.png

取得結果サンプル

2017-01-29_21h51_48.png

実装後のイメージ

2017-01-29_22h16_21.png
こんなログインページで、ボタンをクリックすると

2017-01-29_22h17_15.png
これが開いて

2017-01-29_22h19_23.png
こんな結果を得ることができます。
※初回はこのアプリ認証しますか?的なものがこのページの前の挟まれます

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

まとめ

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

https://github.com/hhayai/LineLogin

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

Integrating Web Login

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