Flutter杂学: iOS 上启用自动填充和关联域

下面是详细的配置和代码,以确保在 iOS 上启用自动填充和关联域(Associated Domains)功能。

配置步骤

1. 在 Apple Developer 控制台中启用 Associated Domains

  • 登录 Apple Developer。
  • 导航至您的 App ID 设置页面。
  • 找到您要配置的 App ID,并点击编辑(Edit)。
  • 在 Capabilities 部分启用 "Associated Domains"。添加您的域名,例如 applinks:example.com 和 webcredentials:example.com。

2. 更新 Xcode 项目8

  • 打开您的 Flutter 项目的 Runner.xcworkspace 文件:open ios/Runner.xcworkspace
  • 选择项目导航器中的 Runner 项目。
  • 在目标 (Targets) 部分选择 Runner。
  • 打开 "Signing & Capabilities" 选项卡。
  • 点击左上角的 + Capability 按钮,选择 "Associated Domains"。
  • 在 Associated Domains 部分添加您的域名,如 applinks:example.com 和 webcredentials:example.com。

3. 配置服务器上的 apple-app-site-association 文件

在您的服务器上创建 .well-known 目录。

在该目录下创建一个 apple-app-site-association 文件,内容如下:

复制代码
json
{
    "applinks": {
        "apps": []
    },
    "webcredentials": {
        "apps": ["ABCDE12345.com.example.app"]
    }
}

将 ABCDE12345.com.example.app 替换为您的实际应用程序 ID。

4. 更新 Info.plist 文件

编辑 ios/Runner/Info.plist 文件,添加以下键值:

复制代码
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>NSUserTrackingUsageDescription</key>
<string>We need your permission to track usage data.</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.example.app</string> <!-- 替换为您的实际 URL Scheme -->
        </array>
    </dict>
</array>
<key>AssociatedDomains</key>
<array>
    <string>applinks:example.com</string> <!-- 替换为您的实际域名 -->
    <string>webcredentials:example.com</string> <!-- 替换为您的实际域名 -->
</array>

完整的 Flutter 示例代码

复制代码
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  final FlutterSecureStorage storage = FlutterSecureStorage();

  @override
  void initState() {
    super.initState();
    _loadCredentials();
  }

  Future<void> _loadCredentials() async {
    String? username = await storage.read(key: "username");
    String? password = await storage.read(key: "password");

    if (username != null && password != null) {
      setState(() {
        usernameController.text = username;
        passwordController.text = password;
      });
    }
  }

  Future<void> _saveCredentials(String username, String password) async {
    await storage.write(key: "username", value: username);
    await storage.write(key: "password", value: password);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AutofillGroup(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(
                  controller: usernameController,
                  decoration: InputDecoration(labelText: 'Username'),
                  autofillHints: [AutofillHints.username],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(
                  controller: passwordController,
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                  autofillHints: [AutofillHints.password],
                ),
              ),
              ElevatedButton(
                onPressed: () async {
                  String username = usernameController.text;
                  String password = passwordController.text;
                  await _saveCredentials(username, password);
                  // Handle login logic here
                },
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: LoginPage()));
}
  • 发布新版本
  • 构建新的应用版本:
  • flutter build ios打开 Xcode 并归档应用:打开 ios/Runner.xcworkspace。
  • 选择 Product -> Archive。
  • 将应用提交到 App Store Connect。
  • 发布新版本:
  • 登录 App Store Connect。
  • 提交新版本并等待审核通过。

总结

通过上述步骤和代码配置,您可以在 iOS 上启用自动填充和关联域功能。请确保所有步骤都正确完成,并在发布前进行充分测试。这样不仅可以提升用户体验,还可以确保应用的稳定性和安全性。如果有任何问题或需要进一步的帮助,请随时询问。

相关推荐
行者9623 分钟前
Flutter与OpenHarmony深度集成:数据导出组件的实战优化与性能提升
flutter·harmonyos·鸿蒙
小雨下雨的雨25 分钟前
Flutter 框架跨平台鸿蒙开发 —— Row & Column 布局之轴线控制艺术
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 小时前
Flutter 框架跨平台鸿蒙开发 —— Center 控件之完美居中之道
flutter·ui·华为·harmonyos·鸿蒙
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Icon 控件之图标交互美学
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨2 小时前
Flutter 框架跨平台鸿蒙开发 —— Placeholder 控件之布局雏形美学
flutter·ui·华为·harmonyos·鸿蒙系统
行者962 小时前
OpenHarmony Flutter弹出菜单组件深度实践:从基础到高级的完整指南
flutter·harmonyos·鸿蒙
前端不太难3 小时前
Flutter / RN / iOS,在长期维护下的性能差异本质
flutter·ios
小雨下雨的雨3 小时前
Flutter 框架跨平台鸿蒙开发 —— Padding 控件之空间呼吸艺术
flutter·ui·华为·harmonyos·鸿蒙系统
行者963 小时前
Flutter到OpenHarmony:横竖屏自适应布局深度实践
flutter·harmonyos·鸿蒙
小雨下雨的雨4 小时前
Flutter 框架跨平台鸿蒙开发 —— Align 控件之精准定位美学
flutter·ui·华为·harmonyos·鸿蒙