先日Streamlit+Nginx+OAuth2 Proxyを連携させて、Google認証機能を追加しました。
今回はOAuth2 Proxyのサインインページのカスタマイズ方法を説明します。
概要
カスタマイズ方法は大きく３つあります。
- サインインページをスキップする
- パラメータでカスタマイズする
- テンプレートでカスタマイズする
１の「サインインページをスキップする」は、そもそもサインインページを表示しないので、正確に言うとサインインページのカスタマイズではありませんが、そうしたい人も多いと思いますので説明します。
サインインページをスキップする
ページにアクセスがあったときに、サインインページを表示せずに、直接Google認証に飛ばす方法です。
–skip-provider-button=trueを追加するだけで簡単に実現できます。
authproxy:
image: quay.io/oauth2-proxy/oauth2-proxy:latest
networks:
shared-nw:
ports:
- "4180:4180"
command: --skip-provider-button=true --cookie-secure=false --upstream="http://0.0.0.0:80" --http-address="0.0.0.0:4180" --redirect-url="http://localhost/oauth2/callback" --email-domain="*"
environment:
OAUTH2_PROXY_COOKIE_SECRET: ＜クッキーシークレットをここにコピー＞
OAUTH2_PROXY_CLIENT_ID: ＜クライアントIDをここにコピー＞
OAUTH2_PROXY_CLIENT_SECRET: ＜クライアントシークレットをここにコピー＞
OAUTH2_PROXY_COOKIE_EXPIRE: 30m
パラメータでカスタマイズする
次に、パラメータでカスタマイズする方法です。
カスタマイズできる個所は3箇所です。
それぞれ以下のパラメータで変更できます。
| 変更箇所 | パラメーター | 値 |
| ロゴ | –custom-sign-in-logo | ロゴファイルへのパスまたはURL “-“を指定すると非表示 |
| サインインメッセージ | –banner | 任意の文字列 “-“を指定すると非表示 |
| フッターメッセージ | –footer | 任意の文字列 “-“を指定すると非表示 |
試しに全部非表示にしてみました。
authproxy:
image: quay.io/oauth2-proxy/oauth2-proxy:latest
networks:
shared-nw:
ports:
- "4180:4180"
command: --custom-sign-in-logo="-" --banner="-" --footer="-" --cookie-secure=false --upstream="http://0.0.0.0:80" --http-address="0.0.0.0:4180" --redirect-url="http://localhost/oauth2/callback" --email-domain="*"
environment:
OAUTH2_PROXY_COOKIE_SECRET: ＜クッキーシークレットをここにコピー＞
OAUTH2_PROXY_CLIENT_ID: ＜クライアントIDをここにコピー＞
OAUTH2_PROXY_CLIENT_SECRET: ＜クライアントシークレットをここにコピー＞
OAUTH2_PROXY_COOKIE_EXPIRE: 30m
ボタンだけが残りました。
ボタンに関しては、パラメータで簡単にカスタマイズする方法は、この記事執筆時点ではありませんでした。
ボタンの色を変えたいなどしたいときは、次の「テンプレートでカスタマイズする」必要があります。
テンプレートでカスタマイズする
最後は、サインイン用のHTMLを用意して、それを表示する方法です。
HTMLページをゼロから用意してもいいのですが、ボタンの色を変えるだけでしたら、デフォルトのページをコピーしてそれに修正を加えましょう。
まず、カスタムページを保存する場所を用意する必要があります。
今回はauthproxyというフォルダを作り、そこにtemplateという名前のフォルダーを作成します。
デフォルトのサインインページを表示し、右クリックして、「名前を付けて」保存を選択します。
名前をsign_in.html、ファイルの種類を「ウエブページ、HTMLのみ」にして、templateフォルダの下に保存します。
authproxyフォルダの下に、以下のDockerfileを作成します。
FROM quay.io/oauth2-proxy/oauth2-proxy:latest
COPY ./template /etc/oauth2proxy
EXPOSE 4180
sign_in.htmlを修正します。
今回は、.button.is-primaryのスタイルを変更して、ボタンの色を変えてみましょう。
<style>
body {
height: 100vh;
}
.sign-in-box {
max-width: 400px;
margin: 1.25rem auto;
}
.logo-box {
margin: 1.5rem 3rem;
}
footer a {
text-decoration: underline;
}
.button.is-primary {
background-color: mediumorchid;
}
.button.is-primary:hover {
background-color: orchid;
}
</style>
最後に、docker-compose.ymlファイルを修正します。
authproxy:
#image: quay.io/oauth2-proxy/oauth2-proxy:latest
build:
context: ./authproxy
dockerfile: Dockerfile
networks:
shared-nw:
ports:
- "4180:4180"
command: --custom-templates-dir="/etc/oauth2proxy" --cookie-secure=false --upstream="http://0.0.0.0:80" --http-address="0.0.0.0:4180" --redirect-url="http://localhost/oauth2/callback" --email-domain="*"
environment:
OAUTH2_PROXY_COOKIE_SECRET: ＜クッキーシークレットをここにコピー＞
OAUTH2_PROXY_CLIENT_ID: ＜クライアントIDをここにコピー＞
OAUTH2_PROXY_CLIENT_SECRET: ＜クライアントシークレットをここにコピー＞
OAUTH2_PROXY_COOKIE_EXPIRE: 30m
OAuth2 Proxyについては、Dockerfileからビルドするようにします。
また、–custom-templates-dirに、sign_in.htmlファイルが保存されている場所を指定します。
最終的には、以下のようなファイル構成になります。
docker-compose.ymlファイルを選択、右クリックし、Compose Upを選択してコンテナを起動します。
以下の画面のように、ボタンの色が変われば成功です。
