Skip to content

Latest commit

 

History

History
74 lines (54 loc) · 2.57 KB

README.md

File metadata and controls

74 lines (54 loc) · 2.57 KB
Raw

What's this?

Vue Fes Japan 2018 Reject Conference にて発表した、「Identiry Provider Keycloak の紹介と、それを用いた Nuxt.js での OpenID Connect 認証機能の実装」のデモ用アプリケーションです。

Keycloak を ID Provider に使用し、フロントエンドにNuxt.js、バックエンドの API サーバにExpressを用いた Web アプリケーションのサンプル実装となっています。

発表内容および解説はslide.mdを見てください。

Build Setup

Required

  • Node.js
  • Yarn
  • Docker

Start keycloak server with MySQL

  • http://localhost:8080
  • http://localhost:8080/auth/admin/ にアクセスすると Administrator Console にアクセスできる
    • username: admin
    • password: admin
  • Client
    • demo-browser-client
      • Nuxt.js アプリケーションの Client
    • demo-server-client
      • Express API Server の Client
$ docker-compose up

Start Nuxt.js Application

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev
  • トップページ
    • Signup, Login, Logout のリンクがある
  • public-api
    • keycloak-nodejs-adapter で保護してない API エンドポイントを叩いてるページ
  • protected-api
    • keycloak-nodejs-adapter で保護している API エンドポイントを叩いてるページ
  • protected
    • リダイレクト問題のデモ用ページ

Start API server

$ yarn api

注意点

  • mode: 'spa' でしか動きません
  • 通常 Implicit Flow は HTTPS 前提でしか動作しませんが、localhost で動かす前提で SSL を OFF にして動くようにしています