{"id":335024,"date":"2022-06-27T09:00:10","date_gmt":"2022-06-27T09:00:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=335024"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=335024","title":{"rendered":"<span>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f NET 6 + VUE \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 reCaptcha<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0443 \u0444\u043e\u0440\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Google reCaptcha \u0432 \u0432\u0430\u0448\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043a\u0441\u0438 \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 SPA \u0438 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/blog.elmah.io\/adding-captcha-on-form-posts-with-asp-net-core\/\" rel=\"noopener noreferrer nofollow\">Adding CAPTCHA on form posts with ASP.NET Core<\/a>. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0437\u0430\u0449\u0438\u0442\u0430 \u043d\u0430 Razor pages, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0435.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <strong>Microsoft Visual Studio 2022<\/strong> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u044b \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u0441\u044f.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 <strong>ASP .NET Core Web API.<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/24e\/9e6\/dd0\/24e9e6dd08cde0771ebd482350437011.png\" width=\"2067\" height=\"1375\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/24e\/9e6\/dd0\/24e9e6dd08cde0771ebd482350437011.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0438\u043c\u044f<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/582\/7f4\/c53\/5827f4c5318cde4d6e479e6acc84e5c4.png\" width=\"2047\" height=\"1375\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/582\/7f4\/c53\/5827f4c5318cde4d6e479e6acc84e5c4.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043e\u043f\u0446\u0438\u0438 \u043a\u0430\u043a \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u044d\u0442\u043e \u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dc8\/ce6\/fb2\/dc8ce6fb26504f39c0ce07a2e93014ac.png\" width=\"2045\" height=\"1361\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dc8\/ce6\/fb2\/dc8ce6fb26504f39c0ce07a2e93014ac.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u0442\u0435\u0440\u043e\u043c.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>Microsoft.AspNetCore.SpaServices.Extensions<\/p>\n<\/li>\n<li>\n<p>Newtonsoft.Json<\/p>\n<\/li>\n<\/ul>\n<p>\u0424\u0430\u0439\u043b <strong>Program.cs<\/strong> \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0430\u0432\u043e\u043a<\/p>\n<pre><code>using System.Text.Json; using System.Text.Json.Serialization; using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; using VueRecaptcha.Services;  namespace VueRecaptcha {     public class Program     {         public static void Main(string[] args)         {             var builder = WebApplication.CreateBuilder(args);              \/\/ Add services to the container.              builder.Services.AddControllers();             builder.Services.AddHttpClient&lt;ReCaptcha>(x =>             {                 x.BaseAddress = new Uri(\"https:\/\/www.google.com\/recaptcha\/api\/siteverify\");             });             builder.Services.AddSpaStaticFiles(configuration =>             {                 configuration.RootPath = \"ClientApp\/build\";              });             builder.Services                 .AddMvc()                 .AddJsonOptions(options =>                 {                     options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;                     options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;                     options.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());                  });             var app = builder.Build();              \/\/ Configure the HTTP request pipeline.             app.UseStaticFiles();             app.UseSpaStaticFiles();             app.UseRouting();             app.UseAuthorization();             app.MapControllers();             app.UseEndpoints(endpoints =>             {                 endpoints.MapControllerRoute(                     name: \"default\",                     pattern: \"{controller}\/{action=Index}\/{id?}\");             });             app.UseSpa(spa =>             {                 spa.Options.SourcePath = \"ClientApp\";                 spa.UseReactDevelopmentServer(npmScript: \"serve\");             });             app.Run();         }     } } <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>ReCaptcha.cs<\/strong><\/p>\n<pre><code>using Newtonsoft.Json.Linq;  namespace VueRecaptcha.Services;  public class ReCaptcha {     private readonly HttpClient _captchaClient;     private readonly ILogger&lt;ReCaptcha> _logger;     private readonly IConfiguration _configuration;     public ReCaptcha(HttpClient captchaClient, ILogger&lt;ReCaptcha> logger, IConfiguration config)     {         _captchaClient = captchaClient;         _logger = logger;         _configuration = config;     }      public string GetClientMarkup()     {         var siteKey = _configuration.GetValue&lt;string>(\"SiteKey\");         return siteKey;     }     public async Task&lt;bool> IsValid(string captcha)     {         try         {             var secretKey = _configuration.GetValue&lt;string>(\"SecretKey\");             var postTask = await _captchaClient                 .PostAsync($\"?secret={secretKey}&amp;response={captcha}\", new StringContent(\"\"));             var result = await postTask.Content.ReadAsStringAsync();             var resultObject = JObject.Parse(result);             dynamic success = resultObject[\"success\"];             return (bool)success;         }         catch (Exception e)         {             _logger.LogError(\"Failed to validate\",e);             return false;         }     } } <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>UploadModel.cs<\/strong><\/p>\n<pre><code>namespace VueRecaptcha.ViewModels;  public class UploadModel {    public string Email { get; set; } = \"\";    public string Name { get; set; } = \"\";    public string CaptchaResponse { get; set; } = \"\";    public List&lt;IFormFile> Files { get; set; } = new List&lt;IFormFile>(); } <\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n<p><code>vue create clientapp<\/code><\/p>\n<p>\u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <strong>vue 3<\/strong><\/p>\n<p>\u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 clientapp<\/p>\n<p>\u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 <strong>typescript<\/strong><\/p>\n<p><code>vue add typescript<\/code><\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442\u044b<br \/> <code>npm i -S axios<\/code><\/p>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442<br \/> <strong>vue.config.js<\/strong><\/p>\n<pre><code>const { defineConfig } = require('@vue\/cli-service') module.exports = defineConfig({   devServer: {         onAfterSetupMiddleware() { \/\/ Output the same message as the react dev server to get the Spa middleware working with vue.       console.info(\"Starting the development server...\");     }   },   transpileDependencies: true }) <\/code><\/pre>\n<p><strong>HelloWorld.vue<\/strong><\/p>\n<pre><code>&lt;template>   &lt;div class=\"hello\">     &lt;div v-if=\"uploaded\">\u0424\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b&lt;\/div>     &lt;form class=\"uploadForm\" v-else>       &lt;label for=\"email\"         >Email         &lt;input type=\"email\" id=\"email\" name=\"email\" required v-model=\"email\" \/>       &lt;\/label>       &lt;label for=\"name\"         >Name         &lt;input type=\"text\" id=\"name\" name=\"name\" required v-model=\"name\" \/>       &lt;\/label>       &lt;input type=\"file\" multiple hidden id=\"upload_files\" \/>       &lt;div class=\"g-recaptcha\" :data-sitekey=\"siteKey\">&lt;\/div>       &lt;button @click=\"addFiles()\">Add files&lt;\/button>       &lt;button type=\"submit\" @click.prevent=\"submit\">Submit&lt;\/button>     &lt;\/form>   &lt;\/div> &lt;\/template> &lt;script lang=\"ts\"> import { Vue } from \"vue-class-component\"; import axios from \"axios\";  export default class HelloWorld extends Vue {     siteKey: string = \"\";   email: string = \"\";   name: string = \"\";   uploaded: boolean = false;   async submit() {         var formData = new FormData();     \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u043b\u044f     formData.append(\"email\", this.email);     formData.append(\"name\", this.name);     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043f\u0447\u0438     const resp = (       document.getElementsByName(         \"g-recaptcha-response\"       )[0] as HTMLTextAreaElement     ).value;     formData.append(\"captchaResponse\", resp);     \/\/ \u043f\u043e\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432     var imagefile = document.getElementById(\"upload_files\") as HTMLInputElement;     if (imagefile == null) return;     if (imagefile.files == null) return;     const files = imagefile.files;     for (let i = 0; i &lt; files.length; i++) {       \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b       formData.append(\"files\", files[i]);     }     var result = await axios.post(\"\/api\/upload\", formData);     if (result) {       console.log(result);       this.uploaded = true;     }     return false;   }   addFiles() {     const upload = document.getElementById(\"upload_files\");     upload?.click();       }   async mounted() {     \/\/ \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u044c\u0442\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435     var captcha = await axios.get(\"\/api\/upload\");     this.siteKey = captcha.data.toString();     this.createRecaptcha();   }   createRecaptcha() {     var s = document.createElement(\"script\");     s.setAttribute(\"src\", \"https:\/\/www.google.com\/recaptcha\/api.js\");     s.async = true;     s.defer = true;     document.body.appendChild(s);   } } &lt;\/script>  &lt;style scoped> a {   color: #42b983; } .uploadForm {   margin: 20px auto;   width: 300px;   display: block; } .uploadForm label {   display: block;   width: 100%;   margin-bottom: 10px; } &lt;\/style>  <\/code><\/pre>\n<h3>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439<\/h3>\n<p>\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 reCAPTCHA<br \/> <a href=\"https:\/\/www.google.com\/recaptcha\/about\/\" rel=\"noopener noreferrer nofollow\">https:\/\/www.google.com\/recaptcha\/about\/<\/a><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442, \u0434\u043b\u044f \u0446\u0435\u043b\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c localhost<\/p>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 reCAPTCHA v2 Site Key \u0438 Secret Key, \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b <strong>appsettings.json<\/strong><\/p>\n<p>\u0418 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Visual Studio.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043a\u0430\u043f\u0447\u0435\u0439.<\/p>\n<p>\u0423\u0441\u043f\u0435\u0445\u043e\u0432 \u0432\u0430\u043c \u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u043f\u044d\u043c\u0430!<\/p>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/h3>\n<p><a href=\"https:\/\/github.com\/vkorotenko\/VueRecaptcha\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/673552\/\"> https:\/\/habr.com\/ru\/post\/673552\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0443 \u0444\u043e\u0440\u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Google reCaptcha \u0432 \u0432\u0430\u0448\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043a\u0441\u0438 \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 SPA \u0438 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/blog.elmah.io\/adding-captcha-on-form-posts-with-asp-net-core\/\" rel=\"noopener noreferrer nofollow\">Adding CAPTCHA on form posts with ASP.NET Core<\/a>. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0437\u0430\u0449\u0438\u0442\u0430 \u043d\u0430 Razor pages, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0435.<\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <strong>Microsoft Visual Studio 2022<\/strong> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u044b \u0438 \u043a\u043e\u0434 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u0441\u044f.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 <strong>ASP .NET Core Web API.<\/strong><\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0438\u043c\u044f<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0418 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043e\u043f\u0446\u0438\u0438 \u043a\u0430\u043a \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435, \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u044d\u0442\u043e \u043c\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u043b\u0438\u0448\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u0442\u0435\u0440\u043e\u043c.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>Microsoft.AspNetCore.SpaServices.Extensions<\/p>\n<\/li>\n<li>\n<p>Newtonsoft.Json<\/p>\n<\/li>\n<\/ul>\n<p>\u0424\u0430\u0439\u043b <strong>Program.cs<\/strong> \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0430\u0432\u043e\u043a<\/p>\n<pre><code>using System.Text.Json; using System.Text.Json.Serialization; using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer; using VueRecaptcha.Services;  namespace VueRecaptcha {     public class Program     {         public static void Main(string[] args)         {             var builder = WebApplication.CreateBuilder(args);              \/\/ Add services to the container.              builder.Services.AddControllers();             builder.Services.AddHttpClient&lt;ReCaptcha>(x =>             {                 x.BaseAddress = new Uri(\"https:\/\/www.google.com\/recaptcha\/api\/siteverify\");             });             builder.Services.AddSpaStaticFiles(configuration =>             {                 configuration.RootPath = \"ClientApp\/build\";              });             builder.Services                 .AddMvc()                 .AddJsonOptions(options =>                 {                     options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;                     options.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;                     options.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());                  });             var app = builder.Build();              \/\/ Configure the HTTP request pipeline.             app.UseStaticFiles();             app.UseSpaStaticFiles();             app.UseRouting();             app.UseAuthorization();             app.MapControllers();             app.UseEndpoints(endpoints =>             {                 endpoints.MapControllerRoute(                     name: \"default\",                     pattern: \"{controller}\/{action=Index}\/{id?}\");             });             app.UseSpa(spa =>             {                 spa.Options.SourcePath = \"ClientApp\";                 spa.UseReactDevelopmentServer(npmScript: \"serve\");             });             app.Run();         }     } } <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>ReCaptcha.cs<\/strong><\/p>\n<pre><code>using Newtonsoft.Json.Linq;  namespace VueRecaptcha.Services;  public class ReCaptcha {     private readonly HttpClient _captchaClient;     private readonly ILogger&lt;ReCaptcha> _logger;     private readonly IConfiguration _configuration;     public ReCaptcha(HttpClient captchaClient, ILogger&lt;ReCaptcha> logger, IConfiguration config)     {         _captchaClient = captchaClient;         _logger = logger;         _configuration = config;     }      public string GetClientMarkup()     {         var siteKey = _configuration.GetValue&lt;string>(\"SiteKey\");         return siteKey;     }     public async Task&lt;bool> IsValid(string captcha)     {         try         {             var secretKey = _configuration.GetValue&lt;string>(\"SecretKey\");             var postTask = await _captchaClient                 .PostAsync($\"?secret={secretKey}&amp;response={captcha}\", new StringContent(\"\"));             var result = await postTask.Content.ReadAsStringAsync();             var resultObject = JObject.Parse(result);             dynamic success = resultObject[\"success\"];             return (bool)success;         }         catch (Exception e)         {             _logger.LogError(\"Failed to validate\",e);             return false;         }     } } <\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b <strong>UploadModel.cs<\/strong><\/p>\n<pre><code>namespace VueRecaptcha.ViewModels;  public class UploadModel {    public string Email { get; set; } = \"\";    public string Name { get; set; } = \"\";    public string CaptchaResponse { get; set; } = \"\";    public List&lt;IFormFile> Files { get; set; } = new List&lt;IFormFile>(); } <\/code><\/pre>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 .NET \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n<p><code>vue create clientapp<\/code><\/p>\n<p>\u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 <strong>vue 3<\/strong><\/p>\n<p>\u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 clientapp<\/p>\n<p>\u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 <strong>typescript<\/strong><\/p>\n<p><code>vue add typescript<\/code><\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043f\u0430\u043a\u0435\u0442\u044b<br \/> <code>npm i -S axios<\/code><\/p>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442<br \/> <strong>vue.config.js<\/strong><\/p>\n<pre><code>const { defineConfig } = require('@vue\/cli-service') module.exports = defineConfig({   devServer: {         onAfterSetupMiddleware() { \/\/ Output the same message as the react dev server to get the Spa middleware working with vue.       console.info(\"Starting the development server...\");     }   },   transpileDependencies: true }) <\/code><\/pre>\n<p><strong>HelloWorld.vue<\/strong><\/p>\n<pre><code>&lt;template>   &lt;div class=\"hello\">     &lt;div v-if=\"uploaded\">\u0424\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b&lt;\/div>     &lt;form class=\"uploadForm\" v-else>       &lt;label for=\"email\"         >Email         &lt;input type=\"email\" id=\"email\" name=\"email\" required v-model=\"email\" \/>       &lt;\/label>       &lt;label for=\"name\"         >Name         &lt;input type=\"text\" id=\"name\" name=\"name\" required v-model=\"name\" \/>       &lt;\/label>       &lt;input type=\"file\" multiple hidden id=\"upload_files\" \/>       &lt;div class=\"g-recaptcha\" :data-sitekey=\"siteKey\">&lt;\/div>       &lt;button @click=\"addFiles()\">Add files&lt;\/button>       &lt;button type=\"submit\" @click.prevent=\"submit\">Submit&lt;\/button>     &lt;\/form>   &lt;\/div> &lt;\/template> &lt;script lang=\"ts\"> import { Vue } from \"vue-class-component\"; import axios from \"axios\";  export default class HelloWorld extends Vue {     siteKey: string = \"\";   email: string = \"\";   name: string = \"\";   uploaded: boolean = false;   async submit() {         var formData = new FormData();     \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u043b\u044f     formData.append(\"email\", this.email);     formData.append(\"name\", this.name);     \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043f\u0447\u0438     const resp = (       document.getElementsByName(         \"g-recaptcha-response\"       )[0] as HTMLTextAreaElement     ).value;     formData.append(\"captchaResponse\", resp);     \/\/ \u043f\u043e\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0444\u0430\u0439\u043b\u043e\u0432     var imagefile = document.getElementById(\"upload_files\") as HTMLInputElement;     if (imagefile == null) return;     if (imagefile.files == null) return;     const files = imagefile.files;     for (let i = 0; i &lt; files.length; i++) {       \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b       formData.append(\"files\", files[i]);     }     var result = await axios.post(\"\/api\/upload\", formData);     if (result) {       console.log(result);       this.uploaded = true;     }     return false;   }   addFiles() {     const upload = document.getElementById(\"upload_files\");     upload?.click();       }   async mounted() {     \/\/ \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043b\u0438\u0448\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u044c\u0442\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435     var captcha = await axios.get(\"\/api\/upload\");     this.siteKey = captcha.data.toString();     this.createRecaptcha();   }   createRecaptcha() {     var s = document.createElement(\"script\");     s.setAttribute(\"src\", \"https:\/\/www.google.com\/recaptcha\/api.js\");     s.async = true;     s.defer = true;     document.body.appendChild(s);   } } &lt;\/script>  &lt;style scoped> a {   color: #42b983; } .uploadForm {   margin: 20px auto;   width: 300px;   display: block; } .uploadForm label {   display: block;   width: 100%;   margin-bottom: 10px; } &lt;\/style>  <\/code><\/pre>\n<h3>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0438\u0445 \u043a\u043b\u044e\u0447\u0435\u0439<\/h3>\n<p>\u0412\u043e\u0439\u0434\u0438\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u0430\u043a\u043a\u0430\u0443\u043d\u0442 reCAPTCHA<br \/> <a href=\"https:\/\/www.google.com\/recaptcha\/about\/\" rel=\"noopener noreferrer nofollow\">https:\/\/www.google.com\/recaptcha\/about\/<\/a><\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0441\u0430\u0439\u0442, \u0434\u043b\u044f \u0446\u0435\u043b\u0435\u0439 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c localhost<\/p>\n<p>\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 reCAPTCHA v2 Site Key \u0438 Secret Key, \u0441\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b <strong>appsettings.json<\/strong><\/p>\n<p>\u0418 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Visual Studio.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434 \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u043e\u0439 \u043a\u0430\u043f\u0447\u0435\u0439.<\/p>\n<p>\u0423\u0441\u043f\u0435\u0445\u043e\u0432 \u0432\u0430\u043c \u0438 \u043c\u0435\u043d\u044c\u0448\u0435 \u0441\u043f\u044d\u043c\u0430!<\/p>\n<h3>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/h3>\n<p><a href=\"https:\/\/github.com\/vkorotenko\/VueRecaptcha\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/673552\/\"> https:\/\/habr.com\/ru\/post\/673552\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-335024","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=335024"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/335024\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=335024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=335024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=335024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}