ОБНОВЛЕНИЕ (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).

Требования:

Установите и настройте требования, указанные выше, а затем загрузите приложение 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.jsfile, поместив его в каталог 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.cssfile:

* {
 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