oauth2-proxy自定义登录界面

前言

配置好oauth2-proxy之后，oauth2-proxy会默认的阻止未经过登录的用户访问，并且返回下面的界面（并且返回了403错误代码），从而引导用户前往登录认证（如下图）。

但是默认的登录界面有的情况并不符合我们的使用需求，我们需要DIY自己的登录界面，这篇博客将会介绍下如何自定义oauth2-proxy的登录界面。

配置oauth2 proxy

这边我是以使用命令行启动的方式oauth-proxy，如果你使用的是docker之类的，那么请自己修改对应的docker启动命令以及文件夹映射

我这边还是以我上一篇文章举的oauth2 proxy的启动命令为蓝本，来讲解如何配置

原来的使用默认界面的启动命令：

oauth2-proxy --provider="oidc" \
    --redirect-url="https://网站的地址/oauth2/callback" \
    --client-id=上方获取到的客户端ID \
    --client-secret=上方获取到的客户端的密钥 \
    --cookie-secret=这里随便的一个什么一个字串符做密钥就可以了 \
    --oidc-issuer-url=填写上方获取到的OpenID 配置颁发者URL链接" \
    --email-domain=* \
    --upstream="要被反向代理的站点的地址"\
    --cookie-secure=false \
    --reverse-proxy=true \
    --cookie-expire=240h0m0s \
    --upstream-timeout=600s \
    --request-logging=true \
    --http-address="监听的站点地址" \

接下来，我们要添加一个–custom-templates-dir参数，这个参数后面跟一个文件夹的路径，这个文件夹中要存放我们的模板文件（即我们自定义的页面）

修改完后的启动命令如下：

oauth2-proxy --provider="oidc" \
    --redirect-url="https://网站的地址/oauth2/callback" \
    --client-id=上方获取到的客户端ID \
    --client-secret=上方获取到的客户端的密钥 \
    --cookie-secret=这里随便的一个什么一个字串符做密钥就可以了 \
    --oidc-issuer-url=填写上方获取到的OpenID 配置颁发者URL链接" \
    --email-domain=* \
    --upstream="要被反向代理的站点的地址"\
    --cookie-secure=false \
    --reverse-proxy=true \
    --cookie-expire=240h0m0s \
    --upstream-timeout=600s \
    --request-logging=true \
    --http-address="监听的站点地址" \
    --custom-templates-dir=/home/q2019oauth/go/bin/q2019oauth-customdir/

请注意，这个路径要有配置好权限，能让oauth2-proxy进行读操作

模板配置

接下来我们就要再设置的模板文件夹中添加登录界面的模板了,请在刚刚配置的模板文件夹中新建一个文件，叫做sign_in.html,oauth2-proxy将会以这个文件来作为模板来使用。

接下来我们编辑这个sign_in.html文件。oauth2-proxy项目中给的默认的登录模板代码如下

{{define "sign_in.html"}}
<!DOCTYPE html>
<html lang="en" charset="utf-8">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Sign In</title>
    <link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/bulma.min.css">

    <style>
      body {
        height: 100vh;
      }
      .sign-in-box {
        max-width: 400px;
        margin: 1.25rem auto;
      }
      .logo-box {
        margin: 1.5rem 3rem;
      }
      .alert {
        padding: 5px;
        background-color: #f44336; /* Red */
        color: white;
        margin-bottom: 5px;
        border-radius: 5px
      }
      /* The close button */
      .closebtn {
        margin-left: 10px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }
      /* When moving the mouse over the close button */
      .closebtn:hover {
        color: black;
      }
      footer a {
        text-decoration: underline;
      }
    </style>
  </head>
  <body class="has-background-light">
  <section class="section has-background-light">
    <div class="box block sign-in-box has-text-centered">
      {{ if .LogoData }}
      <div class="block logo-box">
        {{.LogoData}}
      </div>
      {{ end }}

      <form method="GET" action="{{.ProxyPrefix}}/start">
        <input type="hidden" name="rd" value="{{.Redirect}}">
          {{ if .SignInMessage }}
          <p class="block">{{.SignInMessage}}</p>
          {{ end}}
          <button type="submit" class="button block is-primary">Sign in with {{.ProviderName}}</button>
      </form>

      {{ if .CustomLogin }}
      <hr>

      <form method="POST" action="{{.ProxyPrefix}}/sign_in" class="block">
        <input type="hidden" name="rd" value="{{.Redirect}}">

        <div class="field">
          <label class="label" for="username">Username</label>
          <div class="control">
            <input class="input" type="text" placeholder="e.g. userx@example.com"  name="username" id="username">
          </div>
        </div>

        <div class="field">
          <label class="label" for="password">Password</label>
          <div class="control">
            <input class="input" type="password" placeholder="********" name="password" id="password">
          </div>
        </div>
        <button class="button is-primary">Sign in</button>
      </form>
      {{ end }}

      {{ if eq .StatusCode 400 401 }}
      <div class="alert">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        {{ if eq .StatusCode 400 }}
        {{.StatusCode}}: Username cannot be empty
        {{ else }}
        {{.StatusCode}}: Invalid Username or Password
        {{ end }}
      </div> 
      {{ end }}

    </div>
  </section>

  <script>
    if (window.location.hash) {
      (function() {
        var inputs = document.getElementsByName('rd');
        for (var i = 0; i < inputs.length; i++) {
          // Add hash, but make sure it is only added once
          var idx = inputs[i].value.indexOf('#');
          if (idx >= 0) {
            // Remove existing hash from URL
            inputs[i].value = inputs[i].value.substr(0, idx);
          }
          inputs[i].value += window.location.hash;
        }
      })();
    }
  </script>

  <footer class="footer has-text-grey has-background-light is-size-7">
    <div class="content has-text-centered">
    	{{ if eq .Footer "-" }}
    	{{ else if eq .Footer ""}}
    	<p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
    	{{ else }}
    	<p>{{.Footer}}</p>
    	{{ end }}
    </div>
	</footer>

  </body>
</html>
{{end}}

依照官方的模板修改界面为自己喜欢的样式即可。然后重新启动oauth2-proxy即可看到更改过后的界面。

(这是我改的）

更多模板文件，可以通过点击下面的链接来进行查看

https://github.com/oauth2-proxy/oauth2-proxy/tree/master/pkg/app/pagewriter

上面的链接中有很多对应的模板，如果有更改其他界面的需求的话，可以按照上面的模板直接修改就行了。

前言

配置oauth2 proxy

模板配置

推荐文章