web-dev-qa-db-ja.com

asp.netコアAsp.netMvc 6でキャプチャを作成する方法は？

Asp.netコアでasp.netMVC 6アプリケーションを開発していますが、ログインページ用のキャプチャを作成したいと思います。以前の.netフレームワークでは、system.drawingを使用してキャプチャを作成しましたが、.net Frameworkコアにはsystem.drawingがないため、どうすればこれを実現できますか？

1つの解決策は、完全な.netフレームワークを参照することですが、これは私が望んでいることではありません。コアフレームワークを使いたい。

もう1つは、.net Framework6とMvc5を使用してプロジェクトを作成し、Web APIを使用してキャプチャ画像を取得することですが、これも私が望んでいることではありません。

別の解決策はありますか？

asp.net-mvcasp.net-coreasp.net-core-mvccaptcha
8
jsDevia

Aspnetcoreで動作するrecaptchaのラッパーを作成しました。チェックしてください https://www.nuget.org/packages/PaulMiami.AspNetCore.Mvc.Recaptcha そして にいくつかのドキュメントがありますhttps://github.com/PaulMiami/reCAPTCHA/wiki/Getting-started

要するに、あなたはそれを使うために以下をする必要があります：

  1. スタートアップクラスでサービスをセットアップします。
public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();

    services.AddRecaptcha(new RecaptchaOptions
    {
        SiteKey = Configuration["Recaptcha:SiteKey"],
        SecretKey = Configuration["Recaptcha:SecretKey"]
    });
}

2。「_ ViewImports.cshtml」ファイルに追加します。

@addTagHelper *, PaulMiami.AspNetCore.Mvc.Recaptcha

3.あなたの見解では。

<form asp-controller="Home" asp-action="Index" method="post">
    <recaptcha />
    <input type="submit" value="submit" />
</form>
@section Scripts {
    <recaptcha-script />
}

4.コントローラー内。

[ValidateRecaptcha]
[HttpPost]
public IActionResult Index(YourViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        return new OkResult();
    }

    return View();
}
8
PaulMiami

ASP.NETCoreアプリにRecaptchaを実装しました。私のログインビューでは：

@if (Model.RecaptchaSiteKey.Length > 0)
{
    <script src='https://www.google.com/recaptcha/api.js'></script>
}


@if (Model.RecaptchaSiteKey.Length > 0)
{
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <div class="g-recaptcha" data-sitekey="@Model.RecaptchaSiteKey"></div>
            @Html.ValidationMessage("recaptchaerror", new { @class = "text-danger" })
        </div>
    </div>

}

コントローラーに拡張メソッドを実装したので、キャプチャサーバー側を使用しているコントローラーから簡単に検証できます。

public static async Task<RecaptchaResponse> ValidateRecaptcha(
    this Controller controller,
    HttpRequest request,
    string secretKey)
{
    var response = request.Form["g-recaptcha-response"];
    var client = new HttpClient();
    string result = await client.GetStringAsync(
        string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}",
            secretKey,
            response)
            );

    var captchaResponse = JsonConvert.DeserializeObject<RecaptchaResponse>(result);

    return captchaResponse;
}

次に、AccountControllerのlogin postメソッドからのこのスニペットは、その拡張メソッドを使用してキャプチャサーバー側をチェックします。

if ((Site.CaptchaOnLogin) && (Site.RecaptchaPublicKey.Length > 0))
{
    var recpatchaSecretKey = Site.RecaptchaPrivateKey;
    var captchaResponse = await this.ValidateRecaptcha(Request, recpatchaSecretKey);

    if (!captchaResponse.Success)
    {
        ModelState.AddModelError("recaptchaerror", "reCAPTCHA Error occured. Please try again");
        return View(model);
    }
}

コントローラで拡張メソッドを呼び出すには、thisキーワードを使用する必要があることに注意してください。

私は現在これを複数のプロジェクトで使用しているので、より多くのコードを表示する必要がある場合、最も単純なのは私の SimpleAuth プロジェクトですが、私もそれを使用しています cloudscribe

7
Joe Audette

特別なパッケージなしでそれを行うことができます。 reCAPTCHAサイトによると-

クライアント側の統合

終了する前にこのスニペットを貼り付けます</head> HTMLテンプレートのタグ：

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

このスニペットを、reCAPTCHAウィジェットを表示する場所の最後に貼り付けます。

<div class="g-recaptcha" data-sitekey="YOURSITEKEY"></div>

サーバー側の統合

ユーザーがreCAPTCHAを統合したフォームを送信すると、ペイロードの一部として「g-recaptcha-response」という名前の文字列が取得されます。 Googleがそのユーザーを確認したかどうかを確認するには、次のパラメータを使用してPOSTリクエストを送信します。

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

シークレット（必須）：YOURSECRETKEY

response（必須）：「g-recaptcha-response」の値。

remoteip：エンドユーザーのIPアドレス。

1
smulholland2

Mvcでキャプチャを作成するには、以下の手順に従ってください。

  1. このように、CaptchaMvcライブラリをアプリケーションの参照レイヤーに追加します。

  2. 次に、このようなインデックスビューを作成します。

見る

 @using CaptchaMvc.HtmlHelpers  
 @using MathCaptcha;  
 @using CaptchaMvc;  

 @using (Html.BeginForm()) {  
 @Html.ValidationSummary(true)  

<fieldset>  
    <legend>Captcha Example</legend>  

    @Html.MathCaptcha()  

    @*@Html.Captcha(3)*@  

    <input type="submit" value="Send" />  

 </fieldset>  
 }

@ Html.MathCaptcha（）ヘルパークラスを使用すると、数学的なCAPTCHAが生成されます。 @Htmlを使用している場合。 Captcha（3）ヘルパークラスは、CharCAPTCHAを生成します。 3はCAPTCHAの長さです。

  1. アクション後のメソッドでは、CAPTCHA検証用のコードを記述しました。

     [HttpPost]  
 public ActionResult Index(string empty)  
 {  
    // Code to validate the CAPTCHA image
    if (this.IsCaptchaValid("Captcha not valid"))  
    {  

        // do your stuff  
    }  

    return View();  
 }
0
Banwari Yadav

私はこれをしました：

System.Drawing.Commonへの参照を追加します

Linuxの場合は、Linuxライブラリをインストールします。

Sudo apt install libc6-dev
Sudo apt install libgdiplus
  1. AccountControllerで
        [AllowAnonymous]
        public async Task<IActionResult> GetCaptchaImage()
        {
            var validate = "";
            var bmp = ImageCaptcha.Generate(200, 150, out validate);

            using (MemoryStream ms = new MemoryStream())
            {
                bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
                HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
                result.Content = new ByteArrayContent(ms.ToArray());
                result.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
                SetCookie("CV", validate.Hash()+"");
                return File(ms.ToArray(),"image/png");
            }
        }

        // move to base controller
        public void SetCookie(string key, string value, int? expireTime = null)
        {
            CookieOptions option = new CookieOptions();

            if (expireTime.HasValue)
                option.Expires = DateTime.Now.AddMinutes(expireTime.Value);
            else
                option.Expires = DateTime.Now.AddMilliseconds(5 * 60 * 1000);

            Response.Cookies.Append(key, value, option);
        }

このクラスをプロジェクトに追加します-memにランダムな逆さ文字bmpを生成します：

public static class ImageCaptcha
    {

        public static Bitmap Generate(int w, int h, out string validate)
        {
            Bitmap bmp = new Bitmap(w, h, System.Drawing.Imaging.PixelFormat.Format32bppArgb);

            Graphics graphics = Graphics.FromImage(bmp);
            var brush = new[] { Brushes.Brown, Brushes.LawnGreen, Brushes.Blue, Brushes.Coral};
            var Rand = new Random((int)DateTime.Now.Ticks);
            validate = null;
            using (Graphics g = Graphics.FromImage(bmp))
            {
                for (int i = 0; i < 4; i++)
                {
                    var text = Convert.ToChar( Rand.Next(97, 122)).ToString();
                    validate += text;
                    if(i==0) g.TranslateTransform(bmp.Width / 2, bmp.Height / 2);
                    g.RotateTransform(40 * 5 * Rand.Next(1, 6));
                    var font = new Font("Arial", h * 0.25f + 8 * Rand.Next(1, 6), FontStyle.Bold);
                    SizeF textSize = g.MeasureString(text, font);
                    g.DrawString(text, font, brush[i],15*(i+1) -(textSize.Width / 2), -(textSize.Height / 2));
                }
            }

            return bmp;
        }

    }

このユーティリティクラスを追加して、md5ハッシュを簡単にします。

public static partial class H
{
    public static int Hash(this string value)
    {
        MD5 md5Hasher = MD5.Create();
        var hashed = md5Hasher.ComputeHash(Encoding.UTF8.GetBytes(value));
        var ivalue = BitConverter.ToInt32(hashed, 0);
        return ivalue;
    }
}
  1. 登録アクションをこれに変更します。コメントを参照してください-追加、変更：
        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Register(RegisterViewModel model, string returnUrl = null)
        {
            ViewData["ReturnUrl"] = returnUrl;
            var validCaptchaText = Request.Cookies["cv"]; //added
            if (ModelState.IsValid && model.UserCaptchaText.Hash()+""==validCaptchaText) //changed
            {
                var user = new AppUser { UserName = model.Email, Email = model.Email };
                var result = await _userManager.CreateAsync(user, model.Password);
                if (result.Succeeded)
                {
                    _logger.LogInformation("User created a new account with password.");

                    var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
                    var callbackUrl = Url.EmailConfirmationLink(user.Id, code, Request.Scheme);
                    await _emailSender.SendEmailConfirmationAsync(model.Email, callbackUrl);

                    await _signInManager.SignInAsync(user, isPersistent: false);
                    _logger.LogInformation("User created a new account with password.");
                    return RedirectToLocal(returnUrl);
                }
                AddErrors(result);
            }

            // If we got this far, something failed, redisplay form
            return View(model);
        }
  1. 「ConfirmPassword」の後のレジスタビュー
                <div class="form-group">
                    <label>Captcha</label><br />
                    <img style="width:100%; border:solid 1px #ced4da" height="150" src="@Url.Action("GetCaptchaImage")" />
                    <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
                    <ul style="list-style-type:none">
                        <li style="width:24px;height:12px; display:inline-block; background-color:#a52a2a "></li>
                        <li style="width:24px;height:12px; display:inline-block; background-color:#7cfc00 "></li>
                        <li style="width:24px;height:12px; display:inline-block; background-color:#0000ff "></li>
                        <li style="width:24px;height:12px; display:inline-block; background-color:#ff7f50 "></li>
                    </ul>
                </div>

                <div class="form-group">
                    <label asp-for="UserCaptchaText"></label>
                    <input asp-for="UserCaptchaText" class="form-control" />
                </div>

                <button style="color:white; background-color:#4a7dbc" type="submit" class="btn btn-default">Register</button>

そして完了。

0
Gabriel Luca

簡単に、そのコンポーネントを使用できます。そのリンクでの使用方法を確認できます https://www.nuget.org/packages/IgniteCaptcha/1.0.

0
TheRockerDev