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

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

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


Гитхаб

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


Предпосылки

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

  • Установка Node.js
  • Базовые знания JavaScript
  • Докер монтаж
  • экземпляр Appwrite; ознакомьтесь с этой статьей о том, как настроить экземпляр
  • Учетная запись GitHub (Создайте учетную запись здесь)


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

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

Nuxt создать новые команды приложения


Установка приложения

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

npm install nuxt-appwrite
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настройка nuxt.config для приложения

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

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

modules: [ 'nuxt-appwrite' ],
Войти в полноэкранный режим

Выйти из полноэкранного режима

В Appwrite также есть возможность установить цифровой океан одним щелчком мыши. капелька.


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

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

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

Создать проект на Appwrite

Нажав на Создать проект приведет нас на внутреннюю страницу, где мы можем добавить название нашего проекта. мы добавим appwrite_github как имя и нажмите Создавать.

внутренняя страница создания проекта для appwrite

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

Панель управления проектом Appwrite

Внутренняя страница позволяет нам скопировать Идентификатор проекта а также Конечная точка 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
Войти в полноэкранный режим

Выйти из полноэкранного режима


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

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

Активация GitHub Oauth2 на Apprwite

Из поставщиков OAuth2 мы будем искать поставщика GitHub для обновления своих настроек.

GitHub OAuth в Appwrite

Переключение поставщика GitHub приведет к просмотру Идентификатор приложения а также Секрет приложения поля для заполнения. Мы заполним эти поля в ближайшее время, но нам нужно принять к сведению предоставленный «URL-адрес перенаправления GitHub», так как он нам нужен для аутентификации на панели инструментов GitHub.

GitHub OAuth в настройках Appwrite


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

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

Мы можем создать приложение GitHub, перейдя к Настройки > Настройки разработчика > Приложения OAuth из нашего профиля или просто нажав здесь, автоматически приводя нас туда, где мы можем создать приложение. Оттуда мы добавим URL-адрес перенаправления GitHub из приложения Appwrite в URL-адрес обратного вызова для авторизации в приложении.

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

Мы закончим эту настройку, скопировав ID клиента а также Секреты клиента со страницы приложения на GitHub. Мы добавим эти ключи в пустые поля, показанные в наших настройках Appwrite GitHub Oauth2.

Получение учетных данных из приложения GitHub


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

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


Создание страницы входа

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

<template>
  <div class="bg-moon-gray vh-100 pa3 tc">
    <h2 class="black">Github authentication with Appwrite</h2>
    <div class="br3 bg-black ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4">
      <p class="f4">Click on this button to login</p>
        <button class="f6 link dim br3 pv2 ph2 mb2 dib white bg-green ba b--navy pointer mt3 mt0-l inline-flex items-center" @click="loginWithGithub">
          <span class="f6 ml2 pr2">Login with Github</span>
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init.js'
export default {
  methods: {
    loginWithGithub: async function(){
      try {
        await sdk.account.createOAuth2Session('github', 'http://localhost:3000/dashboard')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

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


Создание страницы панели инструментов

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

<template>
  <div class="bg-light-gray vh-100 pa3 tc">
    <h2 class="tc">Github authentication with Appwrite</h2>
    <div class="br3 bg-black ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l center mt5 ph4 pv4 mw6">
      <div class="f4 tl">
        <p class="green fw7">Name:</p>
        <p>{{name}}</p>
        <p class="mt4 green fw7">Email:</p>
        <p>{{email}}</p>
      </div>
      <button class="f5 link dim br3 pv2 ph3 mb2 dib white bg-dark-green ba b--black pointer mt4 mt0-l inline-flex items-center" @click="logOutWithGithub">
        Log out
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init';
  export default {
    data(){
      return{
        name: '',
        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)
        }
      },
      logOutWithGithub: async function(){
        try {
          await sdk.account.deleteSession('current')
          this.$router.push('/') 
        } catch (error) {
          console.log(error)
        }
      }
    }
  };
</script>
Войти в полноэкранный режим

Выйти из полноэкранного режима

С помощью приведенного выше фрагмента мы достигли следующего:

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

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

Окончательный обзор проекта


Вывод

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


Ресурсы

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