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

• http://localhost:3000

# 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

• http://localhost:4000

$ yarn api

• ソースはapi/index.js
• keycloak-nodejs-connect でエンドポイントの保護をしている
• /api/public
  • keycloak-nodejs-connect で保護してないエンドポイント
• /api/protected
  • keycloak-nodejs-connect で保護しているエンドポイント

注意点

• mode: 'spa' でしか動きません
• 通常 Implicit Flow は HTTPS 前提でしか動作しませんが、localhost で動かす前提で SSL を OFF にして動くようにしています
  • Keycloak の 'sslRequired': 'none' に設定
  • API サーバを NODE_TLS_REJECT_UNAUTHORIZED=0 にして起動