Добавление аутентификации Facebook
Для тех, кто знаком с экосистемой Apache CouchDB, Cloudant Envoy - это микросервис, который обслуживает ваше статическое приложение и ведет себя как цель репликации для вашего приложения с одной базой данных для каждого пользователя. Просто создайте приложение, которое записывает данные локально с помощью PouchDB или Cloudant Sync, и Envoy обеспечит хранение данных каждого пользователя в единой базе данных Cloudant, при этом данные каждого пользователя будут тщательно разделены.
Чтобы узнать больше об Cloudant Envoy, у меня есть запись в Offline Camp:
До сих пор я смотрел на приложения Envoy, которые генерировали собственных пользователей. Сохраните документ в базе данных envoyusers, и Envoy будет использовать эту информацию для последующих запросов аутентификации. Но что, если вы хотите, чтобы пользователи регистрировались в Facebook / Google / Twitter / и т. Д.? Как Envoy может интегрироваться с федеративным входом в социальные сети?
Прежде чем мы продолжим, давайте рассмотрим предварительные знания, необходимые для извлечения пользы из этого сообщения. Я собираюсь показать вам, как развернуть живое приложение на сервере Cloudant и добавить возможность использования аутентификации Facebook, чтобы ваши пользователи могли подписаться на вашу службу через Facebook. Я предполагаю, что вы достаточно хорошо знакомы с JavaScript, чтобы иметь возможность писать необходимые экспресс-маршруты для выполнения этой задачи.
Теперь вернемся к поставленной задаче: как мы можем позволить нашим пользователям регистрироваться в нашем приложении через Facebook?
Паспорт в помощь!
К счастью, проект PassportJS решает за нас 95% проблемы. Он имеет несколько модулей, каждый из которых выполняет аутентификацию стороннего партнера. Хотя Envoy не использует Passport "из коробки", вы можете создать приложение Envoy, которое использует его. Вот как.
Создайте приложение для Facebook
Мы собираемся использовать в качестве примера Facebook. Посетите Портал разработчиков Facebook и создайте новое приложение в своей учетной записи. Вам нужно будет указать имя вашего приложения, его URL-адрес и другие подробности. Я обнаружил, что Facebook неохотно принимает localhost в качестве действительного доменного имени, поэтому я добавил строку в свой /etc/hosts файл:
127.0.0.1 mypretenddomain.com
Затем я использовал mypretenddomain.com в качестве домена моего приложения.
После заполнения формы Facebook выдаст вам CLIENT_ID (или идентификатор приложения) и CLIENT_SECRET (или секрет приложения), которые вам нужно будет принять к сведению для своего кода позже.
Создайте приложение Envoy
Теперь мы рассмотрим, как создать приложение Envoy. В новом каталоге введите npm init и обязательно следуйте инструкциям на экране. Это создаст для вас файл шаблона package.json. Затем мы можем добавить модули, которые нам понадобятся для этого проекта:
npm install --save cloudant-envoy
Создайте статический контент:
mkdir public echo "<h1>Hello World</h1>" > public/index.html
Макет приложения Envoy довольно прост. Сначала создайте app.js файл:
После того, как вы сохранили этот файл в каталоге проекта, вы можете запустить приложение:
export COUCH_HOST=https://myusername:[email protected] node app.js
Примечание. Envoy предполагает, что URL-адрес Cloudant будет находиться в переменной среды COUCH_HOST. Замените myusername, mypassword и myhost данными своей учетной записи Cloudant.
Теперь у нас есть веб-сервер, обслуживающий наш собственный статический контент, который также действует как цель репликации для клиентов PouchDB / CouchDB / Cloudant / Cloudant-Sync.
Добавить аутентификацию Facebook
Нам потребуются дополнительные модули для обработки аутентификации Facebook:
npm install --save passport npm install --save passport-facebook npm install --save uuid npm install --save express npm install --save crypto-js
Затем нам нужно добавить несколько пользовательских конечных точек в наше приложение для обработки процесса аутентификации.
GET /_facebook- При нажатии на эту конечную точку в вашем браузере пользователь переходит на Facebook и просит его пройти аутентификацию.GET /_facebook/callback- После входа на веб-сайт Facebook браузер переходит на этот URL-адрес, чтобы мы могли получить доступ к профилю пользователя.
Мы реализуем функцию getOrCreateUser, которая проверяет, знает ли Envoy об этом пользователе. В противном случае создается новый пользователь.
Модель пользователя Envoy очень проста: добавьте документ в свою базу данных пользователей (имя по умолчанию envoyusers), чтобы позволить кому-то реплицировать. Envoy предоставляет вам несколько вспомогательных функций:
envoy.auth.getUser(userid, callback)- получить пользователя по идентификатору пользователяenvoy.auth.newUser(userid, password, metaobject, callback)- для создания нового пользователя
Нам нужно запустить приложение, передав переменные среды CLIENT_ID и CLIENT_SECRET нашего приложения, которые мы получили при создании интеграции с Facebook:
export CLIENT_ID=1234567 export CLIENT_SECRET=abc123456 export COUCH_HOST=https://myusername:[email protected] node app.js
Вот исходный код:
Как мы передаем учетные данные пользователя клиентской стороне?
Мы знаем идентификатор и пароль нашего пользователя - не имя пользователя и пароль Facebook - имя пользователя и пароль Envoy. Но как мы можем отправить эти данные на клиентскую сторону? Простой способ - перебросить браузер по URL-адресу с учетными данными в строке запроса:
http://mypretenddomain.com/bounce.html?username=999888777&password=9886f37a-725e-4096-be67-ff2aba2acb68
Мы могли бы написать некоторый клиентский JavaScript, чтобы проанализировать строку запроса, извлечь имя пользователя и пароль и сохранить их локально.
Более безопасным способом было бы создать одноразовый токен и передать его в строке запроса.
http://mypretenddomain.com/bounce.html?token=696ad23c375b4aa4acce97734fa2ea4f
В этом случае клиентский код должен извлечь токен, позвонить на сервер, чтобы обменять токен на имя пользователя и пароль, а затем сохранить учетные данные локально. Это более безопасно, поскольку срок действия токена может истечь при использовании и иметь встроенный лимит времени.
Вот простой клиентский код для извлечения и декодирования токена с сохранением данных пользователя в локальном документе PouchDB. Локальные документы никогда не передаются во время тиражирования; они остаются только на том устройстве, на котором они созданы:
Создание вашего приложения
Теперь клиентское приложение имеет учетные данные Envoy (в документе PouchDB с идентификатором _local/user), мы можем приступить к созданию приложения, которое считывает и записывает данные в свою локальную базу данных PouchDB и реплицирует свои данные в вашу службу Envoy и / или из нее, используя предоставленные учетные данные.
var db = new PouchDB('mydb');
db.get('_local/user').then(function(loggedinuser) {
var url = window.location.origin.replace('//', '//' + loggedinuser.username + ':' + loggedinuser.meta.password + '@');
url += '/envoy';
// sync live with retry, animating the icon when there's a change'
var remote = new PouchDB(url);
db.replicate.to(remote).on('change', function(c) {
console.log('change', c)
});
});
Если вы следовали этому пункту, значит, вы создали статическое приложение, которое записывает данные локально с помощью PouchDB, и вы использовали Cloudant Envoy для хранения пользовательских данных в базе данных Cloudant. Используя PassportJS для обработки аутентификации, ваши пользователи теперь могут зарегистрироваться для использования вашего приложения, используя свои собственные учетные данные Facebook. Затем просмотрите Часть II этой серии, где мы увидим, как создать приложение Offline-First с Cloudant Envoy, используя созданные здесь инструменты:
