Мы создадим простую функцию входа в систему, используя aws-amplify на реальном сервере.
Предпосылки:
3-) узел и нпм
Установка файлов:
Давайте начнем.
1-) Создайте папку проекта.
2-) Откройте терминал.
3-) Перейдите к вашему файлу с помощью терминала.
4-) Запустите эту команду на терминале:
npm init -y
5-) Создайте файл «.js». Я создал один с именем index.js.
6-) Создайте файл «webpack.config.js»
Теперь ваша папка должна выглядеть так.
amplify_js |--package.json |--index.js |--webpack.config.js
7-) Настройте свой усилитель. Вы можете просмотреть эту «ссылку, чтобы настроить ее.
Создание проекта и настройка веб-пакета:
Давайте создадим нашу первую функцию входа в систему aws-amplify.
1-) Откройте файл index.js и вставьте в него этот код. Функция примет параметры имени пользователя и пароля и вернет значение успеха, чтобы определить, был ли вход успешным.
import { Amplify, Auth } from "aws-amplify";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
async function login(UserName, Password) {
var user;
try {
user = await Auth.signIn({
username: UserName,
password: Password,
});
} catch (error) {
console.log("error signing up:", error);
user = {};
}
return user;
}
export { login };
2-) Откройте файл package.json и вставьте его.
{
"name": "amplify_js",
"version": "1.0.0",
"description": "",
"main": "lib/index_bundle.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "Hridayesh Sharma",
"license": "ISC",
"dependencies": {"aws-amplify": "latest"},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
3-) Откройте файл webpack.config.js и вставьте его.
const path = require("path")
module.exports = {
entry: path.resolve(__dirname, "index.js"),
output: {
path: path.resolve(__dirname, "lib"),
filename: "index_bundle.js",
library: "$",
libraryTarget: "umd",
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: "babel-loader",
},
],
},
mode: "development",
}
Создание библиотеки:
Поскольку все улажено, мы можем построить нашу библиотеку.
1-) Перейдите в каталог вашего проекта в терминале и запустите эту команду.
npm install
2-)И это.
npm run build
Это создаст вашу функцию в виде файла .js в папке ./lib.
Теперь ваш каталог должен выглядеть так.
amplify_js |--amplify |--lib |--index_bundle.js |--node_modules |--aws-exports.js |--index.js |--package.json |--webpack.config.js
Кроме того, может быть файл package-lock.json, созданный из ранее выполненных команд. Это не так важно.
Вызов функции из файла HTML:
Давайте запустим нашу функцию в HTML.
1-) Создайте файл index.html в корневом каталоге.
2-) Вставьте это в файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<script src="lib/index_bundle.js"></script>
<script>
console.log($.login("yourusername", "yourpassword"))
</script>
</body>
</html>
Наконец, запустите файл index.html с работающим сервером.
Функция будет регистрировать результаты в консоли браузера.
Авторы: https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac
Контакт:
Электронная почта: [email protected]
LinkedIn: https://www.linkedin.com/in/celal-%C3%A7aml%C4%B1bel-b53309172/
