.NET MAUI Blazor应用登录表单凭据自动填充失效求助

1. 规范表单结构 #

首先确保登录表单符合浏览器自动填充的识别标准，多数平台需要完整的表单上下文才能触发凭据提示：

<form method="post" onsubmit="event.preventDefault(); /* 替换为你的登录逻辑 */">
  <input name="username" type="text" autocomplete="username" required />
  <input name="password" type="password" autocomplete="current-password" required />
  <button type="submit">登录</button>
</form>

• 用<form>标签包裹输入框，添加method="post"标识表单用途
• 给输入框加上required属性，帮助平台识别这是必填的登录字段
• 添加真实的submit按钮，部分浏览器需要检测到提交动作才会触发凭据保存提示

2. 配置各平台WebView的自动填充权限 #

MAUI Blazor依赖各平台的WebView组件，需分别开启对应平台的自动填充支持：

Android平台 #

在Platforms/Android/MainActivity.cs中，添加WebView的配置逻辑：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    var blazorWebView = FindViewById<BlazorWebView>(Resource.Id.blazorWebView);
    if (blazorWebView != null)
    {
        var webView = blazorWebView.WebView;
        webView.Settings.SavePassword = true;
        webView.Settings.DomStorageEnabled = true;
        webView.Settings.JavaScriptEnabled = true;
    }
}

若需要全局配置，可使用自定义渲染器：

[assembly: ExportRenderer(typeof(BlazorWebView), typeof(CustomBlazorWebViewRenderer))]
namespace YourAppNamespace.Platforms.Android
{
    public class CustomBlazorWebViewRenderer : BlazorWebViewRenderer
    {
        public CustomBlazorWebViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<BlazorWebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Settings.SavePassword = true;
                Control.Settings.DomStorageEnabled = true;
            }
        }
    }
}

iOS平台 #

在Platforms/iOS/Program.cs中，配置WKWebView的自动填充相关设置：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    })
    .ConfigureBlazorWebView(options =>
    {
        options.WkWebViewConfiguration.Preferences.JavaScriptEnabled = true;
        options.WkWebViewConfiguration.WebsiteDataStore = WKWebsiteDataStore.DefaultDataStore;
        options.WkWebViewConfiguration.DefaultWebpagePreferences.AllowsContentJavaScript = true;
    });

同时确保Info.plist中没有禁用自动填充的相关配置。

Windows平台 #

在Platforms/Windows/App.xaml.cs中，开启WebView2的自动填充开关：

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    base.OnLaunched(args);

    var window = new MainWindow();
    var blazorWebView = window.Content as BlazorWebView;
    if (blazorWebView != null && blazorWebView.WebView2 != null)
    {
        blazorWebView.WebView2.CoreWebView2.Settings.IsPasswordAutosaveEnabled = true;
        blazorWebView.WebView2.CoreWebView2.Settings.IsGeneralAutofillEnabled = true;
    }
    window.Activate();
}

3. 升级.NET MAUI版本 #

旧版本的.NET MAUI存在WebView自动填充的已知bug，建议使用.NET 7及以上的稳定版本，多数相关问题已在新版本中修复。

内容的提问来源于stack exchange，提问作者Kebechet