Част 1 от 3: Въведение и удостоверяване. Това е първата част от поредица от три части за интегриране на Amplify във вашето приложение с удостоверяване. Тази част също включва кратка бонус стъпка за добавяне на хостинг с Amplify.

Каква е целта тук?

Думата „без сървър“ има злобно звучене. Когато разработчиците го чуят, те се свиват, знаейки, че никое производствено приложение не може да бъде наистина без сървър. Е, това е името, което рекламата му даде. „Това“ се отнася до факта, че не използваме бекенд език за писане на приложения без сървър. Не възел, не Java, не .Net! Е, не е съвсем вярно, като се има предвид фактът, че облачните функции (Lambda) могат да използват всички тези, плюс Python, Go и т.н.

Това, което се опитвам да направя с тази поредица от статии, е да се застрелям в крака. Изгаряйте мостове с нашите колеги бекенд разработчици. Започнете война. Или просто се настройте за обсъждане на тема, която ще стане гореща в бъдещия живот на разработчиците. Ние просто не можем да пренебрегнем тази архитектура, осигуряваща лесно достъпен, богат на функции, лесен за поддръжка и евтин процес на разработка.

Ще направя нещо много непопулярно тук. Ще говоря за унищожаването на задните части. И честно предупреждение, това наистина може да ви хареса.

технология

Работих добре с AWS и безсървърни решения. Както с клиентите, така и с моите хоби проекти. Това е Firebase, Google Cloud, AWS и сега… AWS Amplify! Напоследък използвам пакета с възли на Javascript AWS Amplify за всеки хоби проект, който се нуждаеше от бекенд.

Това почти изглежда като скрит трик за създаване на приложения, които са много бързи както във времето, изразходвано от разработчиците, така и в производителността на приложението. Той осигурява защитени AWS сървъри (стига да следвате най-добрите практики за управление на двойки ключове). Освен това ви предоставя най-съвременна технология.

Ставай и тичай

Инсталирането и използването на Amplify не е трудно, ако имате известен опит с Javascript библиотеки. За да направи нещата още по-лесни, документацията е много добра за всички добре използвани рамки (Vanilla JS, React, React Native, Vue, Angular). Следното ръководство е взето директно от AWS Amplify docs

Интерфейсът на командния ред на Amplify (CLI) е унифицирана верига от инструменти за създаване, интегриране и управление на облачните услуги на AWS за вашето приложение.

  • Инсталирайте Node.js® и npm, ако вече не са на вашата машина.
  • Регистрирайте се за Free-Tier AWS: https://aws.amazon.com/console/

Уверете се, че използвате поне Node.js версия 8.x или по-нова и npm версия 5.x или по-нова, като изпълните node -v и npm -v в прозорец на терминал/конзола.

  • Инсталирайте и конфигурирайте Amplify CLI.
npm install -g @aws-amplify/cli
amplify configure
  • Конфигурирането включва настройка на IAM потребител с идентификационни данни и т.н. За щастие, всичко това става много лесно чрез CLI, който ви води през всичко и отваря правилните връзки в браузъра ви по подразбиране.

Също така справедливо предупреждение за потребителите на Windows: Препоръчително е да използвате Подсистемата на Windows за Linux. Според моя опит проблемите с терминалите на Windows са коригирани през последните 6 месеца, така че наистина няма нужда.

Имайте предвид, че Amplify има известна крива на обучение, разбирайки как AWS услугите се изграждат заедно, но е много лесно да създадете инфраструктурата на приложенията с Amplify CLI.

Удостоверяване с AWS Cognito

В моите примери ще използвам React и Amplify документите за React, които се възползват от библиотеката amplify-react. Започнете, като въведете вашето приложение, което може напр. бъде нов проект на React

npx create-react-app my-project
cd my-project
amplify init

Приложението е стартирано с Amplify и сега има нова папка amplify/. Всеки път, когато добавите нова функция Amplify, тя се добавя тук с цялата конфигурация на AWS.

Имате и нов файл my-project/src/aws-exports.js с идентификационните данни за свързване на клиентския интерфейс с Amplify.

Също така се уверете, че package.json е включил aws-amplifyи aws-amplify-react(или избраната от вас рамка, пакетите се намират в съответните api документи под рамката поддържа"). Ако тези пакети не са инсталирани автоматично, npm i aws-amplify aws-amplify-react.

Добавяне на Auth в папката /amplify

В избрания от вас терминал отидете в основата на проекта, където сте разширили init. Бягай

amplify add auth

и се изпълнява по подразбиране в повечето конфигурации. Ако искате да направите нещо друго освен по подразбиране, Препоръчвам да прочетете документите за удостоверяване.

Добавяне на удостоверяване към вашето приложение

Това е напълно проектирана обвивка на страница за вход, включително регистрация и проверка. Той обвива вашето приложение. Следното изображение е направо от документацията:

Забележете, че импортираме aws-exports.js и го настройваме с Amplify.configure(awsmobile); Този файл се актуализира автоматично всеки път, когато актуализирате, публикувате или натискате вашето приложение.

Ако сте проверили документацията, може да започнете да забелязвате колко малко стъпки са необходими, за да стигнете до крайната цел, която е пълнофункционална система за удостоверяване. За да добавите вашите локални Amplify промени, стартирайте amplify push.

За да изключите телефонния номер в процеса на регистрация, заменете

са

export default withAuthenticator(App, {
  signUpConfig: {
    hiddenDefaults: ["phone_number"],
  },
});

Бонус

Добавянето на уеб хостинг към вашето приложение е толкова лесно. В терминала, от root, изпълнете тези редове:

amplify add hosting
amplify publish

Това създава S3 контейнер с отворен URL адрес за вашето уеб приложение и връща URL адрес, който да използвате. Може също да се настрои с потребителско име на домейн с помощта на AWS Route 53 или CloudFront.

Опитът на разработчиците никога не е бил по-добър

Ако искате да персонализирате тези неща, можете. Следвайте документа стъпка по стъпка, за да научите много повече функции: https://aws-amplify.github.io/docs/js/react

Обърнете внимание на всички предварително направени компоненти, направени от екипа на Amplify, напр. качването на S3 изображение и т.н. Тук има много потенциал за вашите клиентски приложения!

Ще предоставя още 2 статии в тази поредица, показвайки ви абсолютно най-лесния начин да добавите GraphQL към вашето приложение. GraphCool, Prisma и други услуги не могат да се конкурират с това. Присъединете се към мен в следващата ми статия „Унищожаване на задните части с безсървърно приложение — AppSync GraphQL API“.