BackEnd

WebアプリケーションにLINEログインを組み込む

投稿日:

はじめに

昨今では多くのWebサイトでTwitterやFacebookなどのアカウントを使ってログインすることができます。今回の記事ではWebアプリケーションにLINEログインを組み込む方法を紹介します。

LINEを選択した理由は以下の二点です。

  • 日本ではLINEを利用しているユーザが多い(と思われる)
  • ちょうど業務でLINEログインを実装している最中である

それでは、初めにLINEログインについて紹介します。

LINEログインとは

LINEログインとはその名の通り、ユーザのLINEのアカウントを利用して他のアプリやWebサービスにログインさせるサービスです。

LINEログインを利用することで、ユーザは簡単にアカウントを作成してログインすることができるようになり、アカウント登録の敷居を下げることができます。

LINEログインでできること

LINEログインを使えば簡単にアカウントを作成してログインできることはわかりました。しかし、LINEログインでできることはそれだけではありません。

LINEログインを利用すると以下のようなことができます。

  • ユーザ名やアイコン画像などのプロフィール情報の取得 ※1
  • LINEのユーザIDの取得 ※1
  • メールアドレスの取得 ※1
  • 関連するLINE公式アカウントと友達登録(任意)

※1 正確にはLINEログインで取得した code を利用した Social API で取得

LINEログインのフロー

LINEログイン(Webログイン)は以下のようなフローで処理されます。

  1. ユーザがWebページなどに設置されたLINEログインボタンなどをクリック(タップ)する
  2. Webアプリは必要なクエリパラメータを付加したLINEログイン画面へリダイレクトする
  3. ユーザは自分のLINEアカウントでログインし、Webアプリからの権限の要求を許可する
  4. LINEのサーバはクエリパラメータで指定された redirect_url に必要なクエリパラメータを付加してリダイレクトする
  5. Webアプリはクエリパラメータに含まれる認可コードを使って、APIでLINEのサーバにアクセストークンを要求する
  6. LINEのサーバはリクエストを検証し、問題なければアクセストークンをWebアプリに返却する

こちらにログインフローの図があります。

LINEログインの設定

LINEログインを利用するには LINE Developers にログインしてコンソールから必要な設定を行っておく必要があります。こちらからログイン画面に遷移して、LINEの登録時に設定したメールアドレスとパスワードでログインします。

プロバイダーを新規作成する

ログインするとプロバイダーリストが表示されます。

任意のプロバイダー名を入力して「確認」をクリックします。

「作成する」をクリックするとプロバイダーが作成されます。

チャネルを作成する

プロバイダーを作成したら新規チャネル作成の画面が表示されます。

「LINEログイン」のチャネルを作成します。

アイコン、アプリ名、アプリの説明などを入力して「入力内容を確認する」をクリックします。

※ WEBで使うにチェックをいれます。

「LINE Developers Agreement の内容に同意します」にチェックを入れて「作成」をクリックします。

リダイレクト先を登録する

ユーザがLINEログインした後にリダイレクトするURLを指定します。アプリの設定タブをクリックし、Callback URLを設定します(httpsで指定します)

LINEログインの実装

コンソールの設定が完了したところで、実装を見ていきましょう。

まず初めにLINEのサーバに対して認可を要求します。

認可を要求

以下のURLにクエリパラメータを付加してリダイレクトします。

https://access.line.me/oauth2/v2.1/authorize

リクエストの例は以下のとおりです。

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1234123412&redirect_uri=https%3a%2f%2fline%2dlogin%2dsample%2ecom%2fauth&state=1234asdf&scope=openid&nonce=1234asd

クエリパラメータについて個別に説明します。

response_type 必ず code を指定する
client_id チャネル基本設定のChannel ID
redirect_uri アプリ設定でしていしたCallback URLと同じにする
state CSRF防止用の文字列。URLエンコードされた文字列は使用不可
scope profile、openid、emailを空白文字(%20)で区切った文字列
nonce リプレイアタック防止用の文字列

クエリパラメータの詳細はこちらをご覧ください。

ログイン後、ユーザから権限を許可されると指定した Callback URL に必要なクエリパラメータとともにリダイレクトされます。

レスポンスの例は以下のとおりです。

リクエストのクエリパラメータに付加した state の値とレスポンスのクエリパラメータに付加された state の値を比較し、一致すれば code の値を使ってアクセストークンを要求します。

アクセストークンを要求

アクセストークンは認可要求で取得した code の値をPOST APIで送って取得します。APIのエンドポイントは以下のとおりです。

https://api.line.me/oauth2/v2.1/token

このAPIのリクエストヘッダには Content-type: application/x-www-form-urlencode を含めます。

リクエストボディには以下の情報を含めます。

grant_type 必ず authorization_code を指定する
code 認可要求で取得した code
redirect_uri コールバックURL
client_id チャネル基本設定のChannel ID
client_secret チャネル基本設定のChannel Secret

LINEのサーバの検証が通ると以下のようにアクセストークン等のデータが返却されます。

レスポンスデータの内、id_token はユーザ情報を含むJWTトークンです。このトークンには認可要求の scope に応じてユーザID、ユーザ名、プロフィール画像、メールアドレスなどが含まれます。

レスポンスデータの詳細はこちらをご覧ください。

IDトークンを検証する

IDトークンはユーザ情報を含むJWTです。このトークンはヘッダー、ペイロード、署名がピリオドで区切られており、それぞれbase64urlエンコードされています。

これらの3つの内、ペイロードにはユーザ情報が含まれています。ペイロードの中身についてはこちらをご確認ください。

IDトークンの検証の流れは以下のとおりです。

  1. IDトークンをピリオドで分割する
  2. それぞれをbase64urlでデコードする
  3. base64urlでエンコードされたヘッダー、ピリオド、及びペイロードをつなげた文字列をチャネルシークレットを鍵としてハッシュ値を算出し、デコードした署名と一致することを検証する
  4. ペイロードに含まれる iss の値が https//access.line.me であることを検証する
  5. ペイロードに含まれる aud の値がチャネルIDと一致することを検証する
  6. ペイロードに含まれる exp の値が検証時点より後のタイムスタンプであることを検証する
  7. ペイロードに含まれる nonce の値が認可リクエストでクエリパラメータに指定した文字列と一致することを検証する

さいごに

WebアプリケーションにLINEログインを組み込む方法を紹介しました。今後、機会があれば Messaging API についても紹介できればと思います。

おすすめ書籍

世界一わかりやすい LINE公式アカウントマスター養成講座 ITの常識が変わる! 成長する企業はなぜSSO(シングルサインオン)を導入するのか

blog-page_footer_336




blog-page_footer_336




-BackEnd
-, , ,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Go言語

Golangのファイル操作基本

1 はじめに2 ファイル/ディレクトリの操作2.1 ファイル/ディレクトリの存在を確認2.2 ファイル/ディレクトリの名前変更2.3 ファイル/ディレクトリの削除2.4 ディレクトリ内のファイル確認2 ...

laravel logo

LaravelのFacade(ファサード)とは? 何気なく使用していた裏側の仕組みを解説!

1 はじめに1.1 Facadeを使用しているクラス2 Facadeの仕組み3 Facadeの作成3.1 サンプルコードに必要な実装3.2 Serviceの作成3.3 Facadeクラスの作成3.4 ...

Go言語

Golangのsyncパッケージによる同期・排他制御

1 はじめに2 sync.WaitGroup3 sync.Mutex4 sync.RWMutex5 sync.Map6 sync.Once7 sync.Pool8 さいごに9 おすすめ書籍 はじめに ...

icon

PHP、Ruby、Pythonのfor構文を比較してみた

1 はじめに1.1 環境2 ドキュメント2.1 PHP2.2 Ruby2.3 Python3 1から100まで出力してみる3.1 PHP3.2 Ruby3.3 Python4 リスト型(配列)の出力4 ...

Go言語

goroutineとchannelとContext

1 はじめに2 並行処理と並列処理3 goroutine4 channel4.1 channelからデータ受信4.2 for-range でのデータ受信4.3 複数のchannelを受信4.4 buf ...

フォロー

blog-page_side_responsive

2019年9月
1234567
891011121314
15161718192021
22232425262728
2930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。