Как создать приложение Vue Survey с использованием аутентификации и базы данных Firebase — Smashing Magazine

В этом В этом руководстве вы создадите приложение Survey, в котором вы научитесь проверять данные форм наших пользователей, внедрять аутентификацию в Vue и сможете получать данные опросов, используя Vue и Firebase (платформа BaaS).

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

Кроме того, приложение будет обрабатывать вход в систему пользователя с успокоительными API. Он будет использовать Authguard в маршрутизаторе Vue, чтобы запретить пользователям, не вошедшим в систему, доступ к форме опроса и успешно отправлять данные опроса зарегистрированных пользователей в защищенную базу данных.

Просто так мы находимся на той же странице, давайте выясним, что такое Firebase и что он будет делать в этом уроке. Firebase — это набор инструментов для «создания, улучшения и расширения вашего приложения», он предоставляет вам доступ к большой части сервисов, которые разработчики обычно должны создавать сами, но на самом деле не хотят создавать, потому что они предпочитают сосредоточиться на самом приложении опыта. Это включает в себя такие вещи, как аналитика, аутентификация, базы данных, хранилище файлов и список в дальнейшем.

Это отличается от разработки традиционных приложений, которая обычно включает в себя написание как внешнего, так и внутреннего программного обеспечения. Код внешнего интерфейса просто вызывает конечные точки API, предоставляемые бэкендом, и код бэкэнда фактически выполняет свою работу. Тем не менее, с продуктами Firebase традиционный бэкэнд обходится, вкладывая всю работу в клиента. Технически это позволяет внешним инженерам, таким как я, создавать полнофункциональные приложения, пишущие только внешний код.

Суть в том, что Firebase будет выступать в качестве нашего бэкенда в этом проекте, предоставляя нам необходимые конечные точки API для обрабатывать наши требования к аутентификации и базе данных. В конце вы создадите функциональное приложение для опросов с использованием Vue + Firebase. После этого вы можете создать любое веб-приложение по вашему выбору, используя те же процессы, даже с пользовательским бэкэндом.

Для этого на вашем компьютере должны быть установлены Node и npm / yarn. Если вы этого еще не сделали, следуйте этим кратким инструкциям, чтобы установить пряжу или npm на свою машину. Вы также должны иметь общее представление о синтаксисе маршрутизатора Vue, Vuex и Vue для этого учебного пособия.

Начальные файлы для этого учебного пособия находятся здесь, который содержит базовые файлы для этого проекта, а вот репозиторий для законченного демо. Вы можете клонировать или загрузить репозитории и запустить npm install в своем терминале.

После установки начального файла вы увидите страницу приветствия, на которой есть варианты, чтобы зарегистрироваться и подписать в. После входа в систему вы можете получить доступ к опросу.

Не стесняйтесь создавать новый проект, если вы хотите построить этот проект самостоятельно, просто убедитесь, что Vuex, Vue router, Vuelidate и axios включены в Vue. проект. Итак, давайте перейдем прямо к следующему:

Во-первых, нам понадобится учетная запись Firebase, чтобы настроить этот проект, который очень похож на создание контейнера для нашего приложения, предоставляя нам доступ к базе данных, различные средства аутентификации, хостинг и т. д. Настроить сразу после того, как вы окажетесь на сайте Firebase, очень просто.

Теперь, когда у нас есть наш проект, Следующим шагом является настройка нашей системы аутентификации и базы данных (базы данных в реальном времени) на Firebase.

• Нажмите на опцию «аутентификация»;
• Настройте «метод входа ”Мы хотим (в данном случае адрес электронной почты / пароль).

• Нажмите «База данных».
• Выберите «База данных в реальном времени» и скопируйте эту ссылку сверху.

Это будет очень полезно в качестве конечной точки API, когда мы хотим отправить данные в нашу базу данных firebase.

Мы будем называть этот API как API базы данных. Чтобы использовать его, вам нужно будет добавить имя базы данных по вашему выбору при отправке. Например, для отправки в базу данных с именем пользователя. Вы просто добавляете user.json в конце:

  {databaseAPI} /user.json  

После этого мы перейдем к документации Firebase auth rest API для получения нашей регистрации и входа в конечные точки API. В этих конечных точках понадобится ключ API нашего проекта, который можно найти в настройках нашего проекта.

Проверка

Вернемся к нашему коду, будет проверка Данные регистрации перед отправкой на сервер, просто чтобы убедиться, что пользователь отправляет соответствующую информацию. Мы будем использовать Vuelidate — классную библиотеку, которая упрощает проверку в Vue. Прежде всего, установите Vuelidate в проект:

  npm i vuelidate  

Перейдите на src / components / auth / signup.vue и внутри тег сценария import vuelidate и все необходимые события, которые нам понадобятся из библиотеки, как показано ниже.

Примечание : Вы можете проверить документы для полного обзора библиотека и все доступные события.

  import {обязательный, электронная почта, числовой, minValue, minLength, sameAs} из 'vuelidate / lib / validators'  

Краткое объяснение:

[1 9459042]

Также импортируйте axios чтобы иметь возможность отправить HTTP-запрос на сервер :

  импорт axios из 'axios'  

Прежде чем мы продолжим, нам нужно добавить некоторые правила в базу данных, чтобы иметь возможность проверять электронную почту, поскольку мы следует, как показано ниже:

  "read" = "true"  

Это означает, что база данных может быть прочитана без каких-либо помех со стороны клиента.

  "write" = "auth"! == null  

Вы не можете писать в базу данных, если вы не являетесь аутентифицированным пользователем.

  "Пользователи" = {
  "onIndex": ["email"]
}  

Это позволяет нам запрашивать документ users с индексом email . То есть вы можете буквально отфильтровать базу данных по уникальному адресу электронной почты.

Затем добавьте пользовательское вычисляемое свойство с именем validations как у нас есть методы, вычисления и т. Д.

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

 
    проверки: {
      электронное письмо: {
        требуется,
        электронное письмо,
        уникальный: val => {
          if (val === '') возвращает true
          return axios.get ('https://vue-journal.firebaseio.com/users.json?orderBy= "email" & equalTo = "' + val + '"')
            .then (res => {
              return Object.keys (res.data) .length === 0
            })
        }
      }
    }  

Затем в уникальном запросите базу данных, используя axios, и используйте объектный ключ по умолчанию для возврата ответа, только если его длина равна 0.

Для возраста, Вы добавите обязательное, числовое и минимальное значение 18, которое присваивается minVal в качестве его свойств.

  age: {
        требуется,
        числовой,
        minVal: minValue (18)
      }  

Требуются свойства пароля, с минимальной длиной 6, назначенной для minLen .

  пароль: {
        требуется,
        minLen: minLength (6)
      }  

Подтверждение пароля свойства в основном должны совпадать с паролем.

  Подтверждение пароля: {
        sameAs: sameAs (vm => {
          вернуть vm.password
        })
      }  

Чтобы сообщить пользователю, что электронное письмо принято, используйте v-if чтобы проверить, является ли unique истинным или ложным. Если true, то это означает, что длина возвращаемого объекта равна 0, и электронная почта все еще может использоваться, а также наоборот.

Таким же образом вы можете проверить, является ли введенный пользователем фактический адрес электронной почты, используя v-if .

И для всех окружающих элементов div на отдельном входе мы добавим класс недействительных, который станет активным, если на этом входе будет ошибка.

Чтобы привязать события проверки к каждому входу в HTML, мы используем $ touch () как видно из электронной почты ниже.

  

  
 Пожалуйста, укажите действующий адрес электронной почты. 
  
 Этот адрес электронной почты был занят. 

  

Возраст пароль и verifyPassword будут привязаны к их вводу в HTML аналогичным образом как электронное письмо .

И мы сделаем кнопку «Отправить» неактивной, если есть ошибка в любом из входных данных.

   create   

Вот полный пример CodePen для этого раздела vuelidate.

Аутентификация

Это приложение является SPA и не перезагружается, как традиционные сайты, поэтому мы будем использовать Vuex, как наш единственный «источник правды» чтобы каждый компонент нашего приложения был в курсе общего статуса аутентификации. Мы переходим к нашему файлу хранилища и создаем оба метода входа / регистрации в действиях.

Ответ (токен и userId ) получен при отправке данные пользователей будут храниться в нашем штате. Это важно, потому что токен будет использоваться для того, чтобы узнать, вошли ли мы в систему или нет на каком-либо этапе нашего приложения.

Токен userId ] и пользователь создаются в состоянии с начальным значением null. Мы доберемся до пользователя намного позже, но сейчас сосредоточимся на первых двух.

  состояние: {
  idToken: ноль,
  userId: null,
  пользователь: null
}  

Затем создаются мутации для изменения состояния при необходимости.

  мутации: {
  authUser (state, userData) {
    state.idToken = userData.token
    state.userId = userData.userId
  },
  storeUser (состояние, пользователь) {
    state.user = пользователь
  },
  clearAuthData (state) {
    state.idToken = null
    state.userId = null
    state.user = null
  }
}  

Для регистрации / входа нам нужно создать отдельные действия для обоих, где мы отправляем наши запросы на авторизацию на сервер. После чего наш ответ (токен и userId) от регистрации / входа фиксируется в authUser и сохраняется в локальном хранилище.

  регистрация ({commit, dispatch}, authData ) {
      axios.post ('https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=AIzaSyCFr-OMMzDGp4Mmr0t66w2cTGfNazYjptQ', {
        электронная почта: authData.email,
        пароль: authData.password,
        returnSecureToken: true
      })
        .then (res => {
          console.log (RES)
          commit ('authUser', {
            токен: res.data.idToken,
            userId: res.data.localId
          })
          localStorage.setItem ('token', res.data.idToken)
          localStorage.setItem ('userId', res.data.localId)
          localStorage.setItem («электронная почта», res.data.email)
          рассылка ('storeUser', authData)
       
          setTimeout (function () {
            router.push ( '/ панель')
          } 3000)
        })
        .catch (ошибка => console.log (ошибка))
    }  

  login ({commit}, authData) {
      axios.post ('https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=AIzaSyCFr-OMMzDGp4Mmr0t66w2cTGfNazYjptQ', {
        электронная почта: authData.email,
        пароль: authData.password,
        returnSecureToken: true
      })
        .then (res => {
          console.log (RES)
          localStorage.setItem ('token', res.data.idToken)
          localStorage.setItem ('userId', res.data.localId)
          localStorage.setItem («электронная почта», res.data.email)
          commit ('authUser', {
            токен: res.data.idToken,
            userId: res.data.localId
          })
          router.push ( '/ панель')
        })
        .catch (error => console.log (error.message))
    }  

Но вот сложная часть, что мы будем делать с действием регистрации, в частности, отправлять только электронную почту и пароль для регистрации в базе данных аутентификации. В реальном смысле у нас нет доступа к использованию данных в этой базе данных аутентификации, и мы не отправляли никаких регистрационных данных, кроме электронной почты / пароля.

Итак, что мы будем делать создать другое действие для отправки полных регистрационных данных в другую базу данных. В этом отдельном документе базы данных у нас будет полный доступ ко всей информации, которую мы решили сохранить там. Мы назовем это новое действие называемым storeUser

Затем мы перейдем к нашему действию регистрации и отправим весь объект, содержащий наши данные регистрации, в базу данных, к которой у нас теперь есть доступ через storeUser .

Примечание: Возможно, вы не захотите отправлять пароль своего пользователя с storeUser в базу данных из соображений безопасности.

  storeUser ({state}, userData) {
      if (! state.idToken) {
        возвращение
      }
      axios.post ('https://vue-journal.firebaseio.com/users.json' + '? auth =' + state.idToken, userData)
        .then (res => console.log (res))
        .catch (ошибка => console.log (ошибка))
    }
  }  

storeUser добавляет запрос, используя наш недавно полученный токен и API базы данных при публикации в базу данных.

Это потому, что мы не можем писать в наша база данных, за исключением того, что мы заверены с нашим доказательством (токен). Это правило, которое мы дали Firebase в начале, помните?

  «write» = «auth»! == null  

Полный код для регистрации / подписи -in действия прямо здесь.

Затем отправьте регистрацию и вход из своих компонентов в рамках метода onSubmit соответствующим действиям в магазине.

  методы: {
  onSubmit () {
    const signupData = {
      электронная почта: this.email,
      имя: это.имя,
      возраст: this.age,
      пароль: этот пароль
      Подтвердите пароль: this.co
      nfirmPassword
    }
    this. $ store.dispatch ('регистрация', регистрация данных)
    }
  }
}  

Примечание: signupData содержит данные формы.

  методы: {
  onSubmit = {
    const formData = {
      электронная почта: this.email,
      пароль: этот пароль
    }
    this. $ store.dispatch ('login', {email: formData.email, пароль: formData.password})
  }
}  

AuthGuard

Необходимо, чтобы AuthGuard не давал пользователям, не вошедшим в систему, доступ к панели управления, куда они будут отправлять опрос.

Перейдите в файл маршрута и импортируйте наш магазин.

  Импортируйте хранилище из './store'

В маршруте перейдите к пути на панели инструментов и добавьте следующее:

  const route = [
  { path: '/', component: WelcomePage },
  { path: '/signup', component: SignupPage },
  { path: '/signin', component: SigninPage },
  {
    path: '/dashboard',
    component: DashboardPage,
    beforeEnter (to, from, next) {
      if (store.state.idToken) {
        next()
      } else {
        next('/signin')
      }
    }
  }
]  

Все, что нужно сделать, это проверить, есть ли токен в состоянии, если да, мы даем доступ к панели управления и наоборот.

LogOut

Чтобы создать нашу опцию выхода из системы, мы будем использовать clearAuth который мы создали ранее под мутациями которые просто устанавливают оба токена и userId — null .

Теперь мы создаем новый выход из системы action который фиксирует clearAuth удаляет локальное хранилище и добавляет router.replace ('/') для полного перенаправления пользователя.

  действия: {
  выход ({commit}) {
    совершить ( 'clearAuth')
    localStorage.removeItem ( 'маркер')
    localStorage.removeItem ( 'идентификатор пользователя')
    router.replace ( '/')
  }
 }  

В компоненте заголовка у нас есть метод onLogout который отправляет наше действие выхода из системы в хранилище.

  методы: {
      onLogout () {
        это. $ store.dispatch ( 'выход из системы')
      }
    }  

Затем мы добавляем @click к кнопке, которая запускает метод onLogout как мы видим здесь.

  ] 
 Выйти 
  

UI_State

Теперь, когда мы дали условный доступ к панели мониторинга, следующий шаг — удалить ее из панели навигации, поэтому только авторизованные пользователи могут просматривать его. Для этого мы добавили бы новый метод в getters с именем ifAuthenticated который проверяет, равен ли токен в нашем состоянии нулю. Когда есть токен, он показывает, что пользователь прошел аутентификацию, и мы хотим, чтобы они увидели опцию панели мониторинга на навигационной панели.

  getters: {
  isAuthenticated (state) {
    вернуть state.idToken! == null
  }
}  

После этого вы возвращаетесь к компоненту заголовка и создаете метод auth под computed, который отправляет нашему isAuthenticated в пределах getters мы только что создали в магазине. Это означает, что isAuthenticated вернет false, если токена нет, что означает, что auth также будет нулевым, и наоборот.

  вычислено: {
      auth () {
        вернуть это. $ store.getters.ifAuthenticated
      }
    }  

После этого мы добавляем v-if в наш HTML, чтобы проверить, является ли auth нулевым или нет, определяя, будет ли эта опция отображаться на панель навигации.

  

           Панель 
        
        

           Регистрация 
        
        

           Войти 
        
  

• Полный код раздела состояния пользовательского интерфейса вы найдете здесь.

AutoLogin

Когда мы перезагружаем наше приложение, мы теряем данные и выходим из системы, и приходится начинать все сначала. Это потому, что наш токен и Id хранятся в Vuex, который является javascript, и это означает, что наше приложение перезагружается с браузером при обновлении.

И, наконец, что мы будем делать, чтобы получить токен в нашем локальном хранилище. Таким образом, мы можем иметь токен пользователя в браузере независимо от того, когда мы обновляем окно, и иметь метод автоматического входа пользователя в систему, если токен все еще действителен.

Новый Actions создан метод AutoLogin где мы получим токен и userId из локального хранилища и передадим наши данные в authUser ] метод в мутациях.

  действия: {
  AutoLogin ({commit}) {
      const token = localStorage.getItem ('token')
      if (! token) {
        возвращение
      }
      const userId = localStorage.getItem ('userId')
      const token = localStorage.getItem ('token')
      commit ('authUser', {
        idToken: токен,
        userId: userId
      })
  }
}  

Затем мы заходим в наш App.vue и пишем метод созданный который будет отправлять autoLogin из нашего магазина каждый раз, когда приложение загружен.

  создан () {
    это. $ store.dispatch ( 'AutoLogin')
  }  

Fetch_User_Data

Мы хотим приветствовать пользователя на панели мониторинга, отображая его имя. Итак, создается другое действие, называемое fetchUser которое сначала проверяет, есть ли токен как обычно. Затем он продолжает получать электронную почту из локального хранилища и запрашивает базу данных, как это было сделано ранее, с проверкой электронной почты.

Возвращает объект, содержащий данные пользователя, первоначально отправленные во время регистрации. Затем мы конвертируем этот объект в массив и фиксируем его в первоначально созданной мутации storeUser .

  fetchUser ({commit, state}) {
  if (! state.idToken) {
    возвращение
  }
  const email = localStorage.getItem ('email')
  axios.get ('https://vue-journal.firebaseio.com/users.json?orderBy= "email" & equalTo = "' + email + '"')
    .then (res => {
      console.log (RES)
    
     // const users = []
      console.log (res.data)
      const data = res.data
      const users = []
      для (введите данные) {
        const user = data [key]
        user.id = ключ
        users.push (пользователь)
        console.log (пользователей)
      }
     commit ('storeUser', пользователи [0])
    })
    .catch (ошибка => console.log (ошибка))
}  

После чего мы создаем еще один метод получения с именем user который возвращает state.user уже зафиксированный через storeUser .

  геттеры: {
  пользователь (штат) {
    вернуть state.user
  },
  isAuthenticated (state) {
    вернуть state.idToken! == null
  }
}  

Возвращаясь к инструментальной панели, мы создаем новый вычисляемый метод с именем name который возвращает state.user.name только при наличии пользователя.

  вычислено: {
  имя () {
      вернуть! this. $ store.getters.user? false: this. $ store.getters.user.name
    }
  },
  создал () {
    это. $ store.dispatch ( 'fetchUser')
  }
}  

И мы также добавим вычисленное свойство созданный для отправки действия fetchUser после загрузки страницы. Затем мы используем v-if в нашем HTML для отображения имени, если имя существует.

  
 Добро пожаловать, {{name}} 
  

Send_Survey

Чтобы отправить опрос, мы создадим действие postData которое отправит данные в базу данных с использованием API базы данных с токеном, показывающим сервер, на котором зарегистрирован пользователь.

  postData ({state}, surveyData) {
  if (! state.idToken) {
    возвращение
  }
  axios.post ('https://vue-journal.firebaseio.com/survey.json' + '? auth =' + state.idToken, surveyData)
    .then (res => {
     console.log (RES)
    })
    .catch (ошибка => console.log (ошибка))
}  

Мы возвращаемся к компоненту панели мониторинга и отправляем данные нашему действию postData в хранилище.

  методы: {
  onSubmit () {
    const postData = {
      цена: эта цена
      долго: это долго,
      комментарий: this.comment
    }
    console.log (PostData)
    this. $ store.dispatch ('postData', postData)
  }
}  

Там у нас это есть, у нас есть много полезных функций, реализованных в нашем демонстрационном приложении при взаимодействии с нашим сервером Firebase. Надеемся, что вы будете использовать эти мощные функции в своем следующем проекте, поскольку они очень важны для создания современных веб-приложений сегодня.

Если у вас есть какие-либо вопросы, вы можете оставить их в разделе комментариев, и я ' Я буду рад ответить на каждый из них!

• Демонстрация учебного курса доступна здесь.

Другие ресурсы, которые могут оказаться полезными, включают:

• Чтобы узнать больше о Firebase и других сервисах, которые он предлагает, ознакомьтесь с Крисом Эсплином статья «Что такое Firebase?»
• «Vuelidate» — действительно хорошая библиотека, в которую нужно действительно покопаться. Вы должны прочитать его документацию, чтобы получить полное представление. Http://vuelidate.js.org/.
• Вы также можете исследовать axios самостоятельно, особенно если вы хотите использовать его в более крупных проектах.

(ra, yk, il)