ASP.NET MVC 용 reCaptcha를 구현하는 방법은 무엇입니까? [닫은]

80

ASP.NET MVC 및 C #에서 reCaptcha를 어떻게 구현합니까?

c#  asp.net  asp.net-mvc-2 
— 엑스포트
소스
ASP.NET Web Forms에서 Combined Google reCAPTCHA v2 및 v3의 최신 솔루션을 찾고 있다면 해당 데모 techtolia.com/Recaptcha
— Leo

답변:

83

몇 가지 좋은 예가 있습니다.

이것은 스택 오버플로 질문 에서 이전에 다루었습니다 .

MVC 4 및 5 용 NuGet Google reCAPTCHA V2

— 조지 스토커
소스
빠른 답장에 감사드립니다. 누가 만들었 Recaptcha.dll나요? Google 팀?
— xport 2011 년
4
ReCaptcha는 Carnegie Mellon University 의 교수에 의해 만들어졌습니다 .
— 조지 스토커
1
세 번째 항목 ( dotnetcurry.com/ShowArticle.aspx?ID=611 )은 저에게 잘 맞았 습니다.
— seldary
저는 Dirik Whittaker의 코드를 사용하고 있습니다. Microsoft.Web.Helpers가 참조되지만 네임 스페이스 이름 'Recaptcha'not found 오류가이 줄에 표시됩니다. var captchaValidtor = new RecaptchaValidator
— M3NTA7
@ M3NTA7이 의견보다 좀 더 깊이있는 질문을 제기 할 수 있습니다.
— George Stocker 2014 년
33

현재 작업중인 프로젝트에 reCaptcha를 추가했습니다. reCaptcha 요소가 페이지에 동적으로로드되었으므로 AJAX API를 사용하는 데 필요했습니다. 기존 컨트롤을 찾을 수 없었고 API가 간단하여 직접 만들었습니다.

누군가 유용하다고 생각되면 여기에 코드를 게시하겠습니다.

1 : 마스터 페이지 헤더에 스크립트 태그 추가

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

2 : web.config에 키 추가

<appSettings>
    <add key="ReCaptcha.PrivateKey" value="[key here]" />
    <add key="ReCaptcha.PublicKey" value="[key here]" />
</appSettings>

3 : 작업 특성 및 Html 도우미 확장 만들기

namespace [Your chosen namespace].ReCaptcha
{
    public enum Theme { Red, White, BlackGlass, Clean }

    [Serializable]
    public class InvalidKeyException : ApplicationException
    {
        public InvalidKeyException() { }
        public InvalidKeyException(string message) : base(message) { }
        public InvalidKeyException(string message, Exception inner) : base(message, inner) { }
    }

    public class ReCaptchaAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            var userIP = filterContext.RequestContext.HttpContext.Request.UserHostAddress;

            var privateKey = ConfigurationManager.AppSettings.GetString("ReCaptcha.PrivateKey", "");

            if (string.IsNullOrWhiteSpace(privateKey))
                throw new InvalidKeyException("ReCaptcha.PrivateKey missing from appSettings");

            var postData = string.Format("&privatekey={0}&remoteip={1}&challenge={2}&response={3}",
                                         privateKey,
                                         userIP,
                                         filterContext.RequestContext.HttpContext.Request.Form["recaptcha_challenge_field"],
                                         filterContext.RequestContext.HttpContext.Request.Form["recaptcha_response_field"]);

            var postDataAsBytes = Encoding.UTF8.GetBytes(postData);

            // Create web request
            var request = WebRequest.Create("http://www.google.com/recaptcha/api/verify");
            request.Method = "POST";
            request.ContentType = "application/x-www-form-urlencoded";
            request.ContentLength = postDataAsBytes.Length;
            var dataStream = request.GetRequestStream();
            dataStream.Write(postDataAsBytes, 0, postDataAsBytes.Length);
            dataStream.Close();

            // Get the response.
            var response = request.GetResponse();

            using (dataStream = response.GetResponseStream())
            {
                using (var reader = new StreamReader(dataStream))
                {
                    var responseFromServer = reader.ReadToEnd();

                    if (!responseFromServer.StartsWith("true"))
                        ((Controller)filterContext.Controller).ModelState.AddModelError("ReCaptcha", "Captcha words typed incorrectly");
                }
            }
        }
    }

    public static class HtmlHelperExtensions
    {
        public static MvcHtmlString GenerateCaptcha(this HtmlHelper helper, Theme theme, string callBack = null)
        {
            const string htmlInjectString = @"<div id=""recaptcha_div""></div>
<script type=""text/javascript"">
    Recaptcha.create(""{0}"", ""recaptcha_div"", {{ theme: ""{1}"" {2}}});
</script>";

            var publicKey = ConfigurationManager.AppSettings.GetString("ReCaptcha.PublicKey", "");

            if (string.IsNullOrWhiteSpace(publicKey))
                throw new InvalidKeyException("ReCaptcha.PublicKey missing from appSettings");

            if (!string.IsNullOrWhiteSpace(callBack))
                callBack = string.Concat(", callback: ", callBack);

            var html = string.Format(htmlInjectString, publicKey, theme.ToString().ToLower(), callBack);
            return MvcHtmlString.Create(html);
        }
    }
}

4 :보기에 보안 문자 추가

@using (Html.BeginForm("MyAction", "MyController"))
{
   @Html.TextBox("EmailAddress", Model.EmailAddress)
   @Html.GenerateCaptcha(Theme.White)
   <input type="submit" value="Submit" />
}

5 : 액션에 속성 추가

[HttpPost]
[ReCaptcha]
public ActionResult MyAction(MyModel model)
{
   if (!ModelState.IsValid) // Will have a Model Error "ReCaptcha" if the user input is incorrect
      return Json(new { capthcaInvalid = true });

   ... other stuff ...
}

6 : 유효하고 양식의 다른 부분이 유효하지 않은 경우에도 각 게시물 후에 보안 문자를 다시로드해야합니다. 사용하다Recaptcha.reload();

— 까치
소스
이 코드로 5 회 로그인 실패 후 ReCaptcha에 주석을 달 수 있습니까?
— Rob
2
이 솔루션을 구현하는 경우 새 API URL은 다음과 같습니다. google.com/recaptcha/api/siteverify ( 소스 )
— Axel Prieto
14

나를 위해 일하는 간단하고 완벽한 솔루션 . ASP.NET MVC 4 및 5 지원 (ASP.NET 4.0, 4.5 및 4.5.1 지원)

1 단계 : " Install-Package reCAPTCH.MVC "로 NuGet 패키지 설치

2 단계 : appsettings 섹션의 web.config 파일에 공개 및 개인 키 추가

<appSettings>
    <add key="ReCaptchaPrivateKey" value=" -- PRIVATE_KEY -- " />
    <add key="ReCaptchaPublicKey" value=" -- PUBLIC KEY -- " />
</appSettings>

https://www.google.com/recaptcha/intro/index.html 에서 사이트에 대한 API 키 쌍을 만들고 페이지 상단의 reCAPTCHA 가져 오기를 클릭 할 수 있습니다.

3 단계 : reCaptcha를 포함하도록 양식 수정

@using reCAPTCHA.MVC
@using (Html.BeginForm())
{
    @Html.Recaptcha()
    @Html.ValidationMessage("ReCaptcha")
    <input type="submit" value="Register" />
}

4 단계 : 양식 제출 및 Captcha 유효성 검사를 처리 할 컨트롤러 작업 구현

[CaptchaValidator(
PrivateKey = "your private reCaptcha Google Key",
ErrorMessage = "Invalid input captcha.",
RequiredMessage = "The captcha field is required.")]
public ActionResult MyAction(myVM model)
{
    if (ModelState.IsValid) //this will take care of captcha
    {
    }
}

또는

public ActionResult MyAction(myVM model, bool captchaValid)
{
    if (captchaValid) //manually check for captchaValid 
    {
    }
}
— 모지
소스
안타깝게도 같은 페이지에서 두 가지 다른 형식으로 사용할 수 없습니다 Uncaught Error: ReCAPTCHA placeholder element must be empty.
— Alisson
1
reCaptcha는 키에 web.config를 사용하므로 PrivateKey = "your private reCaptcha Google Key". 이것은 당신이 다른 환경에서 다른 키가있을 때 훨씬 더 쉽게
— 레드
13

MVC 5 용 비동기 버전 (즉, MVC 6까지 비동기가 아닌 ActionFilterAttribute 방지) 및 reCAPTCHA 2

ExampleController.cs

public class HomeController : Controller
{
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> ContactSubmit(
        [Bind(Include = "FromName, FromEmail, FromPhone, Message, ContactId")]
        ContactViewModel model)
    {
        if (!await RecaptchaServices.Validate(Request))
        {
            ModelState.AddModelError(string.Empty, "You have not confirmed that you are not a robot");
        }
        if (ModelState.IsValid)
        {
           ...

ExampleView.cshtml

@model MyMvcApp.Models.ContactViewModel

@*This is assuming the master layout places the styles section within the head tags*@
@section Styles {
    @Styles.Render("~/Content/ContactPage.css")
    <script src='https://www.google.com/recaptcha/api.js'></script>
}

@using (Html.BeginForm("ContactSubmit", "Home",FormMethod.Post, new { id = "contact-form" }))
{
    @Html.AntiForgeryToken()
    ...
    <div class="form-group">
      @Html.LabelFor(m => m.Message) 
      @Html.TextAreaFor(m => m.Message, new { @class = "form-control", @cols = "40", @rows = "3" })
      @Html.ValidationMessageFor(m => m.Message)
    </div>

    <div class="row">
      <div class="g-recaptcha" data-sitekey='@System.Configuration.ConfigurationManager.AppSettings["RecaptchaClientKey"]'></div>
    </div>

    <div class="row">
      <input type="submit" id="submit-button" class="btn btn-default" value="Send Your Message" />
    </div>
}

RecaptchaServices.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Web;
using System.Configuration;
using System.Net.Http;
using System.Net.Http.Headers;
using Newtonsoft.Json;
using System.Runtime.Serialization;

namespace MyMvcApp.Services
{
    public class RecaptchaServices
    {
        //ActionFilterAttribute has no async for MVC 5 therefore not using as an actionfilter attribute - needs revisiting in MVC 6
        internal static async Task<bool> Validate(HttpRequestBase request)
        {
            string recaptchaResponse = request.Form["g-recaptcha-response"];
            if (string.IsNullOrEmpty(recaptchaResponse))
            {
                return false;
            }
            using (var client = new HttpClient { BaseAddress = new Uri("https://www.google.com") })
            {
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
                var content = new FormUrlEncodedContent(new[]
                {
                    new KeyValuePair<string, string>("secret", ConfigurationManager.AppSettings["RecaptchaSecret"]),
                    new KeyValuePair<string, string>("response", recaptchaResponse),
                    new KeyValuePair<string, string>("remoteip", request.UserHostAddress)
                });
                var result = await client.PostAsync("/recaptcha/api/siteverify", content);
                result.EnsureSuccessStatusCode();
                string jsonString = await result.Content.ReadAsStringAsync();
                var response = JsonConvert.DeserializeObject<RecaptchaResponse>(jsonString);
                return response.Success;
            }
        }

        [DataContract]
        internal class RecaptchaResponse
        {
            [DataMember(Name = "success")]
            public bool Success { get; set; }
            [DataMember(Name = "challenge_ts")]
            public DateTime ChallengeTimeStamp { get; set; }
            [DataMember(Name = "hostname")]
            public string Hostname { get; set; }
            [DataMember(Name = "error-codes")]
            public IEnumerable<string> ErrorCodes { get; set; }
        }

    }
}

web.config

<configuration>
  <appSettings>
    <!--recaptcha-->
    <add key="RecaptchaSecret" value="***secret key from https://developers.google.com/recaptcha***" />
    <add key="RecaptchaClientKey" value="***client key from https://developers.google.com/recaptcha***" />
  </appSettings>
</configuration>
— 브렌트
소스
이것은 나를 위해 일했습니다! ... MVC v5, recaptcha v2 ~ 2018
— MTAdmin
8

1 단계 : 클라이언트 사이트 통합

</head>HTML 템플릿 의 닫는 태그 앞에이 스 니펫을 붙여 넣으세요.

<script src='https://www.google.com/recaptcha/api.js'></script>

<form>reCAPTCHA 위젯을 표시 할 위치의 끝에이 스 니펫을 붙여 넣으십시오.

<div class="g-recaptcha" data-sitekey="your-site-key"></div>

2 단계 : 서버 사이트 통합

사용자가 reCAPTCHA를 통합 한 양식을 제출하면 "g-recaptcha-response"라는 이름의 문자열이 페이로드의 일부로 제공됩니다. Google에서 해당 사용자를 확인했는지 확인하려면 다음 매개 변수와 함께 POST 요청을 보냅니다.

URL : https://www.google.com/recaptcha/api/siteverify

secret : 비밀 키

응답 : 'g-recaptcha-response'의 값입니다.

이제 MVC 앱이 실행됩니다.

// return ActionResult if you want
    public string RecaptchaWork()
    {
        // Get recaptcha value
        var r = Request.Params["g-recaptcha-response"];
        // ... validate null or empty value if you want
        // then
        // make a request to recaptcha api
        using (var wc = new WebClient())
        {
            var validateString = string.Format(
                "https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}",
               "your_secret_key",    // secret recaptcha key
               r); // recaptcha value
             // Get result of recaptcha
            var recaptcha_result = wc.DownloadString(validateString);
            // Just check if request make by user or bot
            if (recaptcha_result.ToLower().Contains("false"))
            {
                 return "recaptcha false";
            }
        }
        // Do your work if request send from human :)
    }
— Thinh Vu
소스
7

다음과 같은 방법으로 ReCaptcha를 성공적으로 구현했습니다.
참고 : 이것은 VB에 있지만 쉽게 변환 할 수 있습니다.

1] 먼저 reCaptcha 라이브러리 사본을 가져옵니다.

2] 그런 다음 사용자 지정 ReCaptcha HTML 도우미를 만듭니다.

    ''# fix SO code coloring issue.
    <Extension()>
    Public Function reCaptcha(ByVal htmlHelper As HtmlHelper) As MvcHtmlString
        Dim captchaControl = New Recaptcha.RecaptchaControl With {.ID = "recaptcha",
                                                                  .Theme = "clean",
                                                                  .PublicKey = "XXXXXX",
                                                                  .PrivateKey = "XXXXXX"}
        Dim htmlWriter = New HtmlTextWriter(New IO.StringWriter)
        captchaControl.RenderControl(htmlWriter)
        Return MvcHtmlString.Create(htmlWriter.InnerWriter.ToString)
    End Function

3] 여기에서 재사용 가능한 서버 측 유효성 검사기가 필요합니다.

Public Class ValidateCaptchaAttribute : Inherits ActionFilterAttribute
    Private Const CHALLENGE_FIELD_KEY As String = "recaptcha_challenge_field"
    Private Const RESPONSE_FIELD_KEY As String = "recaptcha_response_field"

    Public Overrides Sub OnActionExecuting(ByVal filterContext As ActionExecutingContext)

        If IsNothing(filterContext.HttpContext.Request.Form(CHALLENGE_FIELD_KEY)) Then
            ''# this will push the result value into a parameter in our Action
            filterContext.ActionParameters("CaptchaIsValid") = True
            Return
        End If

        Dim captchaChallengeValue = filterContext.HttpContext.Request.Form(CHALLENGE_FIELD_KEY)
        Dim captchaResponseValue = filterContext.HttpContext.Request.Form(RESPONSE_FIELD_KEY)

        Dim captchaValidtor = New RecaptchaValidator() With {.PrivateKey = "xxxxx",
                                                                       .RemoteIP = filterContext.HttpContext.Request.UserHostAddress,
                                                                       .Challenge = captchaChallengeValue,
                                                                       .Response = captchaResponseValue}

        Dim recaptchaResponse = captchaValidtor.Validate()

        ''# this will push the result value into a parameter in our Action
        filterContext.ActionParameters("CaptchaIsValid") = recaptchaResponse.IsValid

        MyBase.OnActionExecuting(filterContext)
    End Sub

이 줄 위에 ** 한 번 ** 코드를 재사용 할 수 있습니다.

이 줄 아래는 reCaptcha를 반복해서 구현하는 것이 얼마나 쉬운 지입니다.

이제 재사용 가능한 코드가 생겼으니 ...해야 할 일은 뷰에 보안 문자를 추가하는 것입니다.

<%: Html.reCaptcha %>

그리고 양식을 컨트롤러에 게시 할 때 ...

    ''# Fix SO code coloring issues
    <ValidateCaptcha()>
    <AcceptVerbs(HttpVerbs.Post)>
    Function Add(ByVal CaptchaIsValid As Boolean, ByVal [event] As Domain.Event) As ActionResult


        If Not CaptchaIsValid Then ModelState.AddModelError("recaptcha", "*")


        '#' Validate the ModelState and submit the data.
        If ModelState.IsValid Then
            ''# Post the form
        Else
            ''# Return View([event])
        End If
    End Function
— 체이스 플 로렐
소스
참고 : 이것은 VB에 있지만 C #으로 쉽게 변환 할 수 있습니다
— Chase Florell 2011 년
1
솔루션을 정교화 해 주셔서 대단히 감사합니다. 매우 상세한 답변입니다. 나는 그것을 좋아한다.
— XPORT
1
Joel의 최신 블로그에 따르면 StackOverflow의 제작자는 사용자를 다른 사이트로 리디렉션하는 대신 Wiki Repository가 되기를 원합니다 . 귀하를 사이트로 보내면 오늘 귀하의 질문에 답할 수 있지만 내년에 해당 외부 페이지가 다운 될 때 다른 사람의 문제를 해결하지 못할 것입니다. 여기에 정답을 게시하면 미래의 구직자들에게도 도움이 될 것입니다. 나는 이것이 질문에 답하는 올바른 방법이라고 믿습니다.
— Chase Florell 2011 년
언어 차이를 제외 하면 devlicio.us/blogs/derik_whittaker/archive/2008/12/02/… 와 거의 유사합니다 .
— Gmail 사용자
2

Magpie의 답변을 확장하면 프로젝트에서 사용하는 액션 필터에 대한 코드가 있습니다.

ASP Core RC2에서 작동합니다!

public class ReCaptchaAttribute : ActionFilterAttribute
{
    private readonly string CAPTCHA_URL = "https://www.google.com/recaptcha/api/siteverify";
    private readonly string SECRET = "your_secret";

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        try
        {
            // Get recaptcha value
            var captchaResponse = filterContext.HttpContext.Request.Form["g-recaptcha-response"];

            using (var client = new HttpClient())
            {
                var values = new Dictionary<string, string>
                {
                    { "secret", SECRET },
                    { "response", captchaResponse },
                    { "remoteip", filterContext.HttpContext.Request.HttpContext.Connection.RemoteIpAddress.ToString() }
                };


                var content = new FormUrlEncodedContent(values);

                var result = client.PostAsync(CAPTCHA_URL, content).Result;

                if (result.IsSuccessStatusCode)
                {
                    string responseString = result.Content.ReadAsStringAsync().Result;

                    var captchaResult = JsonConvert.DeserializeObject<CaptchaResponseViewModel>(responseString);

                    if (!captchaResult.Success)
                    {
                        ((Controller)filterContext.Controller).ModelState.AddModelError("ReCaptcha", "Captcha not solved");
                    }
                } else
                {
                    ((Controller)filterContext.Controller).ModelState.AddModelError("ReCaptcha", "Captcha error");
                }
            }

        }
        catch (System.Exception)
        {
            ((Controller)filterContext.Controller).ModelState.AddModelError("ReCaptcha", "Unknown error");
        }
    }
}

그리고 다음과 같이 코드에서 사용하십시오.

[ReCaptcha]
    public IActionResult Authenticate()
    {

        if (!ModelState.IsValid)
        {
            return View(
                "Login",
                new ReturnUrlViewModel
                {
                    ReturnUrl = Request.Query["returnurl"],
                    IsError = true,
                    Error = "Wrong reCAPTCHA"
                }
            );
        }
— 드미트로 보가 토프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.