Я проведу очень простую настройку приложения. Бэкэнд узла с интерфейсом vue. Если у вас уже есть задняя и внешняя настройки и вам просто нужна часть Firebase Auth, переходите сюда.

Если вам просто нужен пример кода, я понял. "Ну вот."

Бэкэнд Node.js

Вам нужно будет установить node и npm. Если вы этого не сделаете, вы можете сделать это здесь: https://nodejs.org/en/.

Мы создадим наше базовое приложение из экспресс-генератора. Откройте свой терминал и установите его с помощью npm i -g express-generator. Теперь создайте папку mkdir fbAuthDemo и войдите в нее cd fbAuthDemo. Теперь используйте экспресс-генератор, чтобы создать серверную часть нашего узла express server. Теперь откройте это в текстовом редакторе, мне code .. Вы должны увидеть что-то похожее на это:

Сразу же удалим папки public/, routes/ и views/, они нам не понадобятся. Вы также можете удалить вызовы app.use(<route>, <func>), а также обработчики ошибок, просмотреть вызовы настройки механизма и все неиспользуемые в настоящее время операции импорта. Теперь ваш app.js должен выглядеть так:

Теперь добавим один базовый маршрут:

Мы можем проверить это, запустив наше приложение (npm install && npm i nodemon, если вы еще этого не сделали), а затем DEBUG=server:* nodemon start. Затем перейдите в конечную точку в Postman, curl или в браузере, выбрав маршрут http://localhost:3000/. Вы должны вернуться:

Наконец, давайте добавим фиктивную функцию для авторизации, которую мы заполним логикой Firebase позже. Мы добавим фиктивное логическое значение authorized и будем использовать его в некотором настраиваемом промежуточном программном обеспечении для проверки аутентификации. Если пользователь авторизован, мы продолжим, а если нет, мы отправим обратно 403: Unauthorized. Выше app.get(..):

Теперь вы должны иметь доступ к маршруту, когда authorized = true, и быть заблокированным, когда authorized = false.

И последнее, прежде чем мы перейдем к интерфейсу, нам нужно будет добавить корс, чтобы наш интерфейс мог взаимодействовать с сервером. Это очень просто, просто npm i cors, а затем добавьте эти две строки в свой app.js:

Наш окончательный файл app.js должен выглядеть так:

Интерфейс Vue.js

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

Мы начнем так же, как и с серверной частью. В вашем терминале перейдите в созданную нами папку fbAuthDemo/. Мы собираемся использовать vue cli для создания экземпляра нашего проекта, поэтому, если у вас его нет, npm i -g @vue/cli. Тогда вы можете vue create client. Я выбираю параметры вручную и обычно использую только Babel и для простоты помещаю его в package.json. После завершения vue cli мы перейдем в клиентскую папку cd client и откроем ее в нашем редакторе кода code .. Это должно выглядеть примерно так

Мы можем запустить это в терминале с помощью npm run serve и проверить страницу по умолчанию.

Нам не нужны все эти ссылки, поэтому давайте перейдем к src/components/HelloWorld.vue и удалим их. Мы избавимся от всего в основном <div> под тегами <h1>{{ msg }}</h1>. Затем давайте добавим кнопку и собственный тег p.

Вы должны заметить две вещи: мы используем классы начальной загрузки и ссылаемся на переменную response, которую нам еще предстоит определить. Давайте сначала определим переменную, а затем добавим начальную загрузку в наш проект, чтобы все выглядело хорошо.

Чтобы добавить переменную ответа, нам нужно предоставить нашему компоненту Vue свойство data. Теперь помните, это должна быть функция (я потратил на это слишком много времени).

Теперь перейдите к public/index.html и добавьте в заголовок CDN-ссылку Bootstrap:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Теперь все должно выглядеть красиво, и у нас есть все переменные для отображения наших данных. Но как насчет кнопки Отправить запрос? Что ж, давайте создадим метод в нашем компоненте Vue и привяжем его к нашей кнопке. Что будет делать этот метод? Отправьте заявку конечно! Для этого воспользуемся аксиомами. Идите вперед и npm i axios в свой проект, а затем в тегах скрипта компонента Vue мы можем импортировать аксиомы и создать с их помощью клиента.

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

Теперь привяжем это к нашей кнопке:

<button @click="sendRequest" class="btn btn-outline-success my-4">Send Request ></button>

Наш последний HelloWorld.vue файл на этом этапе должен выглядеть так:

Теперь, если мы запустим наш сервер, как раньше DEBUG=server:* nodemon start, а наш клиент, как раньше npm run serve, мы должны увидеть, что мы получили ответ «Hello World!» От нашего сервера и отобразили для нас:

Если вместо этого вы получаете сообщение «Ошибка: запрос завершился неудачно, код состояния 403!», Это потому, что вы оставили фиктивную переменную authorized на сервере, установленную на false. Так что переключите его обратно и проверьте, что он работает. Или переключите его на false и убедитесь, что фиктивная функция authCheck работает. В любом случае, теперь мы готовы реализовать аутентификацию Firebase на нашем пользовательском сервере!

Добавление Firebase Auth в наш настраиваемый бэкэнд

Если вы следовали первым двум частям, у вас должен быть рабочий сервер, связанный с вашим рабочим интерфейсом. Или, если у вас есть собственные серверные и внешние интерфейсы, настроенные и подключенные, это будет работать так же хорошо, пока Firebase поддерживается на языках, которые вы использовали для этого. (Вероятно, это так). Возможно, вам просто придется немного изменить эти инструкции (возможно, вы используете pip, а не npm, и ваш код будет выглядеть иначе, просто проверьте docs и т. Д.)

Перво-наперво, перейдите на firebase и создайте новый проект. Называйте это как хотите, и я рекомендую не использовать Google Analytics, в этом проекте нет смысла. После этого нам нужно добавить это в наш Vue и бэкэнд. Почему оба? Хорошо…

Чтобы проверить это, нам нужно будет использовать Firebase Auth для входа пользователя в наш интерфейс, получить AuthToken для этого пользователя, затем отправить этот токен на наш сервер и использовать Firebase Admin для проверки этого токена. Таким образом, и интерфейс, и серверная часть должны использовать Firebase. Итак, давайте сначала добавим его в наш интерфейс, и пусть фиктивный пользователь войдет в систему.

Firebase Auth на интерфейсе

Во-первых, npm i firebase в нашем проекте Vue. Затем перейдите к main.js и импортируйте его с помощью import firebase from 'firebase'.

Щелкните значок ‹/› на главной странице вашего приложения firebase и создайте клиентский проект.

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

{
  apiKey: "AIzaSyBqLUasFAKEBvY94anzYi1P1o19DKs",
  authDomain: "fbauthdemo-2a451.firebaseapp.com",
  databaseURL: "https://fbauthdemo-2a451.firebaseio.com",
  projectId: "fbauthdemo-2a451",
  storageBucket: "",
  messagingSenderId: "839675573680",
  appId: "1:839675573680:web:b7e921f299469934659275"
}

Затем перейдите в наш проект Vue, перейдите к файлу main.js, в который мы импортировали firebase, и мы можем инициализировать наше приложение firebase в Vue с помощью

firebase.initializeApp({
  apiKey: "AIzaSyBqLUXaDFAKEY94anzYi1P1o19DKs",
  authDomain: "fbauthdemo-2a451.firebaseapp.com",
  databaseURL: "https://fbauthdemo-2a451.firebaseio.com",
  projectId: "fbauthdemo-2a451",
  storageBucket: "",
  messagingSenderId: "839675573680",
  appId: "1:839675573680:web:b7e921f299469934659275"
})

Теперь давайте создадим этого фиктивного пользователя. Вернитесь в Firebase и нажмите «Перейти к консоли», если вы еще не сделали этого. Теперь на боковой панели выберите «Аутентификация», а затем в средней части нажмите «Настроить метод входа». Затем вы можете выбрать электронную почту и включить ее (не часть ссылки без пароля для электронной почты). Теперь, когда это включено, вернитесь к «Аутентификации» и справа нажмите «Добавить пользователя». Заполните некоторые фиктивные данные и запомните их, потому что мы собираемся жестко закодировать их в нашем приложении. Я собираюсь использовать [email protected] и pass123!

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

Давайте зайдем в приложение Vue и добавим способ входа. Сначала импортируйте firebase. Затем давайте создадим два метода, signIn и signOut, а также другую переменную данных и тег p для отображения этого статуса.

Теперь, наконец, если пользователь вошел в систему, мы хотим добавить AuthToken в заголовки запроса.

...
firebase.auth().currentUser.getIdToken(true)
  .then((idToken) => {
    client({
    method: 'get',
    url: '/',
    headers: {
      'AuthToken': idToken
    }
...

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

Администратор Firebase на бэкэнде

Теперь мы наконец можем перейти к сути урока! Давайте избавимся от фиктивных данных и воспользуемся firebase для проверки авторизации наших запросов! Сначала перейдем к нашему серверному проекту npm i firebase-admin. Затем импортируйте его в наш app.js const admin = require('firebase-admin').

Далее нам понадобится сервисный аккаунт для нашего проекта. Перейдите в консоль Firebase, щелкните значки настроек слева и выберите «Настройки проекта». Затем перейдите на вкладку «Учетные записи служб». Там мы нажмем «Создать новый закрытый ключ» и сохраним его в нашем клиентском проекте под config/fbServiceAccountKey.json. ПРИМЕЧАНИЕ. Не загружайте это в github и не публикуйте его.

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

const serviceAccount = require("config/fbServiceAccountKey.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://fbauthdemo-2a451.firebaseio.com"
});

Ваше должно быть немного другим, потому что ваше приложение не мое. Таким образом, ваш URL-адрес базы данных будет другим.

Теперь вместо проверки фиктивной переменной в нашей функции checkAuth() давайте воспользуемся firebase для проверки AuthToken в заголовках запросов. Сначала мы проверяем, существует ли он, и если это так, мы используем Firebase Admin для его проверки. Если он возвращается подтвержденным, мы переходим к следующему этапу, в противном случае мы возвращаем «403: Неавторизовано».

Наш код готов! Наш последний app.js должен выглядеть так:

Теперь, если мы запустим наш сервер как раньше DEBUG=server:* nodemon start, а наш клиент как раньше npm run serve, мы можем протестировать проверку аутентификации! Если мы нажмем «Войти› »в интерфейсе пользователя, а затем нажмем« Отправить запрос », мы успешно получим сообщение Hello World! И если мы затем нажмем «Выйти», а затем попробуем нажать «Отправить запрос», мы получим наш код 403: Неавторизовано!

Если вы прошли весь путь, поздравляю, и я надеюсь, что это помогло. Это моя первая статья на Medium, и она заняла больше времени, чем я думал! Я думаю, хлопки приветствуются, и если вам нужен исходный код, проверьте мой github на предмет fbAuthDemo. И я могу добавить сюда видеоурок в ближайшее время! До следующего раза…