- 以前作成したVue + Keycloakのローカル検証環境を外部IdP(Google)連携させる方法についてメモする。
1.Keycloak 準備
- こちらの手順でDocker起動～レルム登録まで行う。
2.テスト用Vueアプリ準備
- こちらの手順でテスト用のVueアプリを準備しておく。
3.Keycloak IdP(Google)設定
- 作成したレルムを選択。
- 「Identity Providers」を選択
- 「Google」選択
- 「Redirect URI」を控える。(例：http://localhost:8089/auth/realms/myrealm/broker/google/endpoint)
4.Google 設定
※こちらを参考にプロジェクト作成、クライアント登録を行う。
-
クライアント設定
- 種類：ウェブ アプリケーション
- スコープ：
.../auth/userinfo.email,.../auth/userinfo.profile,openid - 承認済みの JavaScript 生成元:
http://localhost:8089 - 承認済みのリダイレクト URI:
http://127.0.0.1:8089/auth/realms/myrealm/broker/google/endpoint
※Keycloak設定時に出力された値
※KeycloakからGoogleへのリダイレクト時に「localhost」->「127.0.0.1」に変換されてしまったためこのような形としている。
5.Keycloak IdP(Google)設定
- 4.で発行したクライアントID/シークレットを③のIdP設定に入力する。
- 「Save」
動作確認
1.起動
npm run dev -- --port 3000
2.http://localhost:3000にアクセスする。
3.「Google」ボタン押下し、認証・同意を行う。
4.Vueアプリにリダイレクトされ、以下の画面が表示される。
