Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜認証設定編〜

# はじめに
[前回の記事](https://qiita.com/shin7446/items/bafb3619caf5c8ba28c1)では、Red Hat Developer Hub(RHDH)やGolden Pathで利用する各種ツール群のインストールを行いました。
ここではGolden Pathの登録前に必要な設定の投入や、各種ツールとRHDHの連携を行います。

# 実現する環境
今回は以下の環境を構成します。
![ScreenShot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/e5c69ce7-0a0a-9d3d-5e72-bc99bae59a0a.png)


# 章項目
今回のテーマは6つの記事で構成されています。
* [Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜環境導入編〜](https://qiita.com/shin7446/items/bafb3619caf5c8ba28c1) 
* [Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜認証設定編〜](https://qiita.com/shin7446/items/b54ebda4ee91ea5f4ca2) この記事
* [Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜GitHub Integration編〜](https://qiita.com/shin7446/items/c35010c3ea566beadc5a)
* [Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜Golden Path作成編①〜](https://qiita.com/shin7446/items/ce86d9bbb5121579f9ce)
* [Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜Golden Path作成編②〜](https://qiita.com/shin7446/items/0c181c2f7cc63917bd7c)
* Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜Component UI改善編〜

# 前提条件
以下の記事の実行が完了していること
1. Red Hat Developer Hub (Backstage) でGolden Pathを作ろう〜環境導入編〜


# 前提知識〜RHDH(Backstage)の設定方法〜
RHDHは、基本的に4つの方針で設定を行います。そのため、RHDHに設定を行う際はいろんなファイルを編集してそれをRHDH Podに反映させて、、、を繰り返すので、できる限りGUIではなくCLIもしくはコードエディタで作業できるような環境を構築するべきです。
1. Helmのvaluesに追加の設定を記載の上、`helm upgrade`を実行する
1. `app-config.yaml`というファイルに各種設定を記載の上、`Configmap`でPodにアタッチする
1. `app-config.yaml`にGithub上のファイルパスを記載し、GitHub上から設定情報を取得してくる
1. `Configmap`や`Secret`で設定ファイルや環境変数をマウントし、それを読み込む

では、RHDHに設定を行っていきます。

# 認証の設定
まずはRHDHへのログインに必要な設定を行います。RHDHはデフォルト状態ではGuest UserでのアクセスかGitHubによる認証の2つのログイン方法を選択できます。
プラグインを追加することでKeycloakでの認証も可能になりますが、今回はGitHubを利用していきます。

## GitHubの設定
GitHubでの認証を実現するために、GitHub側でOAuth Appの作成を行います。
ここでGitHubの個人アカウントでOAuth Appを設定するとそのユーザーのみ認証可能になりますが、Organizationで登録することで、そのOrganization配下のユーザー全員が認証可能になります。
RHDHは複数の開発メンバーでの利用を想定されるケースが多いので、ここでは新たにOrganizationを作成してそのOAuth Appを登録してみます。

### GitHub Organizationの作成
[こちら](https://github.com/settings/organizations)にアクセスし、右上の`New Organization`を選択します。
![ScreenShot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/15b2c843-e923-102a-8541-1806c77e6ace.png)

OrganizationのPlanを聞かれるので`Free`を選択します。
![ScreenShot 123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/a965b3fe-4784-034d-007a-046bbfe48423.png)

必要事項を記入して`Next`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/01145e0e-a4c1-0f37-5f36-8c44f3b7f92b.png"  width=50%>

適宜必要なメンバーを追加して`Complete setup`を選択します。
![ScreenShot 125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/094ade4d-bf3b-bb0b-c580-48705344af90.png)

## OAuth Appの作成
Organizationが作成できたので、そのまま上部の`Setttings`を選択し、`Developer settings`→`OAuth Apps`を選択します。

`Register an application`を選択します。
![ScreenShot 128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/0d841be4-7a51-6f8e-4a81-d61cdb113b7c.png)

各項目に必要な情報を入力していきます。
* `Application name`: 任意の値でOKです。
* `Homepage URL`: RHDHのRouteのURLを記載します。以下のコマンドで取得できます。
```
echo "https://$(oc get route -n rhdh developer-hub -o jsonpath={.status.ingress[0].host})"
```
* `Authorization callback URL`: `RHDHのRouteのURL`+`/api/auth/github/handler/frame`を記載します。以下のコマンドで取得できます。
```
echo "https://$(oc get route -n rhdh developer-hub -o jsonpath={.status.ingress[0].host})/api/auth/github/handler/frame"
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/9215266a-23ed-a65d-ab56-1d8ae553516a.png"  width=50%>

入力に問題なければ`Register application`を選択します。

するとClient IDが払い出されます。そのまま`Generate a new client secret`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/e372c406-ebba-d9a0-4253-cfcb34713c34.png"  width=50%>

するとClient Secretが払い出されます。この画面でしか表示されないので注意しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/bd7180b6-0a75-eb60-ed43-146cda6661f7.png"  width=50%>

この2つの値を環境変数に格納しておきます。
```
export AUTH_GITHUB_CLIENT_ID="<Client ID>"
export AUTH_GITHUB_CLIENT_SECRET="<Client Secret>"
```

## RHDHの設定
ではこのOAuthの情報をRHDHに渡していきます。
OAuthの情報は先述した設定方法のうち。`app-config.yaml`での設定になります。
app-configについては[公式ドキュメント](https://access.redhat.com/documentation/ja-jp/red_hat_developer_hub/1.0/html/getting_started_with_red_hat_developer_hub/ref-rhdh-supported-configs_rhdh-getting-started#proc-add-custom-app-file-openshift_rhdh-getting-started)に記載の通り`app-config-rhdh`という名前の `ConfigMap`を作成してRHDH Podに連携する形になります。なのでまずは`configmap`のyamlを作成します。

```app-config-rhdh.yaml
kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config-rhdh
  namespace: rhdh
data:
  app-config-rhdh.yaml: |
    app:
      title: Red Hat Developer Hub
    auth:
      environment: development
      providers:
        github:
          development:
            clientId: ${AUTH_GITHUB_CLIENT_ID}
            clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
```
ここでは`auth`を追記して、先ほど作成した`GitHub OAuth App`の情報を渡します。
OAuth Appの情報（特にClient Secret）は機密情報のため`Configmap`に直書きすることは推奨されません。そのため`Secret`を作成し、そこから環境変数として読み込みます。

この先この`Configmap`と`Secret`は更新して反映してを繰り返すことになります。また`Configmap`で渡される`app-config-rhdh.yaml`はRHDH Podの起動時に読み込まれるため、Podへ設定を反映させるにはPodの再起動が必要になります。
そのため、SecretについてはスクリプトでSecret削除→Secret作成→Pod再起動を自動化しておきます。

```create-secret.sh
#/bin/bash

# 古いSecretを削除
oc delete -n rhdh secret rhdh-secrets

# Secret作成
oc -n rhdh create secret generic rhdh-secrets \
  --from-literal=AUTH_GITHUB_CLIENT_ID="${AUTH_GITHUB_CLIENT_ID}" \
  --from-literal=AUTH_GITHUB_CLIENT_SECRET="${AUTH_GITHUB_CLIENT_SECRET}" \

# Configmapの更新
oc apply -f ./app-config-rhdh.yaml

# Configmap/Secretの変更を反映させるためにPodを再起動
oc rollout restart deploy developer-hub -n rhdh
```
こうすることで`Secret`に必要な情報を追加したら毎回Podが再起動するようにしておきます。
`Secret`の各変数に渡す値は環境変数をもとに書き換える状態にしておきます。

先ほど`GitHub OAuth App`の作成時に環境変数に設定してあるはずなので、以下のコマンドで`Secret`をデプロイします。
```
cat create-secret.sh | envsubst | bash
```
これでConfigmap/SecretのデプロイとPodの再起動が完了しました。

しかしこのままではRHDH Podは作成された`Configmap`や`Secret`を参照してくれません。
なのでこれらをちゃんと参照してもらうようにhelmの`values.yaml`を書き換えます。

`upstream.backstage`配下に`extraEnvVarsSecrets`と`extraAppConfig`を追記して、作成した`Secret`と`Configmap`を参照するようにします。
```values.yaml
____omit____

upstream:
  nameOverride: developer-hub
  backstage:
  # ここから
    extraEnvVarsSecrets:
      - rhdh-secrets
    extraAppConfig:
      - configMapRef: app-config-rhdh
        filename: app-config-rhdh.yaml
  # ここまで
____omit____
```

では`helm upgrade`で反映します。
```
helm upgrade -i developer-hub -n rhdh -f values.yaml openshift-helm-charts/redhat-developer-hub
```

するとRHDH Podが再起動されます。`Running`になって`準備完了`が`1/1`になるまで待ちましょう。
![ScreenShot 132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/fd6f6f77-4a82-caa1-61ce-4b57ba222ffd.png)

実際にRHDHにアクセスして`Sign in using GitHub`を行います。
![ScreenShot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/9714cae5-5a88-c848-888b-defc059760da.png)

ポップアップがでるので`Authorize`をすると...
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/9697c338-7ff0-af1e-c9d5-12598049ddb0.png"  width=50%>

無事にアクセスできました！
![ScreenShot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419286/0ed91f84-defc-9e82-2fee-23bc2e2b296e.png)

これで認証設定は完了です。
今回はOrganizationのOAuth Appを登録したので、該当のOrganizationのユーザーなら同様の手順でRHDHにアクセスできるようになります。

# おわりに
この記事ではRHDHへのログイン方法についてまとめました。
次回の記事では、Golden Pathの実行に向けた事前準備としてGitHubとの連携設定を行います。