日本語

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

このページでは、OpenID Connect (opens new window)プロトコルをサポートし、ユーザー情報をIDトークンで取得できるLINEログインをウェブアプリに組み込む方法を説明します。 LINEログインを組み込めるアプリがない場合は、サンプルアプリを利用できます。「LINEログインを始めよう」を参照してください。

注意

# ログインのフロー

ウェブアプリ向けのLINEログインの処理（ウェブログイン）は、OAuth 2.0の認可コード付与のフロー (opens new window)とOpenID Connect (opens new window)プロトコルに基づいています。 ウェブログインのフローの概要は以下のとおりです。 フロー図で「Web app」が関係しているフローは、ウェブアプリで実装が必要です。

Web login flow

# チャネルを作成する

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

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

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

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

リダイレクト設定

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

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

ウェブアプリでユーザーのメールアドレスを取得する場合は、あらかじめ、LINE Developersコンソールからメールアドレス取得権限を申請してください。

  1. ［チャネル基本設定］タブの［OpenID Connect］で、 ［申請］をクリックします。

    メールアドレス取得権限の申請

  2. 申請条件に同意して、メールアドレスの取得と利用についてユーザーに提示する文面のスクリーンショットをアップロードします。

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

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

LINEプラットフォームとユーザーの間で、認証と認可のプロセスを開始させます。 ユーザーがLINEログインボタンをクリックしたときに、以下の例のように認可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

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

パラメータ タイプ 必須 説明
response_type String 必須 code
client_id String 必須 LINEログインチャネルのチャネルID。LINE Developersコンソールで確認できます。
redirect_uri String 必須 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公式アカウントを友だち追加する（ボットリンク）」を参照してください。
initial_amr_display String 任意 lineqrを指定すると、メールアドレスログインの代わりに、QRコードログインをデフォルト表示します。
switch_amr Boolean 任意 falseを指定すると、ログインの方法を変更するための「メールアドレスでログイン」や「QRコードログイン」のボタンを非表示にします。デフォルト値はtrueです。
disable_ios_auto_login Boolean 任意 trueを指定すると、iOSにおいて自動ログインを無効にします。デフォルト値はfalseです。今後、Androidにおいても同様のクエリパラメータの提供を予定しています。提供時期については、決まり次第、改めてお知らせいたします。
code_challenge String 任意 LINEログインをPKCE対応するために必要なパラメータ。一意のcode_verifierをSHA256で暗号化したうえで、Base64URL形式にエンコードした値です。デフォルト値はnullです（値を指定しない場合、リクエストはPKCE対応されません）。
PKCEの実装方法について詳しくは、「LINEログインにPKCEを実装する」を参照してください。
code_challenge_method String 任意 S256（ハッシュ関数SHA256を表します。）
code_verifierからcode_challengeを算出する際の暗号化方式を指定します。LINEログインでは、セキュリティ上の観点からS256のみをサポートしています。
PKCEの実装方法について詳しくは、「LINEログインにPKCEを実装する」を参照してください。
ヒント
  • ウェブアプリにLINEログインボタンを追加する際は、「LINEログインボタン デザインガイドライン」に従ってください。
  • LINEログインボタンを表示せず、認可URLに直接リンクすることもできます。
  • ユーザーの認証情報は、ウェブアプリには通知されません。
LIFFブラウザ内での認可リクエストについて

LIFFブラウザ内でLINEログインによる認可リクエストを行う際の動作は保証されません。また、LIFFアプリを外部ブラウザで開く場合には、LINEログインによる認可リクエストではなく、liff.login()を利用してください。

# スコープ

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

スコープ プロフィール情報 IDトークン
（ユーザーIDを含む）		 IDトークン内の
表示名		 IDトークン内の
プロフィール画像のURL		 IDトークン内の
メールアドレス
profile ✓ - - - -
profile%20openid ✓ ✓ ✓ ✓ -
profile%20openid%20email ✓ ✓ ✓ ✓ ✓（※）
openid - ✓ - - -
openid%20email - ✓ - - ✓（※）

※emailを指定してユーザーにメールアドレスの取得権限を要求するには、あらかじめメールアドレス取得権限を申請してください。

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

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

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

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

認可URLにリダイレクトされたユーザーは、以下のいずれかの認証方法でログインできます。

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

自動ログインとSSOによるログインが両方利用できる環境では、自動ログインの方が優先して動作します。詳しくは、2021年7月12日のニュース、「LINEログインにおいてSSOによるログインより自動ログインが優先されるようになります」を参照してください。

ログイン通知について

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

ユーザーが選択した認証方法

ユーザーが選択した認証方法は、IDトークンで確認できます。IDトークンについては、「アクセストークンを取得する」の「レスポンス」を参照してください。

# 自動ログイン

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

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

  • LINE内ブラウザ
  • 初めてLINEログインをする外部ブラウザ
自動ログインはPC版LINEでは動作しません

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

Yahoo! JAPANアプリからの自動ログインについて

Yahoo! JAPANアプリからPKCEを実装したLINEログインを組み込んだウェブアプリにアクセスした際に、自動ログインが有効になります。LINEログインのPKCE対応について詳しくは、「LINEログインをPKCE対応する」を参照してください。

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

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

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

LINEログイン画面

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

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

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

確認画面

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

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

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

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

自動ログインとSSOによるログインが両方利用できる環境では、自動ログインの方が優先して動作します。詳しくは、2021年7月12日のニュース、「LINEログインにおいてSSOによるログインより自動ログインが優先されるようになります」を参照してください。

自動ログインではなく、SSOによるログインを動作させたい場合は、iOSであればユーザーに認証と認可を要求する際、認可URLに特定のクエリパラメータ（disable_ios_auto_login）を付与することで自動ログインを無効にできます。今後、Androidにおいても同様のクエリパラメータの提供を予定しています。提供時期については、決まり次第、改めてお知らせいたします。

# ユーザーが認可を行う

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

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

開発者がscopeパラメータで指定した情報へのアクセス権を、ユーザーが認可します。

なお、ユーザーは権限の付与に同意せずにウェブアプリにアクセスする場合があります。認可URLで指定した権限の付与を、ユーザーに拒否される可能性も考慮してウェブアプリを開発してください。

同意画面の例：

同意画面

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

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

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

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

# 認可コードを受け取る

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

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

リダイレクト先URLの例：

https://example.com/callback?code=abcd1234&state=0987poi&friendship_status_changed=true

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

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

パラメータ タイプ 必須 説明
error String 必須 エラーコード
error_description String 任意 エラーの内容
state String 任意 認可URLに含めたstateパラメータ。この値で、どのプロセスが拒否されたか特定できます。

リダイレクト先URLの例：

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

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

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

リクエストの例：

curl -v -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"
}

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

# IDトークンからプロフィール情報を取得する

LINEプラットフォームは、OpenID Connect (opens new window)仕様に準拠するIDトークンを発行しているため、LINEプラットフォームからユーザーのプロフィール情報（ユーザーID・表示名・プロフィール画像・メールアドレス）を安全に取得できます。 詳しくは、「IDトークンからプロフィール情報を取得する」を参照してください。

# 次のステップ

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