Използвайте Ally с API guard и SPA

AdonisJS е версията Node.js на Laravel. За разлика от други рамки, целта на AdonisJS е да направи бекенд разработката лесна, без проблемите, с които се сблъскват разработчиците.

AdonisJS, точно като Laravel, е MVC рамка (и подходяща за Typescript), което означава, че няма да се затруднявате с дизайнерски модел, който да приемете. Разбира се, можете да персонализирате/добавите пространства от имена.

Основният екип и членовете на общността създадоха много пакети за добавяне на множество функции към рамката. „Това е списъкът на всички пакети“.

Един от тези пакети се нарича Ally и предлага възможност за удостоверяване на потребителите чрез социални мрежи и поддържа Github, Google, Twitter, Facebook, Discord, Spotify и LinkedIn направо от кутията.

Използването на Ally в MAP (Multi-Page Application) е безболезнено. Въпреки това, когато става въпрос за SPA (Single-Page Application), нещата започват да стават трудни. В тази статия ще видим как да направите социално удостоверяване, докато използвате SPA без сесия.

Вместо да инсталираме пакети на вашия SPA, които ще обработват социално удостоверяване, ние ще използваме нашето приложение AdonisJS като единствен източник на истина за обслужване на URL адреси и удостоверяване на потребителите.

Ще започнем със създаването на нов проект на AdonisJS. За да направите това, изпълнете следната команда:

npm init adonis-ts-app@latest ally-spa

Когато става въпрос за въпроса за структурата на проекта, изберете api.

Сега ще настроим Али.

npm i @adonisjs/ally

След инсталирането трябва да конфигурираме пакета, можем да го направим само като изпълним една команда:

node ace configure @adonisjs/ally

Горната команда ще:

  • Създайте файл с договор contracts/ally.ts
  • Създайте конфигурационен файл config/ally.ts
  • Актуализирайте .envи .env.example файлове
  • Актуализирайте tsconfig.json файл с типове пакети
  • И накрая, актуализирайте .adonisrc.json файла с името на пакета в списъка на доставчика

Можете също така да валидирате променливите на средата, изисквани от драйверите на пакета. В нашия пример ще използваме Google. Можете да проверите Ръководството на Ally, за да видите как да използвате други драйвери с необходимата конфигурация.

Отворете env.ts и добавете следния код:

Сега отворете файла config/ally.ts и добавете своя клиентски идентификатор и клиентска тайна. За да получите своя идентификатор и тайна, трябва да настроите приложение Google OAuth 2.0 в конзолата за разработчици на Google и да създадете идентификационни данни за OAuth клиента, като използвате акаунт в Google.

След като приложението ви бъде създадено, ще трябва да създадете идентификационни данни. На страница Credentials щракнете върху бутона CREATE CREDENTIALS и изберете OAuth Client ID. Изберете уеб приложение като тип приложение. Изберете име за вашето приложение. След това трябва да добавите URI за Authorised JavaScript origins. Това ТРЯБВА да бъде домейнът на вашия SPA, в моя случай ще бъде http://localhost:9000. И накрая, трябва да добавите друг URI адрес за пренасочване. В Authorised redirect URIs добавете URL като: http://localhost:9000/auth/google (зависи от вашия SPA домейн и порт, използвам localhost, за да тествам дали всичко работи).

Вътре в config/ally.ts добавете същия URL адрес за пренасочване:

Използвайки предоставената по-горе конфигурация на Google, нашето приложение AdonisJS вече може да генерира URL за пренасочване, който може да бъде изпратен до нашия SPA.

Отворете start/routes.ts и добавете следния код:

Използваме общ маршрут (използвайки общия параметър :provider), за да можем да получим URL за пренасочване за всеки конфигуриран драйвер. Ако потребителят вече е влязъл, ние ще отхвърлим заявката, като отговорим с код на състоянието = 406 (неприемливо). В противен случай изпращаме URL адреса за пренасочване към нашия SPA.

Използваме метода stateless, защото не използваме CSRF проверка.

Ако използвате Vue като frontend framework, можете да изпратите заявка към горния маршрут с помощта на axios или да извлечете API в обратното извикване на onMounted hook, да получите URL адреса и да го добавите към компонент на бутон.

Сега, след като имаме нашия URL адрес за пренасочване, можем да получим достъп до него от SPA. Щракнете върху него, ще бъдете подканени с формуляр за съгласие, където можете да изберете вашия акаунт в Google. След като изберете вашия акаунт, ще бъдете пренасочени към предоставения URL адрес за обратно извикване (който е http://localhost:9000/auth/google в моя случай).

Доставчикът на Google ще добави низ за заявка към нашия URL адрес за пренасочване. Ще изпратим заявка до сървъра с тези допълнителни данни, така че Ally да може да удостовери потребителите.

По-долу е кодът за манипулатора на маршрута за обратно извикване.

Както можете да видите, ние използваме Opaque Access Token (OAT) от AdonisJS (не забравяйте, че това е SPA, ние не използваме сесии), за да разрешим последващи заявки. Токените на доставчиците (от Google, Twitter и т.н.) се използват за извършване на други операции в доставчиците, например: получаване на всички потребителски хранилища от GitHub.

В последната част трябва да разрешим последващи заявки. Ще създадем нов междинен софтуер, за да вземем Opaque Access Token от бисквитките и да го добавим към всяка заглавка на заявката.

node ace make:middleware SetAuthorizationHeader

Отворете App/Middleware/SetAuthorizationHeader.ts и добавете следното съдържание:

И накрая, трябва да регистрирате междинния софтуер в глобалния масив от междинен софтуер, вътре start/kernel.ts.

Сега можете да добавите междинния софтуер за удостоверяване към маршрут и той ще провери токена и ще предостави достъп или ще откаже, ако е изтекъл. И готово!