В этом руководстве я продемонстрирую, как создать приложение аутентификации с использованием Angular 6 и Cosmic JS. Начните с нуля и узнайте, как создать, настроить и развернуть это приложение Angular 6 Auth на сервере приложений Cosmic JS в целях тестирования.
TL;DR
Проверить демо
Скачать кодовую базу
Предварительные требования
Перед тем, как начать, вам необходимо установить Angular CLI, Node.js и npm в вашу систему. Вы можете обратиться к этим документам по Angular, чтобы получить помощь в установке.
Начало работы
Сначала мы собираемся создать проект Angular. Для этого перейдите в желаемую папку, в которой вы хотите разместить свой проект Angular, откройте терминал и введите следующую команду:
ng new angular-auth
Эта команда автоматически создает проект Angular с названием «angular-auth». Теперь перейдите в папку проекта и выполните следующую команду:
cd angular-auth
ng serve –open
Эта команда открывает проект в браузере на порту 4200, то есть http: // localhost: 4200 /. Это означает, что вы успешно создали базовую структуру проекта Angular.
Настройка панели инструментов Cosmic JS
Начните с входа в Cosmic JS и создания своей корзины. После создания сегмента вы можете начать с создания типа объекта под названием «Пользователи», в котором будет храниться информация о зарегистрированных пользователях. Вы можете создавать различные типы объектов в соответствии с требованиями, которые соответствуют вашим спецификациям данных.
Теперь создайте Bucket и скопируйте ключ со своей панели, что позволит пользователям хранить свои данные в Cosmic JS. Для этого перейдите в Сегмент ›Настройки› Основные настройки и сгенерируйте новый ключ. Точно так же создайте ключ чтения, который мы будем использовать для получения данных с сервера Cosmic JS. Скопируйте эти ключи и храните в надежном месте в вашей системе.
Импортировать Bucket.json
Вы можете загрузить файл bucket.json из репозитория Angular Auth git и напрямую импортировать его в свой Bucket. Таким образом, вам не нужно будет создавать типы объектов. Просто выполните следующие действия: Войдите в Cosmic JS ›Выберите корзину по умолчанию› Перейдите в Настройки ›перейдите в Импорт / Экспорт и нажмите кнопку Добавить файл импорта , чтобы загрузить файл bucket.json.
Настройка Cosmic JS в Angular Project
Чтобы добавить нашу конфигурацию Cosmic JS в наш проект Angular, мы создали файл cosmic.config.ts в папке src / config. Код показан ниже:
Сервис Angular для взаимодействия с Cosmic JS
Здесь мы создаем сервис на Angular, который будет взаимодействовать с Cosmic JS с помощью предоставленных API. Давайте создадим с помощью команды:
ng g s apicall
Он создаст два файла и, чтобы отделить их от остального кода, поместите эти файлы в папку с именами services в следующем месте: src/app/services
В этом коде мы вызываем сервер Cosmic JS для нескольких разных целей. Вот объявленные методы:
- login (): вызывается для входа пользователя с адресом электронной почты и паролем.
- register (): он регистрирует пользователя, когда пользователь предоставляет всю информацию на странице регистрации.
- checkGoogleUser (): проверяет присутствие пользователя в базе данных, когда он хочет войти в систему с помощью Google.
- googleRegister (): он регистрирует пользователя, когда он щелкает значок Google для входа в систему.
Создание модели для Angular
Здесь мы создаем файл с именем user.model.ts в папке models; расположение: src/app/models/user.model.ts
Здесь мы объявили класс с именем userModel, который содержит все переменные, которые мы используем в этом проекте. Dd
Зарегистрируйте нового пользователя
Здесь мы реализуем функционал регистрации нового пользователя. Мы собираем информацию, предоставленную пользователем, и сохраняем ее в серверной части Cosmic JS. Мы помещаем все компоненты в одну папку с именем «components», поэтому расположение этого компонента реестра будет: src/app/components/register/register.component.ts
Мы можем создать компонент реестра с помощью следующей команды: ng g c register
В этом компоненте мы регистрируем нового пользователя. register () - это основная функция здесь, которая вызывает функцию login () на первом этапе, чтобы проверить, зарегистрирован ли пользователь уже или нет. Если пользователь уже зарегистрирован, она получит сообщение «адрес электронной почты уже существует», в противном случае он зарегистрирует пользователя. На этой странице мы применили полную проверку имени, электронной почты, пароля и других полей.
Компонент аутентификации
Как следует из названия, он аутентифицирует зарегистрированного пользователя с его адресом электронной почты и паролем. Если вы хотите войти в систему с помощью Google, вы можете щелкнуть значок Google. Расположение этого компонента: src/app/components/authentication/authentication.component.ts
По сути, этот компонент содержит два метода: первый - login (), а второй - socialSignIn (). Первый метод вызывает функцию login () из службы API и сохраняет возвращенные данные в локальное хранилище при успешной попытке, а затем переходит на панель управления. Точно так же метод socialSignIn () сначала проверяет пользователя в Cosmic JS и, в зависимости от результата, регистрирует или регистрирует пользователя.
Компонент панели инструментов
Этот компонент отображается только для авторизованных пользователей, поэтому он показывает авторизацию в нашем приложении. Расположение этого компонента в нашем проекте: src/app/components/dashboard/dashboard.component.ts
После успешной попытки входа в систему пользователь будет перенаправлен на эту страницу, где будет проверяться локальное хранилище браузера, чтобы получить сведения о пользователе для отображения на панели управления.
Что здесь происходит?
В этом приложении для авторизации вам нужно зарегистрироваться в первый раз, а после успешной регистрации вам нужно только войти в систему. Когда вы входите в систему, ваш адрес электронной почты и пароль будут сравниваться с данными на сервере Cosmic JS, и только зарегистрированные пользователи смогут перейти на панель управления, где они смогут увидеть свою информацию (которая поступает из внутренних данных, которые вы сохранили. Во время регистрации).
Если у вас мало времени, вы можете просто щелкнуть значок Google в форме входа, чтобы перейти к панели управления одним щелчком мыши. Главное, что все эти функции были реализованы с помощью API-интерфейсов Cosmic JS. Мы сохранили полные данные на сервере Cosmic JS и при необходимости извлекли их.
Моделирование данных в Cosmic JS
Рекомендуется создавать разные типы объектов для хранения разных типов данных. Мы создали объектный тип под названием «Пользователи» для хранения зарегистрированных пользователей с их адресами электронной почты. Второй тип объекта, который мы создали, был «googleusers», который содержит пользователей, которые используют Google auth для аутентификации. Cosmic JS предоставляет различные типы объектов для простого управления данными и легкого доступа к ним.
Зарегистрированные пользователи с регистрационной формой
Выше находится основная панель инструментов с 7 представленными объектами (это означает, что 7 пользователей были зарегистрированы в нашем приложении с помощью электронной почты, Google или и того, и другого.
Развертывание на Cosmic JS
На этом этапе мы собираемся развернуть наше приложение Auth на сервере приложений Cosmic JS. Вам следует соблюдать следующие требования:
- У вас должен быть общедоступный репозиторий GitHub (частный доступен, если вы подключили свою учетную запись GitHub)
- Эти требования должны выполняться
Теперь следуйте инструкциям:
Измените файл package.json в Angular Project: укажите версии angular / cli и compiler / cli, чтобы во время развертывания сервер мог настроить в соответствии с этими версиями.
Установить Express: Теперь установите Express в проект с помощью следующей команды:
npm install --save express
Теперь вам нужно добавить код в package.json. Добавьте скрипты и движки следующим образом:
Теперь необходимо создать файл app.js, который будет запускаться с экспрессом, добавьте в него следующий код:
Развернуть сейчас
Вы найдете вариант развертывания в разделе Сегмент ›Настройки› Веб-хостинг. Предоставьте репозиторий git и разверните приложение одним щелчком мыши.
Заключение
С помощью Cosmic JS вы можете создавать мощные приложения. В этом примере мы смогли создать приложение Angular 6 Auth и развернуть его за секунды. Вам не нужно настраивать сервер или устанавливать какое-либо программное обеспечение, просто нажмите и вперед. 🚀
Если у вас есть какие-либо комментарии или вопросы о создании приложений с помощью Cosmic JS, напишите нам в Twitter и присоединитесь к разговору в Slack.
