背景

以前、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