如何在 razor 组件中使用 Blazor .NET 8 生成身份验证器二维码

Question

使用 .NET 8 中的新 Identity razor 组件时，您仍然可以获得本文的链接：https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-enable-qrcodes？ view=aspnetcore-8.0#将二维码添加到2fa配置页面

但是这篇文章是针对

_cshtml

文件的，所以它对我不起作用，因为我使用新的

.razor

文件并且加载事件永远不会触发。我已经尝试执行

OnInitializedAsync()

方法中的代码，但是无法执行 JavaScript 代码。我也尝试过使用

OnAfterRenderAsync

方法，但它也永远不会被调用。那么，如何在新的 Blazor 应用程序中创建身份验证器二维码？

Answer 1

让我们获取

qrcode.js

文件并将其放置在 blazor project/wwwroot/js 文件夹中。我的测试示例是一个使用

InteractiveServerRenderMode

的 blazor Web 应用程序，因此我在

<script>

中有

App.razor

部分。

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="js/qrcode.js"></script>
    <script>
        window.generateQrcode = (url) => {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: url,
                width: 100,
                height: 100
            });
        };
    </script>
</body>

然后在我的

Home.razor

中我添加了js运行时和渲染模式。

@page "/"
@inject IJSRuntime JS
@rendermode InteractiveServer


<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>
<p>@url</p>
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>

Welcome to your new app.

@code {
    private string? url = "www.bing.com";  

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            url = "www.bing.com";
            await JS.InvokeVoidAsync("generateQrcode", url);
        }
    }
}

那么这是测试结果。

如何在 razor 组件中使用 Blazor .NET 8 生成身份验证器二维码

问题描述投票：0回答：1

1个回答

最新问题

如何在 razor 组件中使用 Blazor .NET 8 生成身份验证器二维码

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1