Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
index.js
package-lock.json
package.json

README.md

実装して理解する LINE Login と OpenID Connect 入門

作成:2019/03/14
更新:同上

LINE開発者コミュニティで実施するLINE Login講座の実習資料です。
本サンプルはOpenID Connectのフローを理解することを目的としています。そのため、OpenID Connectのフロー(具体的にはエンドポイントの呼び出し)を途中で止めており、通常のアプリケーションの作り方とは異なりますので注意してください。

免責事項

  • 本サンプルコードは学習用のコードであり、本サンプルコードを利用したことにより発生するいかなる損害についても補償は致しません
  • 本サンプルコードの不具合などがありましたら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でプロバイダを作成
  1. LINE Developers Consoleへアクセスしログオンする
    初めての方は開発者名とメールアドレスを入力して開発者登録をしてください。
  2. 新規プロバイダ作成をクリックしてプロバイダを作成する
    新規プロバイダ作成
  3. プロバイダ名を入力して新規プロバイダを作成する
    注意点:プロバイダ名に「LINE」という文字列を含めることは出来ません。
    プロバイダ名登録
  4. 新規LINEログオンのチャネルを作成する
    新規チャネル作成
    以下の情報を入力してチャネルを作成する
  • アプリ名:任意の名称
  • 説明:任意の説明
  • アプリタイプ:今回は「WEBで使う」を選択
  • メールアドレス:ご自身のメールアドレス チャネル登録
  1. チャネルの設定を行う
    以下の設定を行う
  • OpenID Connect -> メールアドレスの申請
  • 各種ガイドラインへの同意にチェック
  • ユーザにメールアドレス取得に関する同意を取得している画面等のスクリーンショットのアップロード
    メールアドレス申請
    同意
    テスト用なの適当な(笑)画像を作ってアップロードします。
    画像
  1. 必要な情報をメモする
    後で使うので、以下の2つの情報をメモしておきます。
  • Channel ID(client_idに相当)
  • Channel Secret(client_secretに相当)
  1. OpenID Connect RPの情報を登録する
    アプリ設定のタブを開き、Callback URLの編集をクリック、今回のテストアプリのコールバックURLを登録します。
    今回のアプリはhttp://localhost:3000/cbを使います。
    コールバックURL
  2. チャネルの公開
    設定が終わったチャネルを公開します。
    公開
コードのクローン~セットアップ
  1. ローカルの任意の場所に新規フォルダを作成する
  2. Visual Studio Codeを開き、作成したフォルダをVisual Studio Code上へドラッグ&ドロップする
  3. CTRL+@でターミナルを開く
  4. 本レポジトリをローカルにクローン
    git clone https://github.com/fujie/line_login.git
  5. index.jsのコードを修正する Channel ID/Secret
  6. ターミナルでline_loginフォルダへ移動する
    cd line_login
  7. モジュールのインストール
    npm install
  8. index.jsを実行する
    node index.js
動作確認
  1. ブラウザでhttp://localhost:3000を開く
    起動
  2. loginボタンをクリックするとLINEログイン画面へ遷移する
    ログイン
  3. QRコードログインを選択する
    QRログイン
  4. スマホのLINEの友だち追加用のQRリーダでQRを読み込む
  5. 表示される番号をスマホ側に入力する
    ログインコード
  6. 属性取得に関する同意画面が出るので同意する
    同意
  7. 認可コードが取得できるので、exchange code to tokenをクリックする
    認可コード
  8. トークン(access_token, refresh_token, id_token)が取得できる
    トークン
  9. id_tokenのリンクをクリックし、id_tokenの内容を確認する
    新しいタブが開き、https://jwt.msで取得したid_tokenの中身が確認できる
    IDトークン
  10. 元のタブに戻り、get userinfoをクリックし、プロファイルを取得する
    userinfo
You can’t perform that action at this time.