Вступление
Angular - это мощный и современный фреймворк для обеспечения безопасности и стандарта, который предоставляет почти все базовые разработки, необходимые разработчикам, в одном пакете, от валидаторов форм, библиотеки Rxjs, интеграции с PWA и многого другого. Однако это также дает возможность интеграции другого API, такого как Recaptcha (основная задача этой статьи). Следовательно, я расскажу вам, как интегрировать reCaptcha в angular (v8) и как проверять на бэкэнде с помощью nodejs.
ReCAPTCHA - это бесплатный сервис, который защищает ваш сайт от спама и злоупотреблений, и он всегда полезен в формах регистрации и других. Хорошо, давай отправимся в путь.
Настройка проекта Angular
Во-первых, начните с настройки проекта angular, установив Angular CLI. чтобы настроить среду для angular-cli, нажмите здесь
если вы закончите с процессом, описанным выше, ваш файл angular должен быть запущен и запущен.
Затем установите библиотеку reCaptcha с помощью npm в CMD. внутри папки вашего проекта angular запустите команду
npm install ng-recaptcha --save
это должно установить API reCaptcha в ваш угловой проект.
Настройка библиотеки reCaptcha для вашего проекта.
в папке проекта внутри папки src найдите файл index.html и включите сценарий angular v2 для рендеринга виджета reCaptcha. в главном сеансе файла index.html после
‹Base href =” / ”› включите скрипт ниже
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Затем перейдите на сайт recaptcha Google, чтобы создать КЛЮЧ САЙТА (для внешнего интерфейса Angular) и СЕКРЕТНЫЙ КЛЮЧ (для проверки серверной части с помощью узла). находясь на сайте, щелкните консоль администратора в правом верхнем углу, затем в консоли администратора щелкните значок плюса, чтобы зарегистрировать новый сайт. заполните форму, как показано ниже;
обратите внимание, что список доменов содержит localhost. это для целей развития. когда закончите, нажмите кнопку "Отправить", чтобы создать
Затем щелкните значок, похожий на настройки, чтобы получить ключ вашего сайта для вашей угловой части.
ключ вашего сайта и секретный ключ должны выглядеть так
скопируйте ключ сайта.
Включение ключа сайта и рендеринг интерфейса reCaptcha
перейдите к вашему файлу app.module.ts и включите импорт для reCaptcha
Помните, что мы включили сценарий reCaptcha ранее в наш файл app / src / index.html для визуализации интерфейса reCaptcha.
Предположим, мы используем файл app / src / app.component.html. чтобы показать интерфейс reCaptcha, включите код в любой файл * .component.html, который вы хотите использовать. в моем случае я использую файл app.component.html
Браво! мы почти на месте. Теперь проверьте, отображается ли ваш интерфейс reCaptcha. загрузить страницу после ng serve
если он отображается, вы настроены правильно.
Разрешение интерфейса "Я-не-робот" и получение токена для внутренней проверки
Api recaptcha фактически проверяет наличие злоупотреблений на сайте, и делает это с проверкой пользователя путем получения токена, который затем используется для дальнейшей проверки на бэкэнде. это называется разрешением.
перед разрешением обратите внимание на app-recaptcha, который мы включили для рендеринга нашего интерфейса recaptcha.
<re-captcha (resolved)="resolved($event) sitekey="SITE_KEY"></re-captcha>
обратите внимание на событие
(решено) = «решено ($ событие)»
это событие, которое связывается с разрешенной функцией в файле component.ts. следовательно, для его завершения нам нужно включить функцию resolved ($ event) в app.component.ts.
resolved(captchaResponse: string, res) {
console.log(`Resolved response token: ${captchaResponse}`);
}
при этом, когда флажок reCaptcha установлен и установлен, вызывается разрешенная функция и ответ является токеном. ответ будет выглядеть примерно так
Resolved response token: 03AsdsdfsSxBIiZC-cYcch6y-BaWrmfB9iOvvU3UiT9J4zF-WxQ9p74dmIFUJOoZ6dg6U-7vW1H_Ds29hI5oRoY10_Yr_FaVe6mW52uaxIPgkIcZv13Mx3ssTX5Hg6leBC3ihfuKUSsg3lDfxbaTmONfshidbHs_yMRtiPYnv79ZWm75cpwXDcpY1RaI5SWZMf5yXnCkmGDwmV9Mo2yqnYuwA70g8Ouf8cdzfsdfsdfcWIVFJSYS6KN2GjL0TudbMxpOxdyEHEVb5KKkTjVe8rWYHwkg9755rgaRi5csTVRATD4zH36JmMAXTuXBNS_LaQHsfDjI7m-eeVRYUr72wXs6g9vvGgkBHmw0dGeK6kOreDwAug2baHZXPH8pD5Gu6-hIz7mESBO-qn0XihfYQhBMMdIwTzhvkyerXfvTBCctFGvcTb777qOW16ZWwVGzGXpMWjEm_DdHSnjwjROwZdog8jsdbfUghaihsgiuWn9VZAb2-NnVkV6c61NUlR-C6m12_3UGHZt4uVtxeTMjhqHdix-SQTh_lQ
Если это достигнуто, поздравляем, вы, наконец, разрешили reCaptcha. однако, чтобы завершить круг, мы должны проверить токен, полученный на бэкэнде, с помощью секретного ключа нашего сайта recaptcha.
в этом случае мы будем использовать nodejs.
Настройка серверной части Nodejs Express и проверка токена
чтобы настроить серверную часть узла, создайте папку, в которой вы хотите разместить серверную часть узла. используйте команду
mkdir app-backend cd app-backend
После слов инициализируйте ваше приложение с помощью
npm init
команда потребует от вас некоторых вещей вроде описания. для (конечной точки): index.js, вы можете использовать app.js или что-то еще
далее установите экспресс и другие необходимые зависимости в папку app-backend, созданную ранее
npm install express request body-parser --save
приведенная выше команда должна установить экспресс-сервер, модуль запроса для выполнения HTTP-запроса к другой конечной точке и модуль парсера тела для синтаксического анализа json.
Проверка токена
для проверки токена angular необходимо отправить токен на серверную часть узла. для этого используйте Angular HttpClient API. однако, чтобы избежать ограничений CORS, вам необходимо проксировать серверную часть. сделать это.
Прокси-сервер серверной части узла
создайте файл proxy.conf.json в корневой папке вашего приложения angular (то есть в папке проекта angular). в папке включить;
{
"/": {
"target": "http://localhost:3000/",
"secure": false
}
}
файл будет указывать на сервер узла, работающий на порту 3000 (мы еще не запустили сервер).
Затем настройте файл package.json для использования файла proxy.conf.json для проксирования. включают
--proxy-config proxy.conf.json
в вашем файле package.json, как показано ниже
"name": "recaptchaApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
сохранить и закрыть файл. остановить запущенный проект angular и повторно запустить проект с помощью
npm start
это должно запустить ваш проект и прокси на серверную часть вашего узла.
Отправить токен на бэкэнд
в angular процессы HTTP обрабатываются с помощью службы angular. для создания использования услуги
ng generate service app
это создаст файл app.service.ts в папке app / src
включите HttpClientModule в свой app.module.ts, чтобы использовать HttpClient API
если это сделано, создайте простой почтовый запрос в вашем сервисе до конечной точки: token_validate. ниже находится файл app.service.ts (служба angular для отправки токена) и файл app.component.ts для использования службы для отправки разрешенного токена
Получение и проверка токена на сервере узла
На бэкэнде мы создали файл узла, но мы еще не запустили его для прослушивания порта 3000. Проверьте токен, следующий код демонстрирует, как получить токен и проверить его.
Если все в порядке, запустите сервер узла. перейдите в папку backend узла (app-backend) с помощью CMD и используйте команду
node index
это запустит ваш сервер узла. обратите внимание, индекс подразумевает, что index.js - ваша конечная точка. если app.js или server.js используют приложение узла или сервер узла.
Вау! какое замечательное путешествие. теперь проверьте, подтверждено ли. если возникла какая-либо ошибка, оставьте ответ. Спасибо.