如何在Blazor中获取客户端IP和浏览器信息？

时间：2019-09-17 21:43:14

标签： blazor blazor-server-side

如何在Blazor服务器端获取客户端信息，例如IP地址和浏览器名称/版本？

4 个答案:

答案 0 :(得分：2)

在aspnetcore3.1中，这对我有用：

  1. 设置特殊类来保存必需的信息：
public class ConnectionInfo
{
    public string RemoteIpAddress { get; set; } = "-none-";
}
  1. 在_Host.cshtml中创建实例并作为参数传递给App组件：
@{
    var connectionInfo = new ConnectionInfo() 
    { 
        RemoteIpAddress = Request.HttpContext.Connection.RemoteIpAddress.ToString() 
    };
}
...
<component type="typeof(App)" 
           render-mode="ServerPrerendered"
           param-ConnectionInfo="connectionInfo" />
  1. 在App.razor中捕获并重新发布为CascadingValue：
<CascadingValue Value="connectionInfo">
  <Router AppAssembly="typeof(Program).Assembly">
      ...
  </Router>
</CascadingValue>

@code {
    [Parameter]
    public ConnectionInfo? connectionInfo { get; set; }
}
  1. 以CascadingParameter的形式在任何子页面/组件中获取：
@code {
    [CascadingParameter]
    private ConnectionInfo? connectionInfo { get; set; }
}

这里唯一的问题是漫游用户-当用户更改其IP地址并且Blazor没有“捕获”此地址（例如，后台的浏览器选项卡）时，您将拥有旧的IP地址，直到用户刷新（F5）页面为止。

答案 1 :(得分：1)

请注意，这仅是指服务器端Blazor 。

  

“目前尚无一个好的方法。我们将调查   我们如何提供这些信息以使客户可以使用。”

来源：Blazor dev at Github

解决方法

客户端对服务器进行ajax调用，然后服务器可以获取本地ip号码。 Javascript：

window.GetIP = function () {
    var token = $('input[name="__RequestVerificationToken"]').val();
    var myData = {}; //if you want to post extra data
    var dataWithAntiforgeryToken = $.extend(myData, { '__RequestVerificationToken': token });
    var ip = String('');
    $.ajax({
        async: !1, //async works as well 
        url: "/api/sampledata/getip",
        type: "POST",
        data: dataWithAntiforgeryToken,
        success: function (data) {
            ip = data;
            console.log('Got IP: ' + ip);
        },
        error: function () {
            console.log('Failed to get IP!');
        }
    });
    return ip;
};

后端（ASP.NET Core 3.0）：

    [HttpPost("[action]")]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public string GetIP()
    {
        return HttpContext.Connection.RemoteIpAddress?.ToString();
    }

请注意，这是不安全的，ipnumber可以被欺骗，因此请勿用于任何重要的事情。

答案 2 :(得分：1)

以下是 2021 年在服务器端 Blazor for .NET 5 中的实现方法。

请注意，我的解决方案只会为您提供一个 IP 地址，但使用我的解决方案应该可以轻松获得用户代理。

我将在此处复制我的博客文章的内容：https://bartecki.me/blog/Blazor-serverside-get-remote-ip

TLDR：

您可以使用 JavaScript 调用您自己公开的端点，该端点将使用以下代码返回远程连接 IP：

RemoteIpAddress = Request.HttpContext.Connection.RemoteIpAddress.ToString()

...如果你有反向代理服务器，它的缺点是必须处理，否则你只会得到反向代理的 IP 地址。

或者您可以使用 JavaScript 调用外部端点，该端点将为您返回一个 IP 地址，但缺点是您必须配置 CORS，即使这样，某些广告拦截扩展程序也会阻止它。

详情：

两种方法

方法 1：使用 JavaScript 调用外部服务

优点：

  • 如果您使用像 nginx、traefik 这样的反向代理，则稍微简单一些

缺点：

  • 可能会被外部扩展程序/广告拦截器阻止
  • 您必须配置 CORS
_Host.cshtml 
<script>
  window.getIpAddress = () => {
    return fetch('https://jsonip.com/')
      .then((response) => response.json())
      .then((data) => {
        return data.ip
      })
  }
</script>
RazorPage.razor.cs 
    public partial class RazorPage : ComponentBase
    {
        [Inject] public IJSRuntime jsRuntime { get; set; }

        public async Task<string> GetIpAddress()
        {
            try
            {
                var ipAddress = await jsRuntime.InvokeAsync<string>("getIpAddress")
                    .ConfigureAwait(true);
                return ipAddress;
            }
            catch(Exception e)
            {
                //If your request was blocked by CORS or some extension like uBlock Origin then you will get an exception.
                return string.Empty;
            }
        }
    }
Startup.cs 
        public void ConfigureServices(IServiceCollection services)
        {
            //code...
            services
                .AddCors(x => x.AddPolicy("externalRequests",
                    policy => policy
                .WithOrigins("https://jsonip.com")));
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            //code...
            app.UseCors("externalRequests");
        }

方法 2：在 Blazor 应用中公开端点并使用 JavaScript 调用它

优点：

  • 您无需配置 CORS
  • 不会被扩展程序或广告拦截器阻止

缺点：

  • 如果您使用 nginx、traefik 等反向代理，可能会稍微复杂一些。

现在要小心，因为您将使用这种方法，因为如果您使用的是反向代理，那么您实际上会收到您的反向代理 IP 地址。 您的反向代理很可能已经在某种标头中转发了外部客户端的 IP 地址，但这取决于您自己弄清楚。

示例：https://www.nginx.com/resources/wiki/start/topics/examples/forwarded/

InfoController.cs 
    [Route("api/[controller]")]
    [ApiController]
    public class InfoController : ControllerBase
    {
        [HttpGet]
        [Route("ipaddress")]
        public async Task<string> GetIpAddress()
        {
            var remoteIpAddress = this.HttpContext.Request.HttpContext.Connection.RemoteIpAddress;
            if (remoteIpAddress != null)
                return remoteIpAddress.ToString();
            return string.Empty;
        }
    }
Startup.cs 
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers(); //remember to map controllers if you don't have this line
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
_Host.cshtml 
<script>
  window.getIpAddress = () => {
    return fetch('/api/info/ipaddress')
      .then((response) => response.text())
      .then((data) => {
        return data
      })
  }
</script>
RazorPage.razor.cs 
    public partial class RazorPage : ComponentBase
    {
        [Inject] public IJSRuntime jsRuntime { get; set; }

        public async Task<string> GetIpAddress()
        {
            try
            {
                var ipAddress = await jsRuntime.InvokeAsync<string>("getIpAddress")
                    .ConfigureAwait(true);
                return ipAddress;
            }
            catch(Exception e)
            {
                //If your request was blocked by CORS or some extension like uBlock Origin then you will get an exception.
                return string.Empty;
            }
        }
    }

答案 3 :(得分：0)

好吧，今天早上我遇到了这个问题，解决问题的方法是创建一个包含字符串属性的静态类，然后可以在_host.cshtml中填写该属性，然后在Blazor的任何位置访问它组件，因为Razor页面已经对此提供支持。

    public static class BlazorAppContext
    {
        /// <summary>
        /// The IP for the current session
        /// </summary>
        public static string CurrentUserIP { get; set; }
    }

_host.cshtml：

@inject IHttpContextAccessor httpContextAccessor
@{
    BlazorAppContext.CurrentUserIP =   httpContextAccessor.HttpContext.Connection?.RemoteIpAddress.ToString();
}

您还可以尝试一种临时方法，然后可以通过DI使用它。

希望对您有帮助。

相关问题
最新问题