ОБНОВЛЕНИЕ (9/2018): теперь включает плагин ember-cli для начальной загрузки вашего приложения Amplify и интерфейса командной строки Amplify,
AWS Amplify предоставляет декларативный и простой в использовании интерфейс для различных категорий облачных операций. AWS Amplify хорошо сочетается с любыми интерфейсными рабочими процессами на основе JavaScript и React Native для мобильных разработчиков. AWS Amplify доступен с открытым исходным кодом на GitHub.
Реализация по умолчанию работает с Amazon Web Services (AWS), но AWS Amplify спроектирован так, чтобы быть открытым и «подключаемым» для любого настраиваемого серверного интерфейса или сервиса.
Реализация по умолчанию позволяет разработчикам немедленно интегрировать сервисы AWS, такие как Amazon Cognito для аутентификации пользователей, Amazon S3 для облачного хранилища и частных файлов пользователей. AWS Amplify также предоставляет готовую поддержку Amazon API Gateway с автоматической подписью запросов версии 4, а также возможность работы с запросами GraphQL.
Ember.js - это JavaScript-фреймворк для внедрения зависимостей. Он позволяет вам использовать шаблоны и компоненты ручек вместе с интерфейсом типа MVC в вашем приложении JavaScript. Он также обладает отличным интерфейсом командной строки для создания компонентов, служб, маршрутов, а также для создания и обслуживания вашего приложения локально.
Как правило, при использовании AWS JavaScript SDK настройка аутентификации, аналитики и использования других сервисов AWS может быть сложной и сложной. Интерфейс командной строки AWS Amplify помогает организовать это, автоматизируя внутреннюю конфигурацию AWS с помощью AWS CloudFormation и предоставляя файл конфигурации JavaScript (aws-exports.js) вашему клиентскому приложению для использования.
AWS Amplify значительно упрощает клиентское программирование при работе с облачными сервисами на JavaScript. Он предоставляет декларативный синтаксис и категориальную структуру для взаимодействия с облачными сервисами.
import Amplify, { Auth, Analytics } from 'aws-amplify'
Это отлично работает в фреймворках, поддерживающих ECMAScript 2015 и node_modules. Для фреймворков, которые этого не делают, веб-компонентов или простых тегов сценариев, может быть сложно включить babel или что-то подобное для преобразования в совместимый код браузера. В этом посте я опишу, как можно использовать AWS Amplify в приложении Ember.js (которое также будет работать для доступа, если оно включено в тег ‹script› на простой странице html).
Требования:
- Node.js LTS
- Ember.js
* в этом посте используется версия 3.0 - Уголь-кли-усилить
- AWS Amplify CLI
* проверьте репозиторий на наличие инструкций по настройке и установке
Установите и настройте требования, указанные выше, а затем загрузите приложение Ember:
$ ember new myAwsAmplifyApp $ cd myAwsAmplifyApp $ ember s
После этого вы должны увидеть компонент приветствия Ember по умолчанию в своем браузере по адресу http: // localhost: 4200. Этот компонент устанавливается по умолчанию и отображается в app/templates/application.hbs
. Затем мы настроим наш проект с помощью Amplify CLI (убедитесь, что вы установили и настроили его в соответствии с инструкциями, изложенными в репозитории).
Из корня вашего приложения:
$ amplify init
Измените параметры по умолчанию:
- Каталог исходного кода: приложение
- Каталог сборки: dist
- Команда запуска: уголек s
- Команда сборки: уголек b
Это создаст aws-exports.js
file, поместив его в каталог app /. После этого добавьте аутентификацию с помощью Amazon Cognito:
$ amplify add auth $ amplify push
Теперь у нас есть функция аутентификации с помощью Amazon Cognito, доступная для использования в нашем приложении Ember, и в наш файл конфигурации добавлены соответствующие значения.
Затем импортируйте библиотеку aws-ampify из папки node_modules
. Ember хорошо работает с импортом скриптов из bower_components
или файлов в папке vendor/
. Однако импортировать модули ES из папки node_modules непросто.
Installember-cli-amplify
аддон:
ember install ember-cli-amplify
Примите значения по умолчанию для всех вопросов. Теперь вы можете получить доступ к категориям AWS Amplify через компонент Ember с внедрением зависимостей.
Создайте компонент Ember:
$ ember g component amplify-authenticator
Отредактируйте app/components/amplify-authenticator.js
файл:
import Component from '@ember/component'; import { inject as service } from '@ember/service'; export default Component.extend({ amplify:service(), username: null, password: null, message: null, error: null, actions: { signIn() { const auth = this.get('amplify').Auth; const username = this.get('username'); const password = this.get('password'); const that = this; auth.signIn(username, password) .then((result) => { that.set('error', null); that.set('message', result); }) .catch((error) => { if (error.message) { that.set('error', error.message); } else { that.set('error', error); } }); } } });
Затем отредактируйте app/templates/components/amplify-authenticator.hbs
файл:
<section class="amplify-authenticator"> <h2>Amplify Ember Authenticator</h2> <div> {{input type="text" placeholder="Username" value=username}} </div> <div> {{input type="password" placeholder="Password" value=password}} </div> <div> <button onclick={{ action "signIn" }}>Sign In</button> </div> {{#if message}} <div class="amplify-message"> {{message}} </div> {{/if}} {{#if error}} <div class="amplify-error"> {{error}} </div> {{/if}} {{yield}} </section>
Добавьте стиль, отредактируйте app/styles/app.css
file:
* { font-family: Arial; } .amplify-authenticator { padding: 1em; } .amplify-authenticator input { margin: 0.5em; padding: 0.5em; } .amplify-authenticator button { margin: 0.5em; padding: 0.5em; } .amplify-message { margin: 0.5em; padding: 0.5em; color: green; } .amplify-error { margin: 0.5em; padding: 0.5em; color: red; }
Наконец, сгенерируйте маршрут:
$ ember g route login
Это сгенерирует HTTP-маршрут / login и файл представления шаблона ручек.
Отредактируйте файл templates/application.hbs
и удалите компонент страницы приветствия. Теперь файл должен содержать только:
{{outlet}}
Отредактируйте файл app/templates/login.hbs
:
{{outlet}} {{amplify-authenticator}}
Запустите приложение и посетите страницу входа:
$ ember s
Измените адресную строку так, чтобы она указывала на /login
, и вы должны увидеть форму входа:
Откройте в браузере инспектор разработчиков и перейдите на вкладку сети. Вы также должны увидеть в своем инспекторе сетевые запросы, которые извлекают анонимные гостевые учетные данные из AWS. Вы также должны увидеть запросы аналитики к Amazon Pinpoint для своего сеанса:
Если вы попытаетесь войти в систему, вы должны увидеть сообщения об ошибках от Amazon Cognito, например, Пользователь не существует. Вы можете добавить пользователя в свой пул пользователей Amazon Cognito, после чего вы сможете войти в систему с этим пользователем из этой формы. Теперь вы также можете создать форму регистрации таким же образом, создавать пользователей и использовать все функции AWS Amplify в своем сервисе Ember. Вы также можете включить больше сервисов AWS из интерфейса командной строки. Посетите Документацию AWS Amplify, чтобы узнать, как можно использовать другие категории в своем приложении Ember.
Следующие шаги:
- Добавить форму регистрации с MFA
- Инициализировать конфигурацию в инициализаторе
- Проверьте сеанс зарегистрированного пользователя с помощью инициализатора
- Заполнение сервисов в инициализаторе экземпляра
- Сборка и развертывание в Amazon S3 с помощью мобильного интерфейса командной строки AWS