基本は公式：https://www.keycloak.org/securing-apps/vue 通りに進める。

地味に苦戦したのでメモしておく。dockeは使いません。

環境

• windows 10 Enterprise

keycloakを立ち上げる

(もし入っていないかったら)javaのインストール

以下のリンクに入って自分の環境に合わせてjavaをダウンロードしてインストールする

https://java.com/ja/download/manual.jsp

ちなみに私の場合はWindows オフライン 64bit

keycloakのダウンロード

まずkeycloakダウンロード

https://www.keycloak.org/downloads.html

をzipをダウンロードする

unzipしておく

keycloakを立ち上げる

先ほど、解凍したkeycloakのディレクトリに入って

bin/standalone.bat

keycloakの設定

管理者の作成

以下に入る。

http://localhost:8080/auth/

左のAdministration Consoleから作成する。
今回はadmin, adminにしておく。

その後にhttp://localhost:8080/にadmin, adminでアクセスしする。

リアムの作成

まず左上のMasterをホバーする。

Add realmをクリック

Nameにkeycloak-demoと入力してCreateを押す

ユーザーを作成

次にユーザーを作成する。

1. 左サイドバーのUsersをクリック
2. 右上のAdd userをクリック
3. 名前などを入力して次へ。今回はmyuserという名前で作成

上のタブのCredentialsをクリック

作成したユーザーのパスワードを設定する

1. Set Password入力する。今回はここでもadmin
2. TenmporaryをOFFに

appの設定

作成するapp-vueを登録する

1. 左のclientsをクリック
2. 右上のcreate
3. client idにapp-vue
4. Root URL に http://127.0.0.1:3000
5. Valid Redirect: *
6. Web Origins: *

vue appを作成する

npm install -g @vue/cli
# OR
yarn global add @vue/cli

npm install -g @vue/cli-init
# OR
yarn global add @vue/cli-init

npm i- -g @vue/cli-init
vue init webpack-simple app-vue

npm i keycloak-js --save
npm i vuejs-logger --save

サンプルをクローンする

git clone <https://github.com/keycloak/keycloak-quickstarts.git>
cd applications/app-vue/
npm install

vueを起動する。

# launch app:<http://127.0.0.1:3000>
npm run dev

これで、keycloakのログイン画面が出るので、先程設定したようにid:myuser, pass: adminでログイン

参考

• https://www.keycloak.org/securing-apps/vue