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

Posted 2023-03-08

【中文标题】使用社交身份验证限制访问静态网站的最简单方法是啥

【英文标题】：What is the simplest way to restrict access to a static website using social auth使用社交身份验证限制访问静态网站的最简单方法是什么

【发布时间】：2018-11-21 09:17:13

【问题描述】：

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

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

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

【参考方案1】：

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

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

3) 使用 js 在站点中加载/附加敏感内容。

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

这称为客户端身份验证。

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

【参考方案2】：

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

我配置为执行以下操作：

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

【参考方案3】：

最好的方法是使用 Firebase 身份验证！ 查看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>

【讨论】：

嗨 Rahul，我考虑过 Firebase 身份验证，但遇到了一些困难。我创建了一个firebase项目，启用了谷歌登录方法，创建了一个登录页面，并使用我的谷歌帐户成功登录。但由于您无法使用 Firebase 托管配置规则（请参阅***.com/questions/48753740/…），因此剩下的唯一选择是使用 Firebase 存储。似乎没有办法使用 Firebase 存储为由多个文件和相对链接组成的静态网站提供服务。有什么想法吗？

也可以在这里查看：***.com/questions/27212004/…

好吧，您可以动态检查用户是否登录到 firebase 或未使用 Javascript 中的某些 firebase 函数。取决于您可以显示内容或选择在未通过身份验证时隐藏它们（您可以使用任何前端框架来阻止显示内容，而不仅仅是设置 display:none）

@catanman 检查更新的答案，看看你是否明白我想说的。

我最终找到了一个不需要任何代码的更简单的解决方案。