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

Question

我有一个由 html/css/javascript 个文件组成的静态网站。网站自动生成，经常更新。

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

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

Answer 1

最好的方法是使用 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 2

我最终使用了 oauth2_proxy，这正是我想要的。

我配置为执行以下操作：

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

Answer 3

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

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

3)Load/append表示网站中的敏感内容使用了js。

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

这称为客户端身份验证。

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

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

What is the simplest way to restrict access to a static website using social auth

authorization

access-control

social-authentication