作成：2019/03/14
更新：同上
LINE開発者コミュニティで実施するLINE Login講座の実習資料です。
本サンプルはOpenID Connectのフローを理解することを目的としています。そのため、OpenID Connectのフロー（具体的にはエンドポイントの呼び出し）を途中で止めており、通常のアプリケーションの作り方とは異なりますので注意してください。
- 2019/03/15（金）実装して理解する LINE Login と OpenID Connect 入門 #1
免責事項
- 本サンプルコードは学習用のコードであり、本サンプルコードを利用したことにより発生するいかなる損害についても補償は致しません
- 本サンプルコードの不具合などがありましたらIssue等でご連絡ください。ベストエフォートで対応するかもしれませんし、しないかもしれません。
- node.js(v10.13.0で動作確認済み)
- Visual Studio Code(1.32.1 for Windowsで作成)
- git(2.19.2.windows.1で動作確認)
- LINEアカウント
- LINE Developers Consoleへのアクセスが出来ること
- LINE Developers Consoleへアクセスしログオンする
初めての方は開発者名とメールアドレスを入力して開発者登録をしてください。 - 新規プロバイダ作成をクリックしてプロバイダを作成する
- プロバイダ名を入力して新規プロバイダを作成する
注意点：プロバイダ名に「LINE」という文字列を含めることは出来ません。
- 新規LINEログオンのチャネルを作成する
以下の情報を入力してチャネルを作成する
- アプリ名：任意の名称
- 説明：任意の説明
- アプリタイプ：今回は「WEBで使う」を選択
- メールアドレス：ご自身のメールアドレス
- チャネルの設定を行う
以下の設定を行う
- OpenID Connect -> メールアドレスの申請
- 各種ガイドラインへの同意にチェック
- ユーザにメールアドレス取得に関する同意を取得している画面等のスクリーンショットのアップロード
テスト用なの適当な(笑)画像を作ってアップロードします。
- 必要な情報をメモする
後で使うので、以下の2つの情報をメモしておきます。
- Channel ID（client_idに相当）
- Channel Secret（client_secretに相当）
- OpenID Connect RPの情報を登録する
アプリ設定のタブを開き、Callback URLの編集をクリック、今回のテストアプリのコールバックURLを登録します。
今回のアプリはhttp://localhost:3000/cbを使います。
- チャネルの公開
設定が終わったチャネルを公開します。
- ローカルの任意の場所に新規フォルダを作成する
- Visual Studio Codeを開き、作成したフォルダをVisual Studio Code上へドラッグ＆ドロップする
CTRL+@でターミナルを開く- 本レポジトリをローカルにクローン
git clone https://github.com/fujie/line_login.git - index.jsのコードを修正する
- ターミナルでline_loginフォルダへ移動する
cd line_login - モジュールのインストール
npm install - index.jsを実行する
node index.js
- ブラウザで
http://localhost:3000を開く
- loginボタンをクリックするとLINEログイン画面へ遷移する
- QRコードログインを選択する
- スマホのLINEの友だち追加用のQRリーダでQRを読み込む
- 表示される番号をスマホ側に入力する
- 属性取得に関する同意画面が出るので同意する
- 認可コードが取得できるので、
exchange code to tokenをクリックする
- トークン（access_token, refresh_token, id_token）が取得できる
- id_tokenのリンクをクリックし、id_tokenの内容を確認する
新しいタブが開き、https://jwt.msで取得したid_tokenの中身が確認できる
- 元のタブに戻り、
get userinfoをクリックし、プロファイルを取得する
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent