KeyCloakでGitHub認証を設定する方法

本稿ではKeyCloakでGitHub認証をセットアップする手順を解説します。

## KeyCloakとは

KeyCloakはオープンソースの認証基盤です。ユーザーの登録やログインなど、ウェブアプリケーションでよく使うアカウント周りを、HTTPサーバーとして提供するマイクロサービス的なものです。KeyCloakは、GoogleアカウントやGitHubアカウントをはじめとした、複数の認証プロバイダーと連携することができ、いわゆるGitHub認証などをサクッと実現できるのも売りのひとつです。

## KeyCloakでGitHub認証をセットアップする手順

### KeyCloakの起動

まず、KeyCloakを立ち上げます。起動方法はいろいろありますが、Dockerを使うのが最も手軽で確実です。

```shell
docker run \
  -e KEYCLOAK_ADMIN=admin \
  -e KEYCLOAK_ADMIN_PASSWORD=admin \
  -p 8080:8080 quay.io/keycloak/keycloak:18.0.2 start-dev
```

### 管理画面にログインする

起動したら、ブラウザで<http://localhost:8080/>を開きます。

開くと、次のようなKeyCloakのUIが表示されるので、「Administration Console」を開きます。

![CleanShot 2022-11-01 at 17.14.01@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/9e67b46b-ff09-1361-db12-20c0b97ff8fd.png)

管理画面へのログイン画面が出るので、admin/adminでログインします。

![CleanShot 2022-11-01 at 17.15.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/0d7ec285-58cf-e273-0a49-8152b9b5fc1a.png)

### レルムを作成する

「Add realm」ボタンをクリックし、レルム追加画面を出します。

![CleanShot 2022-11-01 at 17.53.07@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/18085913-62a1-4c78-b6bf-61c3744e3944.png)

「Name」フィールドにレルム名を入れます。なんでもいいですが、ここでは「`myrealm`」と入力します。入力したら「Create」ボタンを押します。

![CleanShot 2022-11-01 at 17.54.52@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/9b961d20-1e46-758d-cc7c-c0cca317d940.png)

### GitHubを認証プロバイダーに追加する

ログインできたら、ここからはGitHubを認証プロバイダーに追加する作業を行っていきます。

左のメニューの「Configuration」→「Identity Providers」を開きます。開いたら、「Add provider...」セレクトボックスから「GitHub」を選択します。

![CleanShot 2022-11-01 at 17.56.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/005669c3-3d43-f480-915c-a3eceb3a4594.png)

すると、「Add identity provider」という画面が表示されるので、そこに表示された「Redirect URI」の値をコピーしておきます。これは、GitHubでOAuth Appを作るときに使います。

![CleanShot 2022-11-01 at 17.57.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/b36fcde5-3cdb-3374-fddb-226c46d9e625.png)

この画面は開いたままにしておいてください。まだ「Save」しないでください。

### GitHubにてOAuth Appを作成する

ここからは一旦KeyCloakは置いておいて、GitHub側でのOAuth Appを作っていきます。

次のURLを開き、

https://github.com/settings/developers

「New OAuth App」を開きます。

![CleanShot 2022-11-01 at 17.23.28@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/8fa1dbf1-0bb1-1d23-bcc6-e3b1a57cd642.png)

開いたら、次のフィールドを埋めます。

- Application name: `KeyCloakローカルテスト`
- Homepage URL: `http://localhost:8080`
- Authorization callback URL: 上でコピーした「Redirect URI」をペーストする

![CleanShot 2022-11-01 at 17.59.35@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/4eb523da-e692-3a27-b11f-0a6af048d4d2.png)

上のフィールドを埋めたら、「Register application」をクリックします。

すると、OAuth Appが作成されるので、

1. 「Client ID」の値を控えます。これは後でKeyCloak側に入力するのに使います。
1. 「Generate a new client secret」ボタンを押して、「Client secrets」を生成します。

![CleanShot 2022-11-01 at 17.32.27@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/31ae93a0-ac84-be8c-6e8d-1d325a7e40eb.png)

「Client secrets」が生成されたら、その値も控えておきます。

![CleanShot 2022-11-01 at 17.36.04@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/4b072535-2788-0066-e41c-68a63b6e91da.png)

GitHubでの作業は以上で完了です。

### KeyCloakのGitHub設定にClient IDなどを設定する

続いて、先程のKeyCloakの「Add identity provider」の画面に戻り、上の手順で得た

- Client ID
- Client Secret

を入力し、「Save」ボタンを押します。

![CleanShot 2022-11-01 at 18.02.05@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/33a4b330-14e5-603b-448b-2d79945798bc.png)


## 関連

https://qiita.com/suin/items/108f0b9ee6350226e011

https://qiita.com/suin/items/be434beb7e2317390a63