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

注:ここでは、ウェブアプリにLINEログインv2を組み込む方法について説明します。OpenID ConnectプロトコルをサポートするLINEログインv2.1を組み込む場合は、「ウェブアプリにLINEログインを組み込む」を参照してください。

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

ログインのフロー

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

LINEログインの認可フロー

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

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

取得したアクセストークンを使って、APIを呼出してユーザーのプロフィール情報を取得できます。

始める前に

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

チャネルを設定する

ユーザーがログインした後のリダイレクト先を指定するには、コンソールの[アプリ設定]ページでコールバックURLを設定します。

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

リダイレクト設定

認可コードを取得する

必須のクエリパラメータを使って、ユーザーをアプリからLINEログインダイアログのURLにリダイレクトすることで、認可コードを取得できます。ユーザーをリダイレクトするには、LINEログインボタンか直接リンクを使います。

https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id={Channel ID}&redirect_uri={Callback URL}&state={State}

以下の必須クエリパラメータをURLに含めます。

パラメータ タイプ 説明
response_type code String code。この値を指定することにより、LINEプラットフォームから認可コードが返されます。
client_id チャネルID String LINEが発行した、チャネル固有の識別子。
redirect_uri コールバックURL String 認証と認可の後にユーザーがリダイレクトされるURL。コンソールでチャネル向けに登録したコールバックURLと一致する必要があります。
state 任意の英数文字列 String クロスサイトリクエストフォージェリ防止用の固有な値。アプリ側でランダムに生成する必要があります。URLエンコードされた文字列は使用できません。

以下は、必須パラメータを含むURLの例です。

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

ユーザー認証

LINEログインダイアログへリダイレクトされたユーザーは、まず自分のLINE認証情報を使ってログインする必要があります。LINEにログイン済みである場合は、自動的にログインします。続いて、同意画面が開きます。ユーザーはアプリが要求するアクセス権を与えるか否かを選択します。デフォルトでは、アプリはユーザーのプロフィール情報に対するアクセス権を要求します。

以下は、アプリが要求する権限を示す同意画面です。

同意画面

認可コードを受け取る

ユーザーは、ログインしてアプリにアクセス権を付与すると、以下のクエリパラメータでコールバックURLに誘導されます。

パラメータ タイプ 説明
code String アクセストークンの取得に使用される認可コード。有効期間は10分です。また、認可コードは1回のみ利用可能です。
state String 元のリクエストの認可URLに含まれるstateパラメータ。この値が元のリクエストに含まれる値と一致することを、アプリが検証する必要があります。

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

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

エラーレスポンス

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

パラメータ タイプ 説明
error_description String The+user+has+denied+the+approval。注:このパラメータは、iOSアプリとAndroidアプリのアプリ内ブラウザでは表示されません。この問題については、現在対応中です。
errorMessage String DISALLOWED
errorCode Integer 417
state String 元のリクエストの認可URLに含まれるstateパラメータ。
error String access_denied

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

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

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

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

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

リクエスト

POST https://api.line.me/v2/oauth/accessToken

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

リクエストボディ

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

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

リクエストの例

以下は、リクエストボディに含まれる情報の例です。

grant_type=authorization_code&code=b5fd32eacc791df&client_id=12345&client_secret=d6524edacc8742aeedf98f
&redirect_uri=https%3A%2F%2Fsample.com%2Fauth

アクセストークンを受理する

LINEプラットフォームがアプリからのリクエストを検証し、アクセストークンとリフレッシュトークンをアプリに返します。リフレッシュトークンは、新しいアクセストークンの取得に使います。

プロパティ タイプ 説明
scope String P。ユーザーのLINEプロフィール情報にアクセスできるデフォルトの権限です。
access_token String アクセストークン。有効期間は30日です。
token_type String Bearer
expires_in Integer アクセストークンの有効期限が切れるまでの秒数
refresh_token String 新しいアクセストークンを取得するためのトークン。アクセストークンの有効期限が切れてから最長10日間有効です。

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

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

情報をサーバーに保管して、アクセストークンを使ってAPIを呼び出すことができます。

次のステップ

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