我有一个由 HTML/CSS/JavaScript 文件组成的静态网站。网站自动生成并经常更新。
我希望用户使用 Google Sign-in/openID Connect 进行身份验证,然后通过 Gmail 地址白名单控制访问,而不是使用用户名/密码(基本身份验证)授权访问网站。
最简单的设置方法是什么?
我最终使用了oauth2_proxy,这正是我正在寻找的。
我配置为执行以下操作:
向任何静态站点添加身份验证或门控内容的另一种方法:
1)首先加载一个静态容器页面(页眉、页脚)并使用Auth0、firebase、okta等实现用户身份验证js代码
2) 当用户成功登录后,进行 ajax api 调用并传递该 auth access_token 以检索敏感内容。
3)使用 js 加载/附加网站中的敏感内容。
当然,必须有一个服务器/无服务器函数来监听 ajax api 调用、对其进行身份验证并将内容发送回浏览器。
这称为客户端身份验证。
更多信息:https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/
最好的方法是使用 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>
查看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>