Как добавить аутентификацию Facebook в приложение Nuxt.js

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

В документации Appwrite описывается как самостоятельная платформа backend-as-a-service, которая предоставляет разработчикам все основные API, необходимые для создания любого приложения. Appwrite предоставляет решения, которые помогают в создании бэкенд-серверов для приложений.

Создание приложений без должной заботы об аутентификации подвергает данные приложения кибератакам. В этой статье мы рассмотрим, как аутентифицировать приложение Nuxt.js с помощью провайдера Facebook OAuth от Appwrite.

Github

Ознакомьтесь с полным исходным кодом здесь.

Предварительные условия

Для понимания этой статьи необходимо следующее:

• Установка Node.js
• Базовые знания JavaScript
• Установка Docker
• Экземпляр Appwrite; ознакомьтесь с этой статьей о том, как настроить экземпляр
• Учетная запись Facebook; регистрация совершенно бесплатна

Создание проекта Nuxt.js

Используйте npx create-nuxt-app <project-name> для создания нового проекта Nuxt.js.
Процесс создания проекта предоставит список опций, который должен выглядеть следующим образом:

После успешного создания проекта перейдем в нашу директорию и запустим наше приложение, выполнив следующую команду:

cd <project name>
npm run dev

Nuxt.js, в свою очередь, запустит среду разработки с горячей загрузкой, которая по умолчанию доступна по адресу http://localhost:3000.

Установка Appwrite

Чтобы использовать Appwrite, мы установим его в наш проект следующим образом:

npm install nuxt-appwrite

Настройка nuxt.config для Appwrite

Нам нужно настроить наше приложение Nuxt.js в файле nuxt.config, прежде чем мы сможем использовать Cloudinary.

Для этого мы зарегистрируем Appwrite для глобального использования в файле nuxt.config.js, добавив nuxt-appwrite в раздел modules:

modules: [ 'nuxt-appwrite' ]

Создание нового проекта Appwrite

Чтобы создать новый проект, запустите экземпляр Appwrite на вашей машине и перейдите на указанные имя хоста и порт http://localhost:80. Далее нам нужно войти в нашу учетную запись или создать ее, если у нас ее нет.

Подробнее о настройке Appwrite вы можете узнать здесь. В консоли нажмите на кнопку Создать проект.

Нажав на Create Project, мы попадем на внутреннюю страницу, где сможем добавить название нашего проекта. Мы добавим appwrite_facebook в качестве названия и нажмем кнопку Create.

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

Внутренняя страница позволяет нам скопировать ID проекта и конечную точку API для использования в нашем приложении Nuxt.js.

Затем мы создадим файл init.js в корневом каталоге нашего приложения Nuxt.js для инициализации Appwrite Web SDK, добавив блок кода ниже:

import { Appwrite } from 'appwrite';
export const sdk = new Appwrite();
sdk
  .setEndpoint('http://localhost/v1') // Replace this with your endpoint
  .setProject('***'); // Replace this with your ProjectID

Активация провайдера Facebook OAuth2 на Appwrite

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

Среди провайдеров OAuth2 мы обратим внимание на провайдера Facebook, чтобы обновить его настройки.

Переключение на провайдера Facebook приведет к появлению полей App ID и App Secret, которые необходимо заполнить. Мы заполним эти поля в ближайшее время, но нам нужно обратить внимание на «URL перенаправления Facebook», так как он нужен нам для аутентификации на панели Facebook.

Создание приложения на Facebook

Провайдер Facebook OAuth от Appwrite требует, чтобы мы создали приложение на Facebook из панели разработчика. Ознакомьтесь с этой исчерпывающей документацией по созданию учетной записи разработчика Facebook и приложения.

После создания приложения Facebook мы переходим на вкладку Settings > Basic.
Оттуда мы добавим URL перенаправления Facebook из приложения Appwrite в URL сайта.

Завершим настройку копированием App ID и App Secret. Мы добавим эти ключи в пустые поля, указанные в настройках Appwrite Facebook Oauth2.

Построение аутентификации в Nuxt.js

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

Создание страницы входа в систему
Страница входа — это точка входа в приложение, где пользователи проходят аутентификацию. Чтобы создать ее, мы обновим pages/index.vue с помощью приведенного ниже кода:

<template>
  <div class="bg-light-gray vh-100 pa3 tc">
    <h2>Facebook authentication with Appwrite</h2>
    <div class="br3 bg-white ba dark-gray b--black-10 shadow-3 w-100 w-60-m w-30-l mw5 center mt5 ph4 pv4">
      <p>Click on this button to login</p>
        <button class="f6 link dim br3 pv2 ph2 mb2 dib white bg-navy ba b--navy pointer mt3 mt0-l inline-flex items-center" @click="loginWithFacebook">
          <svg class="dib h2 w1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
          <span class="f6 ml2 pr2">Login with Facebook</span>
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init.js'
export default {
  methods: {
    loginWithFacebook: async function(){
      try {
        await sdk.account.createOAuth2Session('facebook', 'http://localhost:3000/dashboard')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

В блоке кода мы добились следующего:

• Тег <template> содержит разметку для отображения пользовательского интерфейса входа в систему
• Импортировали SDK Apprwite, инициализированный в файле init.js.
• Мы создали асинхронную функцию loginwithFacebook, которая использует импортированный Appwrite SDK; внутри этой функции мы добавили метод Appwrite createOAuth2Session, который получил следующее:
  • URL перенаправления, куда направляются пользователи после успешной аутентификации.

Создание страницы приборной панели

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

<template>
  <div class="bg-light-gray vh-100 pa3 tc">
    <h2 class="tc">Facebook authentication with Appwrite</h2>
    <div class="br3 bg-white ba dark-gray b--black-10 shadow-3 w-100 w-60-m w-30-l center mt5 ph4 pv4 mw6">
      <div class="f4 tl">
        <p class="navy fw7">Name:</p>
        <p>{{name}}</p>
        <p class="mt4 navy fw7">Email:</p>
        <p>{{email}}</p>
      </div>
      <button class="f6 link dim br3 pv2 ph3 mb2 dib white bg-navy ba b--navy pointer mt4 mt0-l inline-flex items-center" @click="logOutWithFacebook">
        Log out
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init';
  export default {
    data(){
      return{
        namme: '',
        email: '',
        response: ''
      }
    },
    mounted: function(){
        this.getUserSession()
    },
    methods: {
      getUserSession: async function(){
        try {
          this.response = await sdk.account.get()
          if (this.response) {
            this.name = this.response.name,
            this.email = this.response.email 
          }

        } catch (error) {
          console.log(error)
        }
      },
      logOutWithFacebook: async function(){
        try {
          await sdk.account.deleteSession('current')
          this.$router.push('/') 
        } catch (error) {
          console.log(error)
        }
      }
    }
  };
</script>

Приведенный выше фрагмент делает следующее:

• Добавлен тег <template> для отображения информации о пользователе
• Импортирован SDK Appwrite, инициализированный в файле init.js.
• Обновил свойство data с name, email, и response для хранения информации о пользователе
• Создана функция getSession, которая выполняется, когда приложение монтируется. Эта функция получает информацию о вошедшем в систему пользователе и обновляет переменные, объявленные в свойстве data, этой информацией.
• Добавлена функция logOutWithFacebook, которая связана с методом Appwrite deleteSession, функция logOutWithFacebook выводит пользователя из приложения и немедленно направляет его на домашнюю страницу.

На данном этапе приложение должно выглядеть следующим образом:

Заключение

Эта статья объясняет, как добавить аутентификацию в приложение с помощью OAuth2 провайдера Facebook в Appwrite.

Ресурсы

Вот некоторые ресурсы, которые могут быть полезны:

• Создание локального экземпляра Appwrite в 3 шага
• Документация по API учетной записи Appwrite