Работа в браузерах с AWS Amplify SDK для аутентификации

AWS Amplify SDK был шлюзом для доступа к таким сервисам AWS, как Cognito, Lambda, Hosting, который пытается упростить доступ и настройку этих сервисов с помощью своего инструмента CLI.

Согласно документам AWS Amplify для Javascript, задокументированным здесь, вы можете сделать это для Интернета через импорт. Но когда вы попробуете пример кода для ванильного браузера Javascript, он не будет работать, и вы получите такие ошибки, как

 require not found

or

 Amplify not found

У них есть рабочие примеры для таких фреймворков, как React, Vue и Angular, которые больше ориентированы на языки ES6/Typescript, которые могут легко работать с модулями NPM.

Вот как вы можете получить доступ к API-интерфейсам AWS Amplify через ванильный Javascript из браузеров.

Перед началом обучения. Выполните шаги, описанные в разделе Необходимые условия для Amplify в Javascript.

Шаг 1. Установите AWS Amplify через NPM в свой текущий проект

npm install aws-amplify --save

Шаг 2. Найдите библиотеку

Перейдите к node_modules/aws-amplify/dist/. Здесь вы можете найти файл с именем «aws-amplify.min.js». Этот файл представляет собой полную библиотеку с AWS JS SDK, а также AWS Amplify SDK.

Шаг 3. Импортируйте библиотеку как скрипт

Добавьте это в раздел head.

<script src=”./node_modules/aws-amplify/dist/aws-amplify.min.js”></script>

Убедитесь, что у вас есть файл с именем в вашем рабочем каталоге. Если нет, обратитесь к разделу предварительных требований, чтобы настроить его.

 aws-exports.js

Поскольку нам нужно проверить, работает ли это, давайте попробуем пример аутентификации.

Пример 1: Аутентификация

Давайте попробуем создать пример аутентификации на простом Javascript. Здесь мы выполняем все шаги, упомянутые ранее. Теперь вам нужно инициализировать проект согласно документации, где вам нужен файл с именем aws-exports.js. Этот файл содержит конфигурацию сервисов AWS, которые мы собираемся использовать в этом примере.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-    scale=1.0">
  <title>Document</title>
   <script src="./node_modules/aws-amplify/dist/aws-amplify.min.js">  </script>
  <script>
   aws_amplify.Amplify.configure({
     // content of aws-exports.js
   });
  function signIn() {
    var email = document.getElementById("email").value;
    var pass = document.getElementById("pwd").value;
    try {
      const user = aws_amplify.Amplify.Auth.signIn(
        email, pass
      );
      console.log(user);
      alert("Signed In. Check Console")
    } catch (error) {
      console.log('error signing in', error);
      alert("Error signing in. Check Console")
    }
  }
  function signUp() {
     var email = document.getElementById("remail").value;
     var pass = document.getElementById("repass").value;
     var uname = document.getElementById("reuser").value;
  }
  try {
    const { user } = aws_amplify.Amplify.Auth.signUp({
                       username: uname,
                       password: pass,
                       attributes: {
                          email: email // optional
                       }
                     });
    console.log(user);
    alert("Signed Up!! Check Console")
  } catch (error) {
    console.log('error signing up:', error);
    alert("Error signing up. Check Console")
  }
  </script>
</head>
 <body>
  <h4>Sign In</h4>
  <input type="email" id="email">
  <input type="password" name="pass" id="pwd">
  <button id="signin" onclick="signIn()">Sign In</button>
  <h4>Sign Up</h4>
  <input type="email" name="remail" id="remail">
  <input type="password" name="repass" id="repass">
  <input type="text" id="reuser">
  <button id="signup" onclick="signUp()">Sign Up</button>
 </body>
</html>

Сохраните этот код как index.html и откройте его в браузере.

Вы можете попробовать этот метод в любом фреймворке, таком как Polymer, Framework7 или даже jQuery.

Надеюсь, это поможет всем. Ваше здоровье !!

Все права защищены уважаемыми владельцами продуктов с товарными знаками.