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

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 调用，通过该身份验证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