# ウェブアプリにLINEログインを組み込む(LINEログイン v2.0)

このページでは、ウェブアプリにLINEログインを組み込む方法について説明します。LINEログインを組み込めるアプリがない場合は、サンプルアプリを利用できます。「LINEログインを利用するには」を参照してください。

注意

このページはLINEログインの旧バージョンである LINEログイン v2.0のドキュメントです。

OpenID Connect (opens new window)プロトコルをサポートし、ユーザー情報をIDトークンで取得できるLINEログイン v2.1を組み込む場合は、「ウェブアプリにLINEログインを組み込む」を参照してください。

# ログインのフロー

ウェブアプリ向けのLINEログインの処理(ウェブログイン)は、OAuth 2.0の認可コード付与のフロー (opens new window)に基づいています。

ウェブログインのフローの概要は以下のとおりです。 フロー図で「Web app」が関係しているフローは、ウェブアプリで実装が必要です。

Web login flow

# チャネルを作成する

「LINEログインチャネル」を作成し、ウェブアプリ用に設定します。

# コールバックURLを設定する

コールバックURLは、ユーザーが認証と認可の操作を行ったあとで、ウェブアプリが認可コードとstateを受け取るために使用されます。

LINE Developersコンソールのチャネル設定の[LINEログイン設定]タブで、コールバックURLを設定してください。 1つのチャネルに、複数のコールバックURLを指定できます。

リダイレクト設定

メールアドレスの取得権限について

LINEログイン v2.0を使用する場合は、LINEログインを使ってログインしたユーザーのメールアドレスを取得できません。

# ユーザーに認証と認可を要求する

LINEプラットフォームとユーザーの間で、認証と認可のプロセスを開始させます。 ユーザーがLINEログインボタンをクリックしたときに、認可URLにユーザーをリダイレクトしてください。

ヒント
  • ウェブアプリにLINEログインボタンを追加する際は、「LINEログインボタン デザインガイドライン」に従ってください。
  • LINEログインボタンを表示せず、認可URLに直接リンクすることもできます。
  • ユーザーの認証情報は、ウェブアプリには通知されません。

認可URLの例:

https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id=1234567890&redirect_uri=https%3A%2F%2Fexample.com%2Fauth&state=123abc

認可URLに付与できるクエリパラメータは、以下のとおりです。

パラメータ タイプ 必須 説明
response_type String 必須 code
client_id String 必須 LINEログインチャネルのチャネルID。LINE Developersコンソールで確認できます。
redirect_uri String 必須 LINE Developersコンソールに登録したコールバックURL
state String 必須 クロスサイトリクエストフォージェリ (opens new window)防止用の固有な英数字の文字列。 ログインセッションごとにウェブアプリでランダムに生成してください。 なお、URLエンコードされた文字列は使用できません。

# ユーザーがユーザー認証と認可を行う

ユーザー認証と認可はユーザーとLINEプラットフォームの間で直接行われます

LINEログインを組み込むウェブアプリ側で、認可の機能を実装する必要はありません。

認可URLにリダイレクトされたユーザーは、自分のLINE認証情報を使ってログインし、ウェブアプリが要求するアクセス権を認可します。

同意画面の例:

同意画面

# ウェブアプリで認可コードまたはエラーレスポンスを受け取る

ユーザーによる認証と認可のプロセスが終了すると、ユーザーはコールバックURLにリダイレクトされます。

ユーザーがアプリにアクセス権を付与したときは、認可コードが渡されます。 また、アクセス権の付与を拒否したときは、エラーレスポンスが渡されます。

# 認可コードを受け取る

ユーザーの認証と認可が完了すると、以下のクエリパラメータを含むコールバックURLにリダイレクトされます。

パラメータ タイプ 説明
code String アクセストークンの取得に使用される認可コード。有効期間は10分です。また、認可コードは1回のみ利用可能です。
state String クロスサイトリクエストフォージェリ (opens new window)防止用の固有な英数字の文字列。この値が認可URLに付与したstateパラメータの値と一致することを検証してください。

リダイレクト先URLの例:

https://example.com/callback?code=b5fd32eacc791df&state=123abc

# エラーレスポンスを受け取る

アプリの要求する権限の付与をユーザーが拒否した場合、以下のクエリパラメータを含むコールバックURLにリダイレクトされます。

パラメータ タイプ 説明
error_description String The+user+has+denied+the+approval
注意:このパラメータは、iOSアプリとAndroidアプリのアプリ内ブラウザでは表示されません。この問題については、現在対応中です。
errorMessage String DISALLOWED
errorCode Number 417
state String 認可URLに含めたstateパラメータ。この値で、どのプロセスが拒否されたか特定できます。
error String access_denied

リダイレクト先URLの例:

https://example.com/callback?error_description=The+user+has+denied+the+approval&errorMessage=DISALLOWED&errorCode=417&state=123abc&error=access_denied

# ウェブアプリでアクセストークンを取得する

LINEプラットフォームから認可コードを受け取った際、同時に受け取ったstateパラメータと、認証と認可を要求したときに指定したstateパラメータが一致すれば、アクセストークンを取得できます。

リクエストの例:

curl -v -X POST https://api.line.me/v2/oauth/accessToken \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=authorization_code' \
-d 'code=b5fd32eacc791df' \
-d 'redirect_uri=https%3A%2F%2Fexample.com%2Fauth' \
-d 'client_id=12345' \
-d 'client_secret=d6524edacc8742aeedf98f'

レスポンスの例:

{
    "access_token": "bNl4YEFPI/hjFWhTqexp4MuEw5YPs7qhr6dJDXKwNPuLka...",
    "expires_in": 2591977,
    "refresh_token": "8iFFRdyxNVNLWYeteMMJ",
    "scope": "P",
    "token_type": "Bearer"
}

詳しくは、『LINEログイン v2.0 APIリファレンス』の「アクセストークンを発行する」を参照してください。

# 次のステップ

取得したアクセストークンを使って、以下の操作を行えます。