EPGStationを外から見たいのでnginx + oauth2-proxyでGoogleアカウント認証

# はじめに
皆さんDTV [^note1] ってやってますか？
昨年コロナで帰省もできず暇だったのTVTestの環境からMirakurun + EPGStation環境へと移行し非常に快適に使わせてもらってます。私の使い方としては業務終了後に運動（散歩）のお供に低ビットレートにした実質ラジオ代わりの垂れ流しです。
要するにLAN内からのアクセスではなくWANからアクセスさせてます。ただ両方ともリバースプロキシや認証機能は敢えて提供せずVPNやnginx等を利用者が用意することになっています。
そこでnginxをWANへと公開し認証としてGoogleアカウント認証させたという話です。
（現状ではBASIC認証してるんですが割とアカウントの手打ちが面倒…）

# 前提
以下の点は記載しません。
・nginx導入
　→DDNSにてドメイン設定済み、サーバー証明書発行済み
・GCP側のOAuth設定

また今回の構成はこんな感じです。
![architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/83ef4f74-2245-5737-1f63-886a5ce0c40e.png)

# oauth2-proxyの設定
### oauth2-proxyの導入と設定
今回はoauth2_proxyではなく**oauth2-proxy**[^link1]を利用します。
Raspberry PiなのでARM用バイナリになります。
解答時にエラー吐きますが問題無いらしいです。

``` oauth2-proxyの取得.
wget https://github.com/oauth2-proxy/oauth2-proxy/releases/download/v7.1.3/oauth2-proxy-v7.1.3.linux-armv6.tar.gz
tar xf oauth2-proxy-v7.1.3.linux-armv6.tar.gz
sudo cp oauth2-proxy-v7.1.3.linux-armv6/oauth2-proxy /usr/local/bin/
```

設定ファイルのサンプルというか項目はこちらです。
[oauth2-proxy.cfg.example](https://github.com/oauth2-proxy/oauth2-proxy/blob/master/contrib/oauth2-proxy.cfg.example "oauth2-proxy.cfg.example")
その中からコメントアウトし実際に今回設定した内容です。

``` oauth2-proxy.cfg
sudo vi /usr/local/etc/oauth2-proxy.cfg

--中身--
http_address = "127.0.0.1:4180"

client_id = "hogehoge"
client_secret = "hogehoge"
provider = "google"
cookie_secret = "hogehoge"
authenticated_emails_file = "/usr/local/etc/emails"
------

sudo vi /usr/local/etc/emails
--中身--
hogehoge@gmail.com
------
```
**client_id**, **client_secret**はIdP（googleやgithub）から取得して下さい。
**cookie_secret**は乱数生成や適当な文字列をセットすれば良いようです。無い場合はエラーとなりました。
また、**authenticated_emails_file**で個別のメールアドレスを認証できます。
oauth2-proxy.cfgを確認したい場合、*/usr/local/bin/oauth2-proxy --config=/usr/local/etc/oauth2-proxy.cfg* としてsystemctlに設定前に起動確認しても良いです。

### systemctlの設定
サービス化する設定です。これもサンプルがあります。
[oauth2-proxy.service.example](https://github.com/oauth2-proxy/oauth2-proxy/blob/master/contrib/oauth2-proxy.service.example "oauth2-proxy.service.example")

``` oauth2_proxy.service
sudo vi /etc/systemd/system/oauth2_proxy.service

--中身--
[Unit]
Description=oauth2-proxy daemon service
After=syslog.target network.target

[Service]
# www-data group and user need to be created before using these lines
User=www-data
Group=www-data

ExecStart=/usr/local/sbin/oauth2-proxy --config=/usr/local/etc/oauth2-proxy.cfg
ExecReload=/bin/kill -HUP $MAINPID
KillMode=process
Restart=always
[Install]
WantedBy=multi-user.target
------

sudo systemctl enable oauth2_proxy
sudo systemctl restart oauth2_proxy
``` 
（oauth2_proxyとoauth2-proxy混じってますが動いてます。よく分かりません）
設定ファイルに不備がなければ起動しているはずです。
確認コマンドは*ss -atn*で4180番ポートでサービス稼働を確認できます。
もし動いていない場合、*sudo journalctl -f -u oauth2_proxy*でsystemctlのログを確認できます。

# nginxの設定
### nginx設定
うちの環境だと*sudo vi /etc/nginx/sites-enabled/default*に設定ファイルがあります。

``` nginxの設定.
location /oauth2/ {
                proxy_pass http://localhost:4180;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Scheme $scheme;
                proxy_set_header X-Auth-Request-Redirect $request_uri;
        }
        location = /oauth2/auth {
                proxy_pass http://localhost:4180;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP: $remote_addr;
                proxy_set_header X-Scheme $scheme;
                proxy_set_header Content-Length "";
                proxy_pass_request_body off;
        }

location / {
                auth_request /oauth2/auth;
                error_page 401 = /oauth2/sign_in;

                # pass information via X-User and X-Email headers to backend,
                # requires running with --set-xauthrequest flag
                auth_request_set $user   $upstream_http_x_auth_request_user;
                auth_request_set $email  $upstream_http_x_auth_request_email;
                proxy_set_header X-User  $user;
                proxy_set_header X-Email $email;

                # if you enabled --pass-access-token, this will pass the token to the backend
                auth_request_set $token  $upstream_http_x_auth_request_access_token;
                proxy_set_header X-Access-Token $token;

                # if you enabled --cookie-refresh, this is needed for it to work with auth_request
                auth_request_set $auth_cookie $upstream_http_set_cookie;
                add_header Set-Cookie $auth_cookie;

                # When using the --set-authorization-header flag, some provider's cookies can exceed the 4kb
                # limit and so the OAuth2 Proxy splits these into multiple parts.
                # Nginx normally only copies the first `Set-Cookie` header from the auth_request to the response,
                # so if your cookies are larger than 4kb, you will need to extract additional cookies manually.
                auth_request_set $auth_cookie_name_upstream_1 $upstream_cookie_auth_cookie_name_1;

                # Extract the Cookie attributes from the first Set-Cookie header and append them
                # to the second part ($upstream_cookie_* variables only contain the raw cookie content)
                if ($auth_cookie ~* "(; .*)") {
                        set $auth_cookie_name_0 $auth_cookie;
                        set $auth_cookie_name_1 "auth_cookie_name_1=$auth_cookie_name_upstream_1$1";
                }

                # Send both Set-Cookie headers now if there was a second part
                if ($auth_cookie_name_upstream_1) {
                        add_header Set-Cookie $auth_cookie_name_0;
                        add_header Set-Cookie $auth_cookie_name_1;
                }

                proxy_pass http://192.168.0.9:8888/;
                # or "root /path/to/site;" or "fastcgi_pass ..." etc
        }
```
**proxy_pass**にて認証を掛けたいページを設定してあげます。
設定ファイルを再読み込み *sudo systemctl reload nginx*
これで認証側とリバースプロキシ両方の設定完了です。

# 動作確認
WAN側からアクセスします。LAN内からのアクセスでも認証ページは表示出来ますがOAuthの設定でリダイレクト先をドメインに設定しているのでLAN内だと多分ちゃんと動きません。
（プライベートなDNS立ててLAN内でもドメインでアクセス出来るようにすればいけそうですが…）
![IMG_1877 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/474d19b0-f6b6-60e0-0cbb-4daaf701fae2.jpeg)　![IMG_1878 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/b2fbf0c0-495f-65e1-c4ab-898e97ef5251.jpeg)
許可したアカウントでログインするとちゃんとEPGStationが表示されました。

不許可のGoogleアカウントでのログインテストです。
![IMG_1879 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537256/beb39559-ed25-d05b-fcc5-17d65e50f1e6.jpeg)
多分これで完成です。

# まとめ
+ EPGStationを外から見たいので認証機能を導入
+ nginx+oauth2-proxyでGoogleアカウントによる認証を実現

# 参考文献
+ NginxとOAuth2 ProxyでWebアプリに認証をつける [^ref1]
+ oauth2_proxy と Auth0 を用いた Nginx のお手軽 OAuth 化 [^ref2]
+ 認証機能のないアプリケーションでOAuth2認証を提供する - OAuth2 Proxy 編[^ref3]

[^note1]: ここでは録画サーバーなどの意味で利用。TVTest, Mirakurun, EPGstationなど
[^link1]: https://github.com/oauth2-proxy/oauth2-proxy
[^ref1]: https://ebith.hatenablog.jp/entry/2020/05/10/002345
[^ref2]: https://mikan.github.io/2018/05/23/enable-oauth-to-your-nginx-by-oauth2-proxy-and-auth0/
[^ref3]: https://tech-blog.yayoi-kk.co.jp/entry/2019/11/18/150000