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

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

注意

ここでは、OpenID Connect (opens new window)プロトコルをサポートし、ユーザー情報をIDトークンで取得できるLINEログインv2.1をウェブアプリに組み込む方法について説明します。ウェブアプリにLINEログインv2を組み込む場合は、「ウェブアプリにLINEログインを組み込む（LINEログインv2）」を参照してください。
LINE SDKが提供されている環境では、LINE SDKを使用してLINEログインを組み込んでください。ネイティブアプリにLINEログインを組み込むために、このページで説明している仕組みを利用しないでください。LINE SDKを組み込む方法については、「ネイティブアプリにLINEログインを組み込む」を参照してください。

# ログインのフロー

ウェブアプリ向けのLINEログインの処理（ウェブログイン）は、OAuth 2.0の認可コード付与のフロー (opens new window)とOpenID Connect (opens new window)プロトコルに基づいています。アプリでLINEログインを利用するには、アプリからサーバーへのリクエスト送信と、LINEプラットフォームからアプリへのデータ受信を実行できる必要があります。ウェブログインのフローの概要は以下のとおりです。

LINEログインの認可フロー

ウェブログインの処理に伴うステップは、以下のとおりです。

必要なクエリパラメータを使用して、アプリからLINEログインの認可URLにユーザーを誘導します。
LINEログイン画面がブラウザで開き、ユーザーはログインして認証を受けます。LINEプラットフォームでユーザーの認証情報が検証された後、ユーザーはアプリから要求される権限を付与することに同意する必要もあります。
LINEプラットフォームからアプリに、redirect_uriを介してユーザーをリダイレクトします。このとき、認可コードとstateを含むクエリ文字列もアプリに送信されます。
アプリは、認可コードを使ってエンドポイントURL https://api.line.me/oauth2/v2.1/tokenにアクセストークンを要求します。
LINEプラットフォームがアプリからのリクエストを検証し、アクセストークンをアプリに返します。

取得したアクセストークンを使って、Social APIを呼び出すことができます。

# 始める前に

LINEログインをアプリに組み込む作業を始める前に、以下の作業が完了していることを確認します。

アプリで使用するチャネルを作成する。

# チャネルを設定する

# リダイレクト先を設定する

ユーザーがログインした後のリダイレクト先を指定するには、LINE Developersコンソールのチャネル設定の［LINEログイン設定］タブでコールバックURLを設定します。

複数のコールバックURLを指定できます。

リダイレクト設定

# メールアドレス取得権限を申請する

LINEログインを使ってログインしたユーザーのメールアドレスを取得するには、まずLINE Developersコンソールからメールアドレス取得権限を申請する必要があります。

［チャネル基本設定］タブの［OpenID Connect］で、［申請］をクリックします。
申請条件に同意して、メールアドレスの取得と利用についてユーザーに提示する文面のスクリーンショットをアップロードします。

申請が受理されると［メールアドレス取得権限］に「申請済み」と表示されます。

# 認可を要求する

ユーザーを認証してアプリに権限を付与するよう要求するには、以下の例のように認可URLに必須のクエリパラメータを付けてユーザーをリダイレクトします。

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=1234567890&redirect_uri=https%3A%2F%2Fexample.com%2Fauth&state=12345abcde&scope=profile%20openid&nonce=09876xyz

ユーザーをリダイレクトするには、LINEログインボタンか直接リンクを使います。

必須のクエリパラメータをURLに含める必要があります。

パラメータ	タイプ	必須	説明
`response_type`	String	必須	`code`。この値を指定することにより、LINEプラットフォームから認可コードが返されます。
`client_id`	String	必須	チャネルID。LINEが発行した、チャネル固有の識別子。
`redirect_uri`	String	必須	コールバックURL。認証と認可の後にユーザーがリダイレクトされるURLです。LINE Developersコンソールでチャネル向けに登録したコールバックURLと一致する必要があります。
`state`	String	必須	クロスサイトリクエストフォージェリ (opens new window)防止用の固有な英数字の文字列。アプリ側でランダムに生成する必要があります。URLエンコードされた文字列は使用できません。
`scope`	String	必須	ユーザーに付与を依頼する権限。詳しくは、「スコープ」を参照してください。
`nonce`	String	任意	リプレイアタック (opens new window)を防止するための文字列。この値はレスポンスで返されるIDトークンに含まれます。
`prompt`	String	任意	`consent`。ユーザーが要求された権限をすべて付与済みであっても、強制的に同意画面を表示します。
`max_age`	Number	任意	ユーザー認証後に許容される最大経過時間（秒）。OpenID Connect Core 1.0 (opens new window)の「Authentication Request」のセクションで定義されている`max_age`パラメータに相当します。
`ui_locales`	String	任意	LINEログインで表示される画面の表示言語および文字種。RFC 5646（BCP 47） (opens new window)で定義されている言語タグを、優先順位が高い順に、スペース区切りのリストで設定します。OpenID Connect Core 1.0 (opens new window)の「Authentication Request」のセクションで定義されている`ui_locales`パラメータに相当します。
`bot_prompt`	String	任意	LINE公式アカウントを友だち追加するオプションをユーザーのログイン時に表示します。`normal`または`aggressive`を指定します。詳しくは、「LINEログインしたときにLINE公式アカウントを友だち追加する（ボットリンク）」を参照してください。

# スコープ

scopeパラメータに少なくとも1つのスコープを指定します。指定できるスコープは以下のとおりです。複数のスコープを指定するには、URLエンコードされた空白文字（%20）で区切って指定します。

スコープ	プロフィール情報	IDトークン内の表示名	IDトークン内のプロフィール画像のURL	IDトークン内のメールアドレス
`profile`	✓	-	-	-
`profile%20openid`	✓	✓	✓	-
`profile%20openid%20email`	✓	✓	✓	✓
`openid`	-	✓	✓	-
`openid%20email`	-	✓	✓	✓

メールアドレスを取得するには、あらかじめメールアドレス取得権限を申請する必要があります。

LINE公式アカウントとユーザーの友だち関係を取得するには、profileのスコープを持つアクセストークンが必要です。

その他の権限を利用したい

プロフィールやメールアドレスの取得権限のほかに、さらに追加で権限を利用したい場合は、担当営業までご連絡いただくか、弊社パートナー (opens new window)にお問い合わせください。

# 認証のプロセス

認可URLにリダイレクトされると、ユーザーは以下のいずれかの認証方法でログインできます。ユーザーが選択した認証方法は、IDトークンで確認できます。IDトークンについては、アクセストークンを取得するのレスポンスを参照してください。

認証方法	説明
自動ログイン	ユーザーの操作なしでログイン。LINEログイン画面や確認画面は表示されません
メールアドレスログイン	LINEログイン画面にメールアドレスとパスワードを入力してログイン
QRコードログイン	LINEログイン画面に表示されたQRコードを、スマートフォン版LINEのQRコードリーダーでスキャンしてログイン
シングルサインオン（SSO）によるログイン	「次のアカウントでログイン」と表示された確認画面でログインボタンをクリックしてログイン

自動ログインとSSOではSSOの方が優先して動作します

自動ログインとSSOが両方利用できる環境ではSSOの方が優先して動作します。詳しくは、FAQの「LINEログインで「次のアカウントでログイン」という画面が表示されました。これは自動ログインに失敗していますか。」を参照してください。

ログイン通知について

ログインするとLINE公式アカウントからログイン通知が送信されます。ログイン通知についてはヘルプの「LINE公式アカウントからログイン通知が届いた (opens new window)」や「[◯◯で◯◯にログインしました]というトークが届いた (opens new window)」を参照してください。

ユーザーの操作なしでログインできます。LINEログイン画面や確認画面は表示されません。

自動ログインは、スマートフォン版LINEにログインしている状態で、以下のブラウザで認可URLを開いた場合に、自動的に行われます。

LINE内ブラウザ
初めてLINEログインをする外部ブラウザ

自動ログインはPC版LINEでは動作しません

自動ログインが利用可能な環境について詳しくは、FAQの「自動ログインについて教えてください。」を参照してください。

ユーザーは以下のいずれかの認証方法でログインできます。

メールアドレスログイン
QRコードログイン（PC版LINEでのみ表示されます）

LINEログイン画面

これらのログイン方法は、スマートフォン版LINEにログインしていない状態で、外部ブラウザで認可URLを初めて開いた場合に使用できます。

ユーザーはログインボタンをクリックするだけでログインできます。

確認画面

SSOは、過去にLINEログインをしたことがある外部ブラウザで認可URLを開いた場合に使用できます。

SSOはCookieを利用している機能です

一度ウェブアプリからLINEログインをすると access.line.me というドメイン名でCookieが保存されます。以降もそのCookieが有効な限り、同じブラウザでログインする際にSSOの画面が表示されます。

# 認可のプロセス

ユーザーがログインすると、同意画面が表示され、scopeパラメータで指定した権限の付与を求められます。

ユーザーは、権限の付与に同意する項目（スコープ）を選択して、ウェブアプリにアクセスします。開発者は、認可URLで指定した権限の付与を、ユーザーに拒否される可能性も考慮して、ウェブアプリを開発してください。

同意画面

同意画面が表示されない場合があります

scopeパラメータで指定した権限がprofileまたはopenidの場合は、ユーザーが既に権限を付与していると同意画面は表示されません。
権限にemailが含まれる場合は、メールアドレスが変わらない限り、ユーザーが同意してから一定の期間は同意画面が表示されません。

# 認可コードを受け取る

ユーザーの認証と認可が完了すると、HTTPステータスコード302と以下のクエリパラメータを含むコールバックURLが返されます。

パラメータ	タイプ	説明
`code`	String	アクセストークンの取得に使用される認可コード。有効期間は10分です。また、認可コードは1回のみ利用可能です。
`state`	String	元のリクエストの認可URLに含まれる`state`パラメータ。この値が元のリクエストに含まれる値と一致することを、アプリが検証する必要があります。
`friendship_status_changed`	Boolean	チャネルにリンクされているLINE公式アカウントとユーザーの関係が、ログイン時に変わった場合は`true`です。それ以外は`false`です。このパラメータは、認可を要求するときに`bot_prompt`クエリパラメータを指定し、かつ、ユーザーがログインしたときにLINE公式アカウントを友だち追加するオプションが表示された場合にのみ返されます。詳しくは、「LINEログインしたときにLINE公式アカウントを友だち追加する（ボットリンク）」を参照してください。

以下は、レスポンスの例です。

HTTP/1.1 302 Found
Location : https://client.example.org/cb?code=abcd1234&state=0987poi&friendship_status_changed=true

# エラーレスポンス

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

パラメータ	タイプ	必須	説明
`error`	String	必須	エラーコード
`error_description`	String	任意	エラーの内容
`state`	String	任意	OAuth 2.0のステート値。認可リクエストに`state`パラメータが含まれていた場合は必ず返されます。

以下は、エラーレスポンスの例です。

https://example.com/callback?error=access_denied&error_description=The+resource+owner+denied+the+request.&state=0987poi

アプリの要求する権限の付与をユーザーが拒否した場合、アプリ側でエラーを適切に処理する必要があります。

# アクセストークンを取得する

アクセストークンを取得するには、認可コードを指定してHTTP POSTリクエストを実行します。取得したアクセストークンで、APIを呼び出すことができます。アクセストークンは、以下のエンドポイントで発行されます。

# リクエスト

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

リクエストヘッダー	説明
Content-Type	application/x-www-form-urlencoded

# リクエストボディ

リクエストボディの情報はform-urlencodedフォーマットで記述します。

パラメータ	タイプ	必須	説明
`grant_type`	String	必須	`authorization_code`。付与タイプを指定します。
`code`	String	必須	認可コード
`redirect_uri`	String	必須	コールバックURL
`client_id`	String	必須	チャネルID。LINE Developersコンソールで確認できます。
`client_secret`	String	必須	チャネルシークレット。LINE Developersコンソールで確認できます。

# リクエストの例

以下はアクセストークンを取得するためのHTTP POSTリクエストの例です。

curl -X POST https://api.line.me/oauth2/v2.1/token \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'grant_type=authorization_code' \
-d 'code=xxx' \
-d 'redirect_uri=xxx' \
-d 'client_id=xxx' \
-d 'client_secret=xxx'

# レスポンス

LINEプラットフォームがアプリからのリクエストを検証し、以下の表に示すアクセストークンなどのデータをアプリに返します。

注意

LINEログイン機能に追加または変更があったときに、レスポンスやIDトークンのJSONオブジェクトの構造が変更される場合があります。この変更には、プロパティの追加、順序の変更、データの要素間の空白や改行の有無、データ長の変化が含まれます。将来、従来と異なる構造のペイロードを受信しても不具合が発生しないように、サーバーを実装してください。

プロパティ	タイプ	説明
`access_token`	String	アクセストークン。有効期間は30日です。
`expires_in`	Number	アクセストークンの有効期限が切れるまでの秒数。
`id_token`	String	ユーザー情報を含むJSONウェブトークン（JWT） (opens new window)。このプロパティは、スコープに`openid`を指定した場合にのみ返されます。詳しくは、「IDトークンからプロフィール情報とメールアドレスを取得する」を参照してください。
`refresh_token`	String	新しいアクセストークンを取得するためのトークン。アクセストークンが発行されてから最長90日間有効です。
`scope`	String	ユーザーが付与する権限。ただし、`email`スコープは権限が付与されていても`scope`プロパティの値としては返されません。
`token_type`	String	`Bearer`

以下は、JSONレスポンスの例です。

{
    "access_token": "bNl4YEFPI/hjFWhTqexp4MuEw5YPs...",
    "expires_in": 2592000,
    "id_token": "eyJhbGciOiJIUzI1NiJ9...",
    "refresh_token": "Aa1FdeggRhTnPNNpxr8p",
    "scope": "profile",
    "token_type": "Bearer"
}

# IDトークンからプロフィール情報とメールアドレスを取得する

LINEプラットフォームは、OpenID Connect (opens new window)仕様に準拠するIDトークンを発行しているため、LINEプラットフォームからユーザーのプロフィール情報とメールアドレスを安全に取得できます。IDトークンに含まれる情報を使用する前に、以下のいずれかの方法でIDトークンを検証してください。

Social APIのエンドポイントを利用する
IDトークンを検証するコードを書く

# Social APIのエンドポイントを利用する

アクセストークンと一緒に取得したIDトークンをエンドポイントに送信するだけで、IDトークンを検証し、ユーザーのプロフィール情報とメールアドレスを取得できます。

詳しくは、『Social APIリファレンス』の「IDトークンを検証する」を参照してください。

# IDトークンを検証するコードを書く

任意のJWTライブラリ (opens new window)を使ったり、独自のコードを書いたりして、IDトークンを検証し、ユーザーのプロフィール情報とメールアドレスを取得できます。

# IDトークン

IDトークンは、ユーザー情報を含むJSONウェブトークン（JWT）です。IDトークンは、ピリオド（.）で区切られたヘッダー、ペイロード、および署名から構成されます。各部分はbase64urlでエンコードされています。詳しくは、JWTの仕様 (opens new window)を参照してください。

# ヘッダー

以下はデコードしたヘッダー値の例です。この例では、エンコードされたオブジェクトでHMAC SHA-256アルゴリズムが使用されていることを、ヘッダー部分で宣言しています。LINEログインではHMAC SHA-256のみを使用します。

{
  "typ": "JWT",
  "alg": "HS256"
}

# ペイロード

ユーザー情報はペイロード部分に含まれます。

プロパティ	タイプ	説明
`iss`	String	`https://access.line.me`。IDトークンの生成URLです。
`sub`	String	IDトークンの対象ユーザーID
`aud`	String	チャネルID
`exp`	Number	トークンの有効期限（UNIXタイム）
`iat`	Number	IDトークンの生成時間（UNIXタイム）
`auth_time`	Number	ユーザー認証時間（UNIXタイム）。認可リクエストに`max_age`の値を指定しなかった場合は含まれません。
`nonce`	String	認可URLに指定した`nonce`の値。認可リクエストに`nonce`の値を指定しなかった場合は含まれません。
`amr`	Stringの配列	ユーザーが使用した認証方法のリスト。以下のいずれかの値が含まれます。それぞれの認証方法については「認証のプロセス」を参照してください。 `pwd`：メールアドレスとパスワードによるログイン `lineautologin`：LINEによる自動ログイン（LINE SDKを使用した場合も含む） `lineqr`：QRコードによるログイン `linesso`：シングルサインオンによるログイン
`name`	String	ユーザーの表示名。認可リクエストに`profile`スコープを指定しなかった場合は含まれません。
`picture`	String	ユーザープロフィールの画像URL。認可リクエストに`profile`スコープを指定しなかった場合は含まれません。
`email`	String	ユーザーのメールアドレス。認可リクエストに`email`スコープを指定しなかった場合は含まれません。

以下はデコードしたペイロード部分の例です。

{
    "iss": "https://access.line.me",
    "sub": "U1234567890abcdef1234567890abcdef ",
    "aud": "1234567890",
    "exp": 1504169092,
    "iat": 1504263657,
    "nonce": "0987654asdf",
    "amr": ["pwd"],
    "name": "Taro Line",
    "picture": "https://sample_line.me/aBcdefg123456"
}

# 署名

署名を使ってレスポンスの有効性を検証します。Base64urlでエンコードされているヘッダー、ピリオド、およびペイロードを繋げた文字列を値とし、チャネルシークレットを鍵として、HMAC SHA-256アルゴリズムでハッシュ化した値をbase64urlでエンコードしたのが署名です。アプリのセキュリティを保つため、トークンの署名は必ず検証する必要があります。

# IDトークンをデコードして検証する

IDトークンをデコードして検証するには、任意のJWTライブラリを使うか、以下の手順に従います。

# JWTライブラリを使う

一般利用が可能なJWTライブラリ (opens new window)を使って、IDトークンをデコードして検証できます。以下はPython®向けライブラリを使ってIDトークンをデコードする例です。

import jwt

decoded_id_token = jwt.decode(id_token,
                              channel_secret,
                              audience=channel_id,
                              issuer='https://access.line.me',
                              algorithms=['HS256'])

# check nonce (Optional. But strongly recommended)
nonce = '_stored_in_session_'
expected_nonce = decoded_id_token.get('nonce')
if nonce != decoded_id_token.get('nonce'):
    raise RuntimeError('invalid nonce')

# IDトークンをデコードして検証する

ピリオド（.）を区切り文字として、ヘッダー、ペイロード、および署名を分割します。
各部分をbase64urlでデコードします。
Base64urlでエンコードされたヘッダー、ピリオド、およびペイロードを繋げた文字列を値とし、チャネルシークレットを鍵として、ハッシュ値を算出します。この値がデコードした署名と同じであるかどうかを検証します。
issの値がhttps://access.line.meであり、IDトークンがLINEから送信されたものであることを確認します。
audの値がお使いのチャネルIDと一致しており、IDトークンがお使いのチャネルを対象としていることを確認します。
IDトークンの有効性を確認するには、expの値が検証時より後のUNIXタイムスタンプであることを確認します。
リプレイアタックを防止するため、nonceの値が認可リクエストに指定したnonceの値と等しいことを確認します。nonceの値をユーザーセッションと共に保存します。このステップは省略できますが、nonceの値を含めることを強くお勧めします。

以下はPython 3を使った例です。

import base64
import hashlib
import hmac
import json
import time


def base64url_decode(target):
    rem = len(target) % 4
    if rem > 0:
        target += '=' * (4 - rem)

    return base64.urlsafe_b64decode(target)


def check_signature(key, target, signature):
    calc_signature = hmac.new(
        key.encode('utf-8'),
        target.encode('utf-8'),
        hashlib.sha256
    ).digest()

    return hmac.compare_digest(signature, calc_signature)


def decode_id_token(id_token, channel_id, channel_secret, nonce=None):
    # step 1
    header, payload, signature = id_token.split('.')

    # step 2
    header_decoded = base64url_decode(header)
    payload_decoded = base64url_decode(payload)
    signature_decoded = base64url_decode(signature)

    # step 3
    valid_signature = check_signature(channel_secret,
                                      header + '.' + payload,
                                      signature_decoded)
    if not valid_signature:
        raise RuntimeError('invalid signature')

    payload_json = json.loads(payload_decoded.decode('utf-8'))

    # step 4
    if payload_json.get('iss') != 'https://access.line.me':
        raise RuntimeError('invalid iss')

    # step 5
    if payload_json.get('aud') != channel_id:
        raise RuntimeError('invalid aud')

    # step 6
    if int(time.time()) > payload_json.get('exp'):
        raise RuntimeError('invalid exp')

    # step 7 (Optional. But strongly recommended)
    if nonce is not None:
        if payload_json.get('nonce') != nonce:
            raise RuntimeError('invalid nonce')

    return payload_json

# 次のステップ

取得したアクセストークンを使ってSocial APIを呼び出し、ユーザーのログアウト、アクセストークンの管理、およびユーザープロフィール情報の取得を実行できます。詳しくは、以下のページを参照してください。

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

# ログインのフロー

# 始める前に

# チャネルを設定する

# リダイレクト先を設定する

# メールアドレス取得権限を申請する

# 認可を要求する

# スコープ

# 認証のプロセス

# 自動ログイン

# メールアドレスログイン、QRコードログイン

# シングルサインオン（SSO）によるログイン

# 認可のプロセス

# 認可コードを受け取る

# エラーレスポンス

# アクセストークンを取得する

# リクエスト

# リクエストボディ

# リクエストの例

# レスポンス

# IDトークンからプロフィール情報とメールアドレスを取得する

# Social APIのエンドポイントを利用する

# IDトークンを検証するコードを書く

# IDトークン

# ヘッダー

# ペイロード

# 署名

# IDトークンをデコードして検証する

# JWTライブラリを使う

# IDトークンをデコードして検証する

# 次のステップ