我正在尝试构建一个小的网页,该网页的登录由Firebase Google Auth控制,并随个人资料页面一起弹出。显示个人资料页面的安全且首选方式是什么?
当前,我正在使用onAuthStateChanged来操作特定的div,该div在用户登录时保存配置文件数据。如果用户未登录,则我正在使用removeChild()方法从DOM中删除该div,并在登录时appendChild()重新添加了该div。
答案 0 :(得分:0)
假设您正在使用firebase
的本机firebase.auth().onAuthStateChanged
函数
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
} else {
// No user is signed in.
}
});
还有firebase.auth().currentUser
来检查用户当前是否登录。
在这种情况下,最好使用removeChild
和appendChild
,并且它们不存在任何安全威胁,就像用户没有登录一样,刷新页面后所有信息都会消失
这是一个小的Firebase应用程序,它显示关闭与Firebase的连接并使用removeChild
时,由于Firebase断开连接,appendChild
停止工作,因此证明了使用安全性。
https://jsfiddle.net/vh9xay6e/
请注意,在此示例中,我不测试任何身份验证,而仅将Firebase与removeChild
和appendChild
一起使用。
您可以看到,一旦与Firebase的连接结束,前端端的任何情况都无法改变。
答案 1 :(得分:0)
使用onAuthStateChanged
方法,我们可以根据状态更改(登录或注销)进行操作
例如:
firebase.auth().onAuthStateChanged(user=>{
if(user){
document.getElementById("id").classList.remove('hide')
//this will populate your class which associate with above id.
} else{
document.getElementById("id_of_your_div").classList.add('hide')
}
})
我认为可以根据应用程序中Firebase身份验证状态的变化使用removeChild
和appendChild
方法。
答案 2 :(得分:0)
尝试通过以下方式连接代码: var userCurrent = firebase.auth()。currentUser;在功能上。
注意:请确保首先登录(作为异步操作),然后再更新用户数据为:
var authenticationRef = firebase.auth();
authenticationRef.onAuthStateChanged(function(user) {
if (user) {
console.log('onAuthStateChanged : '+user.displayName);
_updateUser();
} else {
console.log('Not login');
}
});
fucntion _updateUser(){
var userCurrent = firebase.auth().currentUser;
userCurrent.updateProfile({
displayName: "Karthik.S",
}).then(function() {
var displayName = userCurrent.displayName;
}, function(error) {
});
}