如何在identityServer3登录页面中创建验证码

I want to use captcha in my login Pages in identityServer3, How do i that? Is there a sample source ? I Try To Use Google reCaptcha but it dose not work. Please Help Me

我想在identityServer3的登录页面中使用captcha，我该怎么做？有样品来源吗？我尝试使用谷歌reCaptcha但它不起作用。请帮帮我

2 个解决方案

#1

The better question is how to customize the login screen? see the documentation on customizing views

更好的问题是如何自定义登录屏幕？请参阅有关自定义视图的文档

The views in IdentityServer can be customized in one of two ways: 1) Customize the HTML templates provided by the DefaultViewService, or if more control is needed 2) define a custom IViewService

IdentityServer中的视图可以通过以下两种方式之一进行自定义：1）自定义DefaultViewService提供的HTML模板，或者是否需要更多控制2）定义自定义IViewService

Implement a custom IViewService to change the full layout. Also if you want to change only the login page, add your custom html that implements the same angular logic as the existing login page and adding it to a folder named templates with a file name of _login.html. If you want to modify the layout (the headers) then you need to do the same this time naming the file _Layout.html. This is all expalined in the documentation, with the above listed as "Replacing partial views".

实现自定义IViewService以更改完整布局。此外，如果您只想更改登录页面，请添加实现与现有登录页面相同的角度逻辑的自定义html，并将其添加到名为templates的文件夹，文件名为_login.html。如果要修改布局（标题），则需要在命名文件_Layout.html时执行相同的操作。这些都在文档中进行了扩展，上面列出了“替换部分视图”。

#2

This is how I did it without using IViewService

这是我在不使用IViewService的情况下完成的

Add recaptcha scripts to the Templates/_layout.html head tag

将recaptcha脚本添加到Templates / _layout.html头标记

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

Add snippet to login screen page in Templates/_login.html, with added name="g-recaptcha-response" attribute

将代码段添加到Templates / _login.html中的登录屏幕页面，添加了name =“g-recaptcha-response”属性

<div class="g-recaptcha" name="g-recaptcha-response" data-sitekey="your sitekey"></div>

Add CspOptions to the Startup Class to allow google script

将CspOptions添加到启动类以允许谷歌脚本

CspOptions = new CspOptions
{
    Enabled = true,
    FontSrc = "'self' data: fonts.gstatic.com",
    StyleSrc = "'self' 'unsafe-inline' fonts.googleapis.com",
    ScriptSrc = "'self' https://www.google.com https://www.gstatic.com; object-src 'self'",
    FrameSrc = "https://www.google.com"
}

Inject OwinEnvironmentService to the UserService class - This will allow you to grab the token from the reCaptcha snippet

将OwinEnvironmentService注入UserService类 - 这将允许您从reCaptcha片段中获取令牌

private readonly OwinEnvironmentService _environmentService;

public UserService(OwinEnvironmentService environmentService)
{
    _environmentService = environmentService;
}

At AuthenticateLocalAsync, grab the token and verify it

在AuthenticateLocalAsync中，获取令牌并进行验证

var gReCaptchaResponse = _environmentService.GetLoginInput("g-recaptcha-response");
var client = new RestClient("https://www.google.com");
var request = new RestRequest("recaptcha/api/siteverify", Method.POST) { RequestFormat = DataFormat.Json };
request.AddParameter("secret", "YOUR SECRET");
request.AddParameter("response", gReCaptchaResponse);
var response = client.Execute(request);
var verficationStatus = JsonConvert.DeserializeObject<GReCaptcha>(response.Content);

if(!verficationStatus.Success)
{
    Logger.Warn("Captcha invalid");
    context.AuthenticateResult = new AuthenticateResult("Please verify that you are not a robot");
    return Task.FromResult(0);
}

GetLoginInput(form input name) extension (credit to martinip86 from answer in Github

GetLoginInput（表单输入名称）扩展名（从Github的答案中归功于martinip86）

public static string GetLoginInput(this OwinEnvironmentService environmentService, string fieldName)
{
    const string body = "owin.RequestBody";
    if (!environmentService.Environment.Keys.Contains(body))
        return null;

    var owinFormData = environmentService.Environment[body] as System.IO.Stream;
    if (owinFormData == null)
        return null;

    var formData = string.Empty;
    using (var sr = new System.IO.StreamReader(owinFormData))
    {
        formData = sr.ReadToEnd();
    }

    if (string.IsNullOrWhiteSpace(formData))
        return null;

    var formDataParsed = HttpUtility.ParseQueryString(formData);
    return formDataParsed[fieldName];
}

#1