Posted at

LINEでログインしたら、LINE@のアカウントと友だちになるようにしてみた。

More than 1 year has passed since last update.

2017/11/22 に LINEログインとBotの自動リンク機能が一般公開されました。

このリリースによって、

LINEログイン時に、LINE@とのアカウントと自動的に友だちになることが出来るようになりました。

サクッと試してみましょう。


LINE@の Channel 作成

まずは、LINE@の Channel を作成します。

LINE developers 左メニューから Messaging API 画面に行き、

『今すぐはじめよう』をクリックし、新規Channelを作成します。

Developer Trial・フリー というプランが選択できますが、

フリーでは、PUSH_MESSAGE のAPIが使用出来ないため、

テストする場合は、Developer Trial を選択しましょう。

※Developer Trial は プランの変更が出来ません。


LINEログインの Channel 作成

続いて、LINEログインの Channel を作成します。

LINE developers 左メニューから LINEログイン 画面に行き、

『今すぐはじめよう』をクリックし、新規Channelを作成します。

プロバイダーは、リンクさせるLINE@のChannelと同様のものを選択します。

プロバイダーの画面が↓こんな感じになってると思います。

2017-12-16_15h34_27.png


LINEログインの設定


リンクするボットを設定

LINEログインの Channel基本設定 よりリンクするボットを設定します。

2017-12-16_15h49_46.png


ログイン後にリダイレクトするURLを設定

LINEログインの アプリ設定 よりログイン後にリダイレクトするURLを設定します。

※URLは改行区切りで複数設定することが可能です。

2017-12-16_17h18_08.png

ココまでで準備完了です。

早速 LINEでログインして LINE@のアカウントと友だち になってみましょう。


実際にログインして友だちになってみる

下記のようなURLへブラウザでアクセスします。

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={LINEログインのChannel ID}&redirect_uri={ログイン後にリダイレクトするURL}&state={ユニークな文字列}&scope=openid%20profile&prompt=consent&bot_prompt=normal

※{}内は、各自の環境に併せて設定して下さい。

※GETパラメータの詳細は、下記ドキュメントを御覧ください。

 ウェブアプリにLINEログインを組み込む

LINEのログイン画面が表示されます。

2017-12-16_17h41_22.png

ログインすると、認証画面が表示されます。

2017-12-16_17h43_44.png

画面下部に、友だち追加のチェックボックスが表示されました。

チェックを入れて、『同意する』をクリックすると、

連携したLINE@のアカウントと友だちになれます。

※今のところ、友だち追加のチェックを必須にすることは、

 LINEログイン上では出来ないようです。

 チェックの仕方は後述します。

また、認証後、先程設定した{ログイン後にリダイレクトするURL}に、

リダイレクトされますが、

リダイレクトする際、付与された、GETパラメータ の code を使用し、


  1. アクセストークンの発行

    アクセストークンを発行する


  2. 1のレスポンス id_token を使用して、ユーザーIDを取得

    IDトークン


  3. 1のアクセストークンを使用して、LINE@と友だちがどうかをチェック

    ボットとの友だち関係を取得する


  4. 友だちだった場合、2のユーザーID を使用し、LINE@ からメッセージを送る

    プッシュメッセージを送る


というような事が可能です。

また、LINE@ で友だちのユーザーにのみ公開するWEBコンテンツなども簡単に作成出来そうですね。

以上、サクッとやってみました。