sql-server - 如何在 ContactUs 页面的 .NET MVC 项目中添加 reCaptcha v3？

Question

首先为 ContactUs 页面创建一个模型类，名为Contactus：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace BlockChainingProject_YourFlow.Models
{
    public class Contactus
    {
        public string contact_name { get; set; }
        public string contact_phone { get; set; }
        public string contact_email { get; set; }
        public string contact_message { get; set; }
    }
}

现在创建另一个模型类，用于使用存储过程来获取名为 ContactUs 的表单DatabaseManager：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace BlockChainingProject_YourFlow.Models
{
    public class DatabaseManager
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["db"].ConnectionString);
        
        public bool InsertUpdateDalete(string commond)
        {
            SqlCommand cmd = new SqlCommand(commond, con);

            if (con.State == ConnectionState.Closed)
            {
                con.Open();
            }

            int n = cmd.ExecuteNonQuery();

            if (n > 0)
                return true;
            else
                return false;
        }

        public DataTable GetAllRecord(string command)
        {
            SqlDataAdapter sa = new SqlDataAdapter(command, con);
            DataTable dt = new DataTable();
            sa.Fill(dt);
            return dt;
        }
    }
}

现在转到要为联系人页面编写操作方法的控制器：

[HttpGet]
public ActionResult contactus()
{
    return View();
}

[HttpPost]
public ActionResult btn_Contact_click(FormCollection form, Contactus c)
{
    try
    {
        string to_username = ConfigurationManager.AppSettings["to_username"].ToString();
        string form_username = ConfigurationManager.AppSettings["form_username"].ToString();
        string form_password = ConfigurationManager.AppSettings["form_password"].ToString();
        string smtpAddress = "smtp.gmail.com"; //103.21.58.247

        int portNumber = 587;
        bool enableSSL = true; //false

        if (form["contact_name"] != "" && form["contact_phone"] != "" && form["contact_email"] != "" && form["contact_message"] != "")
        {
            // start query for contact
            string cmd = "insert into tbl_contact values ('" + c.contact_name + "','" + c.contact_email + "','" + c.contact_phone + "','" + c.contact_message + "')";

            if (db.InsertUpdateDalete(cmd))
            {
                 // end query for contact
                 using (MailMessage mail = new MailMessage())
                 {
                     string body = string.Empty;

                     using (StreamReader reader = new StreamReader(Server.MapPath("~/Content/contactmail.html")))
                     {
                         body = reader.ReadToEnd();
                         body = body.Replace("FULLNAME", form["contact_name"].ToString());
                         body = body.Replace("EMAILID", form["contact_email"]);
                         body = body.Replace("PHONE", form["contact_phone"]);
                         body = body.Replace("MESSAGE", form["contact_message"]);
                     }

                     mail.From = new MailAddress(form_username);
                     mail.To.Add(to_username);
                     mail.Subject = "New appointment query from " + form["contact_name"] + " for Leafy Greens Supplychain";
                     mail.Body = body.ToString();
                     mail.IsBodyHtml = true;

                     using (SmtpClient smtp = new SmtpClient(smtpAddress, portNumber))
                     {
                         smtp.UseDefaultCredentials = false;
                         smtp.Credentials = new NetworkCredential(form_username, Encrypted.Decryptdata(form_password));
                         smtp.EnableSsl = enableSSL;
                         smtp.Send(mail);
                     }
                 }

                 using (MailMessage mail = new MailMessage())
                 {
                     string body = string.Empty;

                     using (StreamReader reader = new StreamReader(Server.MapPath("~/Content/contactreply.html")))
                     {
                         body = reader.ReadToEnd();
                         body = body.Replace("FULLNAME", form["contact_name"].ToString());
                     }

                     mail.From = new MailAddress(form_username);
                     mail.To.Add(form["contact_email"]);
                     mail.Subject = "Thank you for contacting on Leafy Greens Supplychain";
                     mail.Body = body.ToString();
                     mail.IsBodyHtml = true;

                     using (SmtpClient smtp = new SmtpClient(smtpAddress, portNumber))
                     {
                         smtp.UseDefaultCredentials = false;
                         smtp.Credentials = new NetworkCredential(form_username, Encrypted.Decryptdata(form_password));
                         smtp.EnableSsl = enableSSL;
                         smtp.Send(mail);
                     }
                 }

                 TempData["JavaScriptFunction"] = string.Format("popup();");
             }
             else
             {
                 TempData["JavascriptFunction"] = string.Format("popupservererror();");
             }
         }
         else
         {
             TempData["JavaScriptFunction"] = string.Format("popupvalidation();");
         }
     }
     catch (Exception ex)
     {
         TempData["JavaScriptFunction"] = string.Format("popupservererror();");
     }

     return Redirect("/Home/Contactus");
} 

现在为“contactus”方法添加视图并创建一个 Contactus.CSHTML 页面。请看下面的代码：

@{
    ViewBag.Title = "contactus";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    function popup() {
        swal({
            title: "Successful!",
            text: "Your enquiry is submitted. Thank you for contacting us.",
            icon: "success",
            button: "Ok",
        });
    }

    function popupservererror() {
        swal({
            title: "Server Error!",
            text: "Server error ! Try again later.",
            icon: "error",
            button: "Ok",
        });
    }

    function errorcaptcha() {
        swal({
            title: "Catcha Error!",
            text: "Captch error ! Try again later.",
            icon: "error",
            button: "Ok",
        });
    }

</script>
<script src="https://www.google.com/recaptcha/api.js?render=6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3"></script> @*/*Site Key*/ /*6LerAgceAAAAAFoTUoO95pkxDqaoM8kgZVz9NdK_*/*@
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3', { action: 'contact_us' }).then(function (token) {
            document.getElementById("<%=hf_token.ClientID%>").value = token;

        });
    });
</script>



<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3', { action: 'contact_us' }).then(function (token) { //6LerAgceAAAAAFoTUoO95pkxDqaoM8kgZVz9NdK_//

            $.ajax({
                type: "POST",
                url: "contactus.cshtml/SetToken",
                data: JSON.stringify({ _token: token }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    console.log('Passed the token successfully');
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });
    });
</script>

<script src="js/main.js"></script>


<div class="container-fluid lightgreybg course-banner  padding-top-50">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-md-8  offset-md-2 course-banner-content mb-5">
                    <h3>About us</h3>
                    <p>
                        Uncover how the blockchain is revolutionising Industry 4.0.<br />
                        Explore a new way to do business with blockchain strategy and solutions.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container padding-top-50">
    <div class="row d-flex align-items-center">
        <div class="col-lg-6">
            <div class="contactinfoarea">
                <h1>Get In Touch</h1>
                <p>Our team of dedicated business accounting professionals are ready and waiting for your enquiry.</p>
                <ul>
                    <li>
                        <i class="fa fa-map-marker"></i> Lorem ipsum del<br />
                        amet seo del
                    </li>
                    <li><i class="fa fa-phone"></i> <a href="tel:1300145032">1300145032</a></li>
                    <li><i class="fa fa-envelope"></i> <a href="mail:info@blockchainbasics.com">info@blockchainbasics.com</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-6 contactinfoform">
            @using (Html.BeginForm("btn_Contact_click", "Home", FormMethod.Post))
            {

                <div class="bannerform">
                    <h3>Write to us</h3>
                    <div class="form-group">
                        <label class="form-item__label">Name*</label>
                        <input class="form-control" type="text" name="contact_name">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Phone</label>
                        <input class="form-control" type="text" name="contact_phone">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Email*</label>
                        <input class="form-control" type="text" name="contact_email">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Message*</label>
                        <textarea class="form-control" type="text" name="contact_message"></textarea>
                    </div>

                    <div class="form-group text-right margin-top-30">
                        <input class="btn btn-blue" type="submit" value="Contact Us" name="" />
                        
                    </div>
                    <input id="hf_token" type="hidden" name="name" value="" />
                </div>
            }
        </div>
    </div>

    if (TempData["JavaScriptFunction"] != null)
    {

    <script type="text/javascript">
                    @Html.Raw(TempData["JavaScriptFunction"]);
    </script>
    }

</div>

<div class="container-fluid mapareacontact">
    <div class="row">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3524297.3533693994!2d140.2132509997906!3d-23.94804237605206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6bd4df247a62dcfd%3A0xf5f2d0227612be99!2sQueensland%2C%20Australia!5e0!3m2!1sen!2sin!4v1640691574128!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
</div>


<div class="container-fluid  padding-bottom-60 padding-top-60">
    <div class="row">
        <div class="container">
            <div class="row d-flex justify-align-center align-items-center">
                <div class="col-md-4 newsltrleft mb-5">
                    <img src="~/Content/images/newsletter-left.svg" width="540" height="793" class="img-fluid" />
                </div>
                <div class="col-md-6 offset-md-2 newsltrright mb-5">
                    <p>Subscrible now</p>
                    <h2>Get every single update you will get updated every week</h2>
                    <div class="input-group newsletterouter mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                        </div>
                        <input type="text" class="form-control emailarea" placeholder="Enter email address">

                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">Subscrible now</button>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>
</div>

现在转到web.config数据库连接和站点密钥和密钥的文件：

@{
    ViewBag.Title = "contactus";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    function popup() {
        swal({
            title: "Successful!",
            text: "Your enquiry is submitted. Thank you for contacting us.",
            icon: "success",
            button: "Ok",
        });
    }

    function popupservererror() {
        swal({
            title: "Server Error!",
            text: "Server error ! Try again later.",
            icon: "error",
            button: "Ok",
        });
    }

    function errorcaptcha() {
        swal({
            title: "Catcha Error!",
            text: "Captch error ! Try again later.",
            icon: "error",
            button: "Ok",
        });
    }

</script>
<script src="https://www.google.com/recaptcha/api.js?render=6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3"></script> @*/*Site Key*/ /*6LerAgceAAAAAFoTUoO95pkxDqaoM8kgZVz9NdK_*/*@
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3', { action: 'contact_us' }).then(function (token) {
            document.getElementById("<%=hf_token.ClientID%>").value = token;

        });
    });
</script>



<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('6Lf0cRseAAAAABwR0t7U2I12kx6Popa2yOnvMYe3', { action: 'contact_us' }).then(function (token) { //6LerAgceAAAAAFoTUoO95pkxDqaoM8kgZVz9NdK_//

            $.ajax({
                type: "POST",
                url: "contactus.cshtml/SetToken",
                data: JSON.stringify({ _token: token }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    console.log('Passed the token successfully');
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });
    });
</script>

<script src="js/main.js"></script>


<div class="container-fluid lightgreybg course-banner  padding-top-50">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-md-8  offset-md-2 course-banner-content mb-5">
                    <h3>About us</h3>
                    <p>
                        Uncover how the blockchain is revolutionising Industry 4.0.<br />
                        Explore a new way to do business with blockchain strategy and solutions.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container padding-top-50">
    <div class="row d-flex align-items-center">
        <div class="col-lg-6">
            <div class="contactinfoarea">
                <h1>Get In Touch</h1>
                <p>Our team of dedicated business accounting professionals are ready and waiting for your enquiry.</p>
                <ul>
                    <li>
                        <i class="fa fa-map-marker"></i> Lorem ipsum del<br />
                        amet seo del
                    </li>
                    <li><i class="fa fa-phone"></i> <a href="tel:1300145032">1300145032</a></li>
                    <li><i class="fa fa-envelope"></i> <a href="mail:info@blockchainbasics.com">info@blockchainbasics.com</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-6 contactinfoform">
            @using (Html.BeginForm("btn_Contact_click", "Home", FormMethod.Post))
            {

                <div class="bannerform">
                    <h3>Write to us</h3>
                    <div class="form-group">
                        <label class="form-item__label">Name*</label>
                        <input class="form-control" type="text" name="contact_name">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Phone</label>
                        <input class="form-control" type="text" name="contact_phone">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Email*</label>
                        <input class="form-control" type="text" name="contact_email">
                    </div>
                    <div class="form-group">
                        <label class="form-item__label">Message*</label>
                        <textarea class="form-control" type="text" name="contact_message"></textarea>
                    </div>

                    <div class="form-group text-right margin-top-30">
                        <input class="btn btn-blue" type="submit" value="Contact Us" name="" />
                        
                    </div>
                    <input id="hf_token" type="hidden" name="name" value="" />
                </div>
            }
        </div>
    </div>

    if (TempData["JavaScriptFunction"] != null)
    {

    <script type="text/javascript">
                    @Html.Raw(TempData["JavaScriptFunction"]);
    </script>
    }

</div>

<div class="container-fluid mapareacontact">
    <div class="row">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3524297.3533693994!2d140.2132509997906!3d-23.94804237605206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6bd4df247a62dcfd%3A0xf5f2d0227612be99!2sQueensland%2C%20Australia!5e0!3m2!1sen!2sin!4v1640691574128!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
</div>


<div class="container-fluid  padding-bottom-60 padding-top-60">
    <div class="row">
        <div class="container">
            <div class="row d-flex justify-align-center align-items-center">
                <div class="col-md-4 newsltrleft mb-5">
                    <img src="~/Content/images/newsletter-left.svg" width="540" height="793" class="img-fluid" />
                </div>
                <div class="col-md-6 offset-md-2 newsltrright mb-5">
                    <p>Subscrible now</p>
                    <h2>Get every single update you will get updated every week</h2>
                    <div class="input-group newsletterouter mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-envelope"></i></span>
                        </div>
                        <input type="text" class="form-control emailarea" placeholder="Enter email address">

                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">Subscrible now</button>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>
</div>