Блог

Главная - Вопросы по программированию - Какой предпочтительный способ отображения элементов DOM, зависящих от аутентификации firebase

Какой предпочтительный способ отображения элементов DOM, зависящих от аутентификации firebase

#javascript #firebase #firebase-authentication #server-side #client-side

#javascript #firebase #firebase-аутентификация #на стороне сервера #на стороне клиента

Вопрос:

Я пытаюсь создать небольшую веб-страницу, на которой вход в систему контролируется Firebase Google Auth и отображается на странице профиля. Каков безопасный и предпочтительный способ отображения страницы профиля?

В настоящее время я использую onAuthStateChanged для управления конкретным div, который содержит данные профиля при входе пользователя в систему. Если пользователь не вошел в систему, я использую removeChild() метод для удаления этого div из DOM и при входе в appendChild() систему добавляет обратно div.

Комментарии:

1. Каковы ваши проблемы с безопасностью, связанные с преждевременным отображением профиля div, поскольку предположительно данные будут храниться в Firebase, в которую пользователю необходимо будет войти перед доступом.

Ответ №1:

Предположим, вы используете 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 используется, appendChild перестает работать при отключении firebase, тем самым доказывая, что оно безопасно в использовании.

https://jsfiddle.net/vh9xay6e/

Обратите внимание, что в этом примере я не тестирую какую-либо аутентификацию, просто использование firebase с removeChild и appendChild .

Вы можете видеть, что после завершения подключения к Firebase ничто на стороне интерфейса не может изменить это.

Ответ №2:

Используя 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')
  }
})

Я думаю, что можно использовать removeChild appendChild метод and, основанный на изменениях состояния аутентификации firebase в вашем приложении.

Ответ №3:

попробуйте обойти свой код с помощью: 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) {

      });
  }