やりたかったこと
- webアプリ
- スマホアプリ
LINEログインをどちらも実装したい。
実際にどうやるのか
細かい事は公式マニュアルに細かく記載してあるのではしょりますが、
簡単な図を使ってざっくりと説明して行こうと思います。
必要な設定・情報
実装するにあたり必要な前設定ですが。
- 公式アカウントを作成
- LINE Developersにビジネスアカウントでログイン
サービスを利用するにはLINEアカウントと連携してください。と表示されるので、連携する。
（公式アカウントで始めていれば問題ないと思いますが個人のLINEアカウントが必要ケースもあります） - プロバイダーとチャンネルを作成
チャンネルを作成と以下の情報の取得が必須
Channel ID： チャンネル登録時に発行されるID
Chennel secret： チャンネル登録時に発行される秘密鍵
Callback URL： 認証後の遷移先 URL 登録（複数可）
ユーザーに認証と認可を要求する
LINEプラットフォームとユーザーの間で、認証と認可をします。
「LINEログインボタン」をクリックし、以下のように認可URLに必須のクエリパラメータを付けてをリダイレクトしてください。
https://access.line.me/dialog/oauth/weblogin?response_type=code&client_id={Channel ID}&redirect_uri={Callback URL}&state={State}
認可URLに付与できるパラメータは、以下になります。
| パラメータ | タイプ | 必須 | 説明 |
|---|---|---|---|
| response_type | String | 必須 | code |
| client_id | String | 必須 | LINEログインチャネルのチャネルID |
| redirect_uri | String | 必須 | コールバックURLをURLエンコードした文字列 |
| state | String | 必須 | 英数字の文字列 |
| ※他多数 | ※詳しくはLINE公式を参照してください。 |
webアプリの実装した際の流れ
※ Web Login は OAuth 2.0 のプロトコルを基本にしています。
まず、WebアプリにLINEログインの実装を行う方法として、「OpenID Connect」を使かって実装を行なっていきます。
流れとしては、Webサイトのログイン画面に、Google、Appleなどと同様にLINE対応のSSOをOpenID Connectを用いて実装していきます。
「LINEでログインボタン」をクリックすることでLINEの認証画面に遷移し、「許可するボタン」をクリックすることでリダイレクトでWebサイトに戻り、LINEのユーザ情報を取得しすることが可能となります。
Line Login Starter アプリケーション（LINE提供）
LINE Login Starter アプリケーションを利用すれば Java で簡単に LINE Login を試せます。
下記の Line @ GitHub のリポジトリにソースコードがありますので参考にしてみてください。
スマホアプリの実装した際の流れ
スマホアプリでの実装するにあたり、LINE SDKを使用しLINEログインをする方法が一番手っ取り早く確実と思われます。
スマホアプリのログイン画面で「LINEでログインボタン」をタップすることでスマホにインストールされているLINEアプリが起動し、認証画面が表示されます。（※LINEアプリがインストールされていない場合ブラウザのLINEログイン画面が表示されます。）LINEアプリの認証するをタップすることで LINEのユーザ情報を取得しスマホアプリ側に遷移します。
なお、iOS/iPadOSの場合、サードパーティのSSOを実装する際にAppleでサインインも実装しなければストア申請が通ら無いことが多いのでご注意ください。
認証方法
自動ログインが利用できる環境では、自動ログインが優先して動作します。
それ以外では、SSOが利用できる場合はシングルサインオン（SSO）によるログインが表示され、利用できない場合はメールアドレスログインが表示される仕組みです。
今回は、シングルサインオン（SSO）によるログインで実装を検討しています。
| 認証方法 | 説明 |
|---|---|
| 自動ログイン | ユーザーの操作なしでログイン。LINEログイン画面や確認画面は表示されない |
| メールアドレスログイン | メールアドレスとパスワードを入力してログイン |
| QRコードログイン | LINEログイン画面のQRコードを、スキャンしてログイン |
| シングルサインオン（SSO）によるログイン | 「次のアカウントでログイン」と表示された確認画面でログイン |
SSOはCookieを利用している機能
一度ウェブアプリからLINEログインをするとaccess.line.meでCookieが保存されまる。Cookieが有効な限り、同じブラウザでログインする際にSSOの画面が表示されます。
LINEログイン時のLINE公式アカウントを友達追加する
アプリにログインするときに、公式アカウントを友だち追加するように設定できます。
友だち追加のオプションはLINE Developersコンソールで指定できます。
https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={CHANNEL_ID}&redirect_uri={CALLBACK_URL}&state={STATE}&bot_prompt={BOT_PROMPT}&scope={SCOPE_LIST}
| 値 | 説明 |
|---|---|
| normal | LINEログインの同意画面に、LINE公式アカウントを友だち追加するオプションを表示 |
| aggressive | LINEログインの同意画面の後に、LINE公式アカウントを友だち追加するかどうか確認する画面を表示 |
最後に
LINEログインでの実装方法では大きく分けて2種類あることがわかり、ケースにあった実装が好ましい。
また、LINE公式サイトでは詳しく記載があるため、実装する場合も参考にかなりなる事がわかった。
細かい設定やAPIの仕様などはあるものの全体できな実装が理解できたと思います。