Skip to content
No description, website, or topics provided.
Vue JavaScript
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.
api this is it Nov 10, 2018
assets this is it Nov 10, 2018
components
layouts this is it Nov 10, 2018
middleware this is it Nov 10, 2018
pages this is it Nov 10, 2018
plugins this is it Nov 10, 2018
server
static this is it Nov 10, 2018
store
.editorconfig
.eslintrc.js this is it Nov 10, 2018
.gitignore this is it Nov 10, 2018
.prettierrc this is it Nov 10, 2018
README.md
docker-compose.yml this is it Nov 10, 2018
keycloak-demo.json
nuxt.config.js
package.json
slide.md
yarn.lock this is it Nov 10, 2018

README.md

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 にして動くようにしています
You can’t perform that action at this time.