私人 next.js 网站上的简单密码保护

Question

我正在制作一个 next.js 应用程序，我花了几个小时寻找一种非常简单的密码保护应用程序的方法。（一小部分朋友会用到）

我已经尝试在我的反向代理上使用 Nginx 的 http 身份验证，这很有效，但由于登录不会持续很长时间，因此必须一直登录可能会很烦人。（Nginx 的http auth 好像'logout' 或者忘记授权很快）

我也不想深入研究像 NextAuth 这样复杂的东西。我不想要用户注册、自定义视图等等。

我只希望人们能够输入一个密码来查看网站。我希望它在他们的浏览器上持久存在，这样他们就不必一直使用 Nginx 的 http 身份验证登录。

有没有办法在用户通过 http 身份验证后给他们一个 cookie，然后在他们拥有 cookie 后允许他们进入？

任何人都可以提出一个相当简单的解决方案吗？提前致谢。

Answer 1

您可以使用 Nginx map 指令来做到这一点，它允许您根据另一个变量设置一个变量。

在您的 html 块内某处但在您设置地图指令的任何服务器块之外

map $cookie_trustedclient $mysite_authentication {
  default  "Your credentials please";
  secret-cookie-value off;
}

这里发生的事情是 Nginx 正在根据名为 trustedclient.

的 cookie 的值设置自定义变量 $mysite_authentication 的值

默认情况下 $mysite_authentication 将设置为 Your credentials please，除非您有一个名为 trustedclient 且值为 secret-cookie-value 的 cookie，在这种情况下 $mysite_authentication 将设置为 off

现在，在启用了基本身份验证的位置块中，您可以更改 auth_basic 指令以使用新变量，如下所示：

location /secretfiles {
    auth_basic $mysite_authentication;
    auth_basic_user_file .... 
    add_header Set-Cookie "trustedclient=secret-cookie-value;max-age=3153600000;path=/";
}

您可以在此处或在您的网站代码中设置 cookie。结果是 auth_basic 指令对于拥有正确 cookie 的人设置为 off，或者对于没有它的人密码框的显示消息。

不是超级安全，但对于大多数事情来说足够简单和好。

从您的配置中编辑：

# Map block can go here
map $cookie_trustedclient $mysite_authentication {
  default  "Your credentials please";
  secret-cookie-value off;
}

server {
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;
 #       ssl     on; # Delete this line, obsolete directive
        ssl_certificate /etc/nginx/cloudflare-ssl/certificate.pem;
        ssl_certificate_key     /etc/nginx/cloudflare-ssl/key.key;

        ssl_client_certificate        /etc/nginx/cloudflare-ssl/cloudflare.crt;
        ssl_verify_client on;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name ********.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
             #   auth_basic "Restricted Content"; # Now this becomes:
                auth_basic $mysite_authentication;
                auth_basic_user_file /etc/nginx/.htpasswd;
                add_header Set-Cookie "trustedclient=secret-cookie-value;max-age=3153600000;path=/";
        }
}

私人 next.js 网站上的简单密码保护

Simple password protection on private next.js site

nginx

express

reactjs

nextjs