LINEログインを始めよう

ここでは、簡単なウェブアプリ用のスターターアプリをデプロイして、LINEログインを利用する方法を説明します。スターターアプリにアクセスすると、ユーザーのLINEアカウントでログインできます。また、ログイン時に発行されるアクセストークンを利用して、ユーザープロフィールを取得することもできます。

このページの操作をすべて行うと、LINEログインの仕組みや、LINEログインをウェブアプリに組み込む方法について、よく理解できます。

始める前に

LINEログインのスターターアプリを利用するには、以下の要件を満たす必要があります。

Step 1: LINEログインのチャネルを作成する

まずは、LINEログインのチャネルを作成します。

チャネルは、アプリとLINEプラットフォームを接続するための通信路です。ウェブアプリごとに、LINE DevelopersコンソールでLINEログインのチャネルを作成します。

1. LINE Developersコンソールにアクセスします。
2. プロバイダーを選択し、［チャネル設定］タブから［LINEログイン］を選択します。
3. チャネルに必要な情報を入力します。以下の項目に情報を入力してLINEログインのチャネルを作成します。

チャネルとプロバイダーの連携に関する注意点

一度作成したチャネルを、後から他のプロバイダーに移動することはできません。

LINEログインチャネルとMessaging APIチャネルを連携するサービスを開発する場合は、これらのチャネルを同じプロバイダーの配下に作成してください。

開発者が提供するサービスを利用するLINEユーザーには、プロバイダーごとに異なるユーザーIDが割り当てられます。異なるプロバイダーに属するチャネル間では、ユーザーIDを利用して同一ユーザーであることを確認できません。

Step 2: スターターアプリをデプロイする

次に、Herokuにスターターアプリをデプロイします。Step 1で作成したチャネルのチャネルIDとチャネルシークレットを利用します。以下の操作を行ってください。

1. GitHubのline-login-starterリポジトリにアクセスします。
2. READMEファイルの［Deploy to Heroku］ボタンをクリックします。
3. Herokuの［Create New App］ページに必要な情報を入力します。
   • Heroku app name
     一意の名前を設定します。次のような名前を推奨します: line-login-starter-{YYYYMMDD}
   • Region
   • Config Vars
     • 次の形式のコールバックURL：https://{Heroku app name}.herokuapp.com/auth
     • チャネルID（LINE Developersコンソールで確認できます）
     • チャネルシークレット（LINE Developersコンソールで確認できます）
4. ［Deploy app］をクリックし、アプリが正常にデプロイされたことを確認します。

Step 3: チャネルの設定確認し、コールバックURLを入力する

ウェブアプリ用のLINEログインのチャネルを使用する場合は、［アプリタイプ］と［コールバックURL］が正しく設定されている必要があります。

1. LINE Developersコンソールで、Step 1で作成したチャネルを選択します。
2. ［チャネル基本設定］タブをクリックし、［アプリタイプ］に［ウェブアプリ］が表示されていることを確認します。
3. ［LINEログイン設定］タブをクリックし、［コールバックURL］にHerokuのコールバックURL（https://{Heroku app name}.herokuapp.com/auth）を入力します。

LINEログインのチャネル基本設定

LINEログインチャネルの［チャネル基本設定］タブで表示される情報は以下のとおりです。

Step 4: ウェブアプリを試す

1. ウェブアプリのURL（https://{Heroku app name}.herokuapp.com）にアクセスします。以下のように表示されます。
   
2. ［Log in］をクリックします。
   LINEログインの標準的なページにリダイレクトされます。リダイレクト先のURLは、https://access.line.me/oauth2/v2.1/で始まり、多くのクエリパラメータが含まれています。クエリパラメータについて詳しくは、「ウェブアプリにLINEログインを組み込む」を参照してください。
3. LINEにログインし、ウェブアプリに必要な権限を与えることを同意します。

LINEアカウントでログインすると、LINEユーザーのプロフィール画像、表示名、およびステータスメッセージが表示されます。（iOSまたはAndroidを使用していて、すでにLINEアカウントでログイン済みの場合は、自動的にウェブアプリにログインされます。）

スターターアプリのその他の機能を試す

ウェブアプリにログインした後で以下のボタンをクリックすると、ウェブアプリのその他の機能を試すことができます。

• ユーザーのアクセストークンを検証する
• ユーザーのアクセストークンを更新する
• アクセストークンを取り消す（ユーザーをログアウトさせる）

ログを確認する

Heroku CLIを使用して、ウェブアプリのログを確認します。

1. コマンドラインからHerokuにログインします。
   sh

   $ heroku login
   

2. ログを確認します。
   sh

   $ heroku logs --app {Heroku app name} --tail
   

Step 5: ウェブアプリをカスタマイズする

スターターアプリをローカルコンピューターにダウンロードして、テストしたり修正したりできます。修正後は、任意のウェブサーバーにアプリをデプロイできます。ここでは、Step 1でデプロイしたHerokuアプリに変更を加えて、再デプロイする方法について説明します。

以下のソフトウェアをインストール済みであることを確認します。

• JDK 1.8以降
• Maven™ 3.0以降
• Git™

1. GitHubのline-login-starterリポジトリをクローンします。
   sh

   git clone https://github.com/line/line-login-starter.git
   

2. cdコマンドを実行して、line-login-starterディレクトリに移動します。
3. Heroku用リモートをローカルリポジトリに追加します。
   sh

   $ heroku git:remote -a {Heroku app name}
   

4. 変更を加えてコミットします（任意）。
   sh

   $ git add .
   $ git commit -m "First commit"
   

5. 変更をHerokuのmasterブランチにプッシュします。
   sh

   $ git push heroku master
   

Step 6: チャネルを公開する（任意）

LINEログインのチャネルは「開発中」のステータスで作成されます。チャネルが「開発中」の場合は、AdminまたはTesterの権限（詳しくは、「権限を管理する」を参照）を持つユーザーのみがLINEログインを利用できます。そのほかのユーザーもLINEログインを利用できるようにするには、ステータスを「公開済み」に変更してください。ステータスを「公開済み」にするには、LINE DevelopersコンソールでLINEログインのチャネルを表示し、ページ上部の［開発中］をクリックします。

LINEログインのテストのために使用する場合は、ステータスを変更する必要はありません。アプリのLINEログインを一般のユーザーが利用できるようにするときに限り、ステータスを「公開済み」に変更してください。なお、ステータスを「公開済み」に変更した場合、「開発中」に戻すことはできないため注意してください。

ステータスが「開発中」のLINEログインチャネルでのテスト方法

ステータスが「開発中」のLINEログインチャネルでテストを行う場合、チャネルでのテストが可能な権限が付与された開発者アカウントに、LINEアカウントが紐づけられている必要があります。開発者アカウントに紐づくビジネスIDにLINEアカウントを連携することで、開発者アカウントにLINEアカウントを紐づけることができます。

開発者アカウントには必ず1対1でビジネスIDが紐づけられていますが、ビジネスIDへのLINEアカウントの連携は任意です。そのため、ビジネスIDとLINEアカウントが連携されていない場合があります。LINEログインのテストを行う場合には、ビジネスIDとLINEアカウントが連携されているかを確認してください。

LINEログインのテストを行う際には、開発アカウントと紐づいているLINEアカウントでログインをする必要があります。ビジネスIDに登録しているメールアドレスとパスワードでは、ログインはできないことに注意してください。

ビジネスIDとLINEアカウントの連携について詳しくは、『LINE Developersコンソールドキュメント』の「ビジネスIDにLINEアカウントを連携させる」を参照してください。

次のステップ

• ウェブアプリにLINEログインを組み込む
• iOSアプリにLINEログインを組み込む - Swift
• AndroidアプリにLINEログインを組み込む
• UnityゲームにLINEログインを組み込む