背景
以前、Nuxt.jsでKeycloakと連携したログイン機能を実装してみた。
https://qiita.com/yusuke-ka/items/1beef8d9e0bbeb052e5a
今度はelectronアプリでKeycloakと連携したログイン機能を実装してみようと思う。
その準備として、今回は、まずkeycloakの設定をやってみる。
keycloakのインストール等は以下で実施したので、これを使う。
keycloakの設定
keycloakの管理UIにアクセスして、keycloakの設定を実施していく。
レルム追加
最初にレルムを追加する。
「Name」を入力して、「Create」ボタンを押すだけ。
クライアントの追加
続いて、作成したレルムの「Clients」でclientを新規作成。
右のほうにある「create」ボタンを押す。
Clientの追加画面が表示されるので、「Client ID」だけ入力して「Save」ボタンを押すと、詳細設定画面に遷移する。
「Client Protocol」の設定は「openid-connect」のままにする。
electronアプリの場合、クライアント認証は難しそうなので、「Access Type」もとりあえず「public」のままにしておく。
(「confidencial」にすると、Client Secretや秘密鍵をクライアント側で保持する必要がでてくる。electronアプリのように、エンドユーザーのPCにインストールするようなアプリだと、これらを安全に保持するのはとても難しいと思われる。)
「Standard Flow Enabled」が有効になっていることを確認。
electronアプリから利用することを想定しているので、「Valid Redirect URIs」には、とりあえず、「 http://localhost/callback 」を設定しておく。
publicなクライアントの場合、コードの横取りに対処する必要があるとのことなので、PKCE(Proof Key for Code Exchange by OAuth Public Clients)の設定を使うようにしてみる。
下の方にある「Advanced Settings」を展開すると、「Proof Key for Code Exchange Code Challenge Method」という項目が出てくる。「Plain」と「S256」が選択できるので、今回は「S256」を選択してみた。
「save」ボタンで保存する。
ユーザーの追加
確認用のユーザーも作っておく。やり方は下記を参照(「Keycloakの設定」という項目の最後のほう)。
https://qiita.com/yusuke-ka/items/1beef8d9e0bbeb052e5a#keycloak%E3%81%AE%E8%A8%AD%E5%AE%9A
次回予告
electronアプリでKeycloakと連携したログイン機能を実装するために、今回は、Keycloak側の設定を実施した。
次は、electronアプリを作成する。
https://qiita.com/yusuke-ka/items/a4767c511f03b6083afc