如何将 Blazor Web assembly 的 Google reCAPTCHA v2 与 ASP.NET Core 集成？

Question

我搜索了很多有关验证码集成的资源，但没有看到如何将其集成到 Blazor Webassemble 中。请帮助我获得一些可用的资源。非常感谢。

（我的大部分问题是 .razor 组件无法使用该标签）

Answer 1

我搜索了很多有关验证码集成的资源，但没有看到如何将其集成到 Blazor Webassemble 中。

要实现将 reCAPTCHA 小部件集成到 Blazor Web assembly 中的要求，您可以尝试：

创建这两个 js 文件并将其包含在wwwroot/Scripts文件夹中

脚本加载器.js

// loadScript: returns a promise that completes when the script loads
window.loadScript = function (scriptPath) {
    // check list - if already loaded we can ignore
    if (loaded[scriptPath]) {
        console.log(scriptPath + " already loaded");
        // return 'empty' promise
        return new this.Promise(function (resolve, reject) {
            resolve();
        });
    }

    return new Promise(function (resolve, reject) {
        // create JS library script element
        var script = document.createElement("script");

        if (scriptPath === "https://www.google.com/recaptcha/api.js") {
            script.src = scriptPath + "?render=explicit";
            script.async = true;
            script.defer = true;
        }

        script.src = scriptPath;
        script.type = "text/javascript";

        console.log(scriptPath + " created");

        // flag as loading/loaded
        loaded[scriptPath] = true;

        // if the script returns okay, return resolve
        script.onload = function () {
            console.log(scriptPath + " loaded ok");
            resolve(scriptPath);
        };

        // if it fails, return reject
        script.onerror = function () {
            console.log(scriptPath + " load failed");
            reject(scriptPath);
        }

        // scripts will load at end of body
        document["body"].appendChild(script);
    });
}
// store list of what scripts we've loaded
loaded = [];

注意：这个github示例引用的代码可以帮助动态加载JavaScript库，我做了一些修改。

JsOfReCAPTCHA.js

function render_recaptcha(dotNetObj, selector, sitekey) { 
    return grecaptcha.render(selector, {
        'sitekey': sitekey,
        'callback': (response) => { dotNetObj.invokeMethodAsync('CallbackOnSuccess', response); },
        'expired-callback': () => { dotNetObj.invokeMethodAsync('CallbackOnExpired'); }
    });  
};

function getResponse(widgetId) {
    return grecaptcha.getResponse(widgetId);
}

在index.html中创建并添加脚本引用

<script src="Scripts/scriptLoader.js"></script>

使用以下代码创建 ReCAPTCHA.razor

@page "/recaptcha"
@using  System.ComponentModel
@inject IJSRuntime JS;

<h3>reCAPTCHA</h3>


<div id="recaptcha_container"></div>

<button type="button" class="btn btn-primary" @onclick="ShowResponse">Show Response</button>

<br />

@reCAPTCHA_response

@code {
    private int WidgetId;

    public string reCAPTCHA_response;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JS.InvokeVoidAsync("loadScript", "https://www.google.com/recaptcha/api.js");

        await JS.InvokeVoidAsync("loadScript", "Scripts/JsOfReCAPTCHA.js");

        if (firstRender)
        {
            WidgetId = await JS.InvokeAsync<int>("render_recaptcha", DotNetObjectReference.Create(this), "recaptcha_container", "your_site_key_here");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
    public void CallbackOnSuccess(string response)
    {
        reCAPTCHA_response = response;
    }

    [JSInvokable, EditorBrowsable(EditorBrowsableState.Never)]
    public void CallbackOnExpired()
    {
        //...
    }


    private void ShowResponse()
    {
        reCAPTCHA_response = $"The response for the reCAPTCHA widget: {reCAPTCHA_response}";
    }
}

测试结果