2021 / 08 / 19

nginx前端鉴权

本文字数: 2599阅读时间: 6分钟

前段时间公司说要给内部文档加上鉴权,但是又没必要专门起一个服务用来鉴权,所以打算用nginx获取http自定义请求头来做校验。

实现

前端通过xhr.setRequestHeader设置自定义请求头,nginx使用http_customer_header来获取自定义的请求头,例如前端使用xhr.setRequestHeader('auth-account', account),那么nginx就用$http_auth_account来接收。那么假设我们需要校验的网站是 A, 具体的实现就是前端通过一个简单的表单页面 B 设置自定义http请求头的账户名和密码发送到nginx的一个路由,接受后校验账户密码通过add_header Set-Cookie xxxx设置cookie跳转到校验cookies的目标网站A, 在 A校验cookie,如果不对那么直接重定向到 B

nginx.conf

server {
    listen 80;
    server_name doc.xxx.com;
    location ^~/auth {
            set $flag 1;
            if ($http_auth_account != 'account') {
                set $flag 0;
            }
            if ($http_auth_password != 'password') {
                set $flag 0;
            }
            if ($flag = 1) {
                    add_header Set-Cookie "xxx_docs=12319bdb-14d7-43a7-aea6-1238053asdaf8"; // uuid
                    return 302 /;
            }
        alias /www/xxx-doc-auth/; // 校验页面的路径
        index index.html index.htm;
    }
    location ^~/ {
        if ($cookie_xxx_docs != "12319bdb-14d7-43a7-aea6-1238053asdaf8") {
                add_header Set-Cookie ""; // 如果cookie不对 清除cookie 重定向回鉴权页面
                return 302 /auth;
        }
        alias /www/xxx-doc/; // 文档地址路径
        index index.html;
    }
}

auth.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="account" placeholder="account" type="text">
    <input id="password" placeholder="password" type="password">
    <button onclick="go()">go</button>
</body>
</html>
<script>
    const getValue = id => document.getElementById(id).value
    const go = () => {
        const account = getValue('account')
        const password = getValue('password')
        const xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open('GET', '/auth', true)
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.setRequestHeader('auth-account', account)
        xhr.setRequestHeader('auth-password', password)
        xhr.send(null)
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4&&xhr.status ===200){
                window.location.href = xhr.responseURL
            }
        }
    }
</script>

总结

这样,一个简单的nginx的前端鉴权就做好了,主要用的也就是自定义请求头和接受请求头再一个cookie校验,虽然很简单,但是某种程度上也很省事~

更多阅读