Nello script precedente (https://www.aspitalia.com/script/1250/Form-Contatti-ASP.NET-MVC.aspx) abbiamo creato un form per consentire ai nostri utenti di contattarci. In casi come questo, quando l'interazione di un utente produce l'invio di un messaggio e-mail, è consigliabile proteggersi da possibili tentativi di spam. La contromisura più comune consiste nell'usare un captcha per impedire che script e bot possano abusare del servizio.
reCaptcha è forse la soluzione più nota ed efficace nel distinguere se l'utente sia un bot o una persona. Per integrarlo nel nostro form di contatto, seguiamo questi semplici passi.
Installare il pacchetto NuGet
Iniziamo installando il pacchetto NuGet PaulMiami.AspNetCore.Mvc.Recaptcha, che sveltirà l'integrazione di reCaptcha grazie agli appositi tag helper che ci mette a disposizione. Se stiamo usando Visual Studio, apriamo la Package Manager Console e digitiamo:Install-Package PaulMiami.AspNetCore.Mvc.Recaptcha
Ottenere le chiavi di accesso
reCaptcha è un servizio gratuito ma, per potervi accedere, è necessario che il nostro sito sia registrato al seguente indirizzo.https://www.google.com/recaptcha/admin
Dalla maschera che ci verrà presentata, inseriamo una descrizione sintetica ed uno o più nomi a dominio che ospiteranno l'applicazione. Fintanto che siamo in fase di sviluppo, possiamo anche fornire il nome localhost.
A registrazione avvenuta, otterremo due chiavi da usare nel metodo ConfigureServices della classe Startup.cs della nostra applicazione ASP.NET Core MVC.
public void ConfigureServices(IServiceCollection services) { // Add framework services. services.AddMvc(); services.AddRecaptcha(new RecaptchaOptions { SiteKey = "6LfnqxcUAA...", SecretKey = "6LfnqxcUAA..." }); }
Aggiornare la view
Apriamo la view Contact.cshtml in cui si trova il nostro form ed aggiungiamo subito la seguente riga in cima al file.@addTagHelper *, PaulMiami.AspNetCore.Mvc.Recaptcha
In questo modo siamo abilitati all'uso di due tag helper. Il primo, recaptcha, mostrerà la parte visuale del captcha che posizioniamo nei pressi del bottone di invio del form.
<div class="form-group"> <recaptcha /> <div asp-validation-summary="All"></div> <button type="submit" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-send"></i> Invia</button> </div>
Il secondo tag helper, recaptcha-script, aggiungerà del codice javascript necessario al funzionamento di reCaptcha. Pertanto, posizioniamolo all'interno della section Scripts della nostra view di contatto.
@section Scripts { <recaptcha-script /> }
Validazione lato server
Lato server, è importantissimo verificare che la validazione operata da reCaptcha abbia avuto buon esisto. Per far questo, poniamo l'attributo ValidateRecaptcha sull'action di invio e-mail ed andiamo a controllare il valore di ModelState.IsValid prima di effettuare l'invio.
[HttpPost, ValidateRecaptcha] public async Task<IActionResult> SendMail(Contact contact) { //Se la validazione di reCaptcha non ha avuto buon esito //o se i dati inseriti non sono corretti if (!ModelState.IsValid) { //allora torna alla view senza proseguire oltre return View(contact); } //Altrimenti invia la mail }
A questo punto l'integrazione è completa e possiamo verificarne il funzionamento. Nella maggior parte dei casi, prima di inviare il form, l'utente dovrà semplicemente mettere la spunta sulla casella "Non sono un robot" ed attendere un paio di secondi che il servizio confermi la validità della sua interazione. Nel caso in cui la prima analisi non fosse conclusiva, reCaptcha proporrà un quiz visuale.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Eseguire attività pianificate con Azure Container Jobs
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Usare le collection expression per inizializzare una lista di oggetti in C#
Usare lo spread operator con i collection initializer in C#
Le novità di Angular: i miglioramenti alla CLI
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare politiche di resiliency con Azure Container App
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare la session affinity con Azure Container Apps
Miglioramenti agli screen reader e al contrasto in Angular
Short-circuiting della Pipeline in ASP.NET Core
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- Definire stili a livello di libreria in Angular
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)