Своя регистрация и авторизация в Meteor приложении

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

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

accounts-ui
accounts-ui

Как правило это раскрывающийся список, который предполагается разместить в правом верхнем углу экрана. Конечно есть вариации, с использованием не бутстрпапа, а чего нибудь типа semantic-ui, materialize или ionic, но суть не меняется.Еще мне встречался пакет который реализует вход с использованием отдельной странички, даже хотел было его заиспользовать, но меня остановило то что разметка не кастомизируется. Точнее её можно кастомизировать под себя, но для этого нужно лезть в код самого плагина. Но если делать это по хорошему и с возможностью накатывать обновления на плагин, то я думаю right way это при каждом обновлении пакета форкать его, изменять код, накатывать себе в проект, это если делать по правильному. Но блин, я нихочу постоянно что то форкать и вставлять в проект руками, поэтому и этот пакет отпадает. Остаётся только один вариант — сделать всё самому. Как оказалось это совсем не сложно, ведь метеор же.

Нам понадобятся два пакета, которые реализуют систему аккаунтинга и регистрацию\вход с паролем. Ставим их:

И да, если кто еще не знает, то для того чтобы поставить пакет для Meteor’a не обязательно набирать в терминале команду meteor add <имя плагина>, можно просто добавить <имя плагина> в файл packages в папке .meteor, эта папка лежит в корне проекта. После добавления метеор сам скачает и установит новые плагины. Для удаления плагина просто удалить его название из файлика packages.

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

И всё, этого достаточно для полноценной системы с регистрацией и авторизацией.

Методы будем использовать на клиенте, поэтому в папке clients создаём два файла с обработчиками, register.js и login.js . И в этой же папке client еще два файла с шаблонами, назову их register.html и login.html. Сразу же хочу сказать что вас никто не обязывает придерживаться моей структуры, можете назвать файлы как вам угодно, или вообще создать всего 2 файлика, в одном писать весь js код, а в другой поместить оба шаблона. Главное чтобы файлы находились в директории client.

Раз вы уже ищете как реализовать авторизацию с помощью паролей на Meteor, то я думаю не нужно объяснять как работают шаблоны и их обработчики,поэтому пропустим это, но если что то не понятно — спрашивайте в комментариях. Итак, содержимое файликов:

На событие click кнопки регистрации собираем из полей введенные данные, а потом просто передаем их в метод Accounts.createUser(), он создаст в mongo db коллекцию users, и нового пользователя в ней. Заметьте, для упрощения я опустил в примере валидацию введенных значений, это уже ваша ответственность, но тут все как всегда, проверить поля на пустоту и так далее. Единственное, что хочу добавить, вы должны прокинуть ошибку err пользователю, эта ошибка приходит в случае если пользователь с таким логином или email уже существует, и в некоторых других случаях, думаю разберетесь. Регистрация реализована, приступим к авторизации:

Тут все очень просто, берем значения полей с формы и передаем их в метод авторизации. И, собственно это почти всё. Осталось сделать только функцию выхода. Это делается очень просто, нужно всего лишь вызвать Meteor.logout(). Описывать это не буду, создайте ссылку в шаблоне и просто повесьте вызов метода на клик.

В шаблонах Meteor можно проверять залогинен ли пользователь, делается так:

 

Вот собственно и всё, приятного кодинга.

Также можно почитать:

  • Sygeman

    register.js в конце 5 строки точка с запятой

    • Спасибо, поправил.