使用社交身份验证限制访问静态网站的最简单方法是什么

Question

我有一个由 HTML/CSS/JavaScript 文件组成的静态网站。网站自动生成并经常更新。

我希望用户使用 Google Sign-in/openID Connect 进行身份验证，然后通过 Gmail 地址白名单控制访问，而不是使用用户名/密码（基本身份验证）授权访问网站。

最简单的设置方法是什么？

Answer 1

我最终使用了oauth2_proxy，这正是我正在寻找的。

我配置为执行以下操作：

• oauth2_proxy 监听 0.0.0.0:443
• 用户连接时，将启动 Google 登录流程
• 登录后，它会根据白名单验证用户的电子邮件地址
• 验证成功后，oauth2_proxy 将请求代理到监听 127.0.0.1:8080 的上游 nginx 服务器

Answer 2

向任何静态站点添加身份验证或门控内容的另一种方法：
1）首先加载一个静态容器页面（页眉、页脚）并使用Auth0、firebase、okta等实现用户身份验证js代码

2) 当用户成功登录后，进行 ajax api 调用并传递该 auth access_token 以检索敏感内容。

3）使用 js 加载/附加网站中的敏感内容。

当然，必须有一个服务器/无服务器函数来监听 ajax api 调用、对其进行身份验证并将内容发送回浏览器。

这称为客户端身份验证。

更多信息：https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/

Answer 3

最好的方法是使用 Firebase Auth！ 请访问 https://firebase.google.com/docs/auth/

查看

您可以通过这种方式检查用户是否通过身份验证。

<script type="text/javascript">

        function initApp() {
          // Listening for auth state changes.
          // [START authstatelistener]
          firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
              //User is signed in.
                  if (!emailVerified) {
              //Additional check for email verification
              }
            } else {
              // User is signed out.
            }
          });
          // [END authstatelistener]
        }
        window.onload = function () {
          initApp();
        };
      </script>

Answer 4

查看https://authorizer.dev/。它是免费且开源的。

本教程介绍如何开始静态站点（遵循 UMD 部分）：https://docs.authorizer.dev/authorizer-js

<script src="https://unpkg.com/@authorizerdev/authorizer-js/lib/authorizer.min.js"></script>

<script type="text/javascript">
    const authorizerRef = new authorizerdev.Authorizer({
        authorizerURL: `YOUR_AUTHORIZER_INSTANCE_URL`,
        redirectURL: window.location.origin,
        clientID: 'YOUR_CLIENT_ID', // obtain your client id from authorizer dashboard
    });

    // use the button selector as per your application
    const logoutBtn = document.getElementById('logout');
    logoutBtn.addEventListener('click', async function () {
        await authorizerRef.logout();
        window.location.href = '/';
    });

    async function onLoad() {
        const res = await authorizerRef.authorize({
            response_type: 'code',
            use_refresh_token: false,
        });
        if (res && res.access_token) {
            // you can use user information here, eg:
            const user = await authorizerRef.getProfile({
                Authorization: `Bearer ${res.access_token}`,
            });
            const userSection = document.getElementById('user');
            const logoutSection = document.getElementById('logout-section');
            logoutSection.classList.toggle('hide');
            userSection.innerHTML = `Welcome, ${user.email}`;
        }
    }
    onLoad();
</script>

这是视频演示：https://youtu.be/uQka5O2RwpU?t=97