Flutter自动登录插件autologin_darwin的使用

Flutter自动登录插件autologin_darwin的使用

该插件实现了iOS和macOS平台上的自动登录功能。你可以通过以下方式来使用它。

使用

此包是被推荐使用的，这意味着你可以在项目中直接使用autologin。当你这样做的时候，此包会自动包含在你的应用中，所以你不需要在pubspec.yaml文件中添加它。

但是，如果你导入此包以直接使用其任何API，则应像往常一样将其添加到pubspec.yaml文件中。

安装

为了存储凭证，此插件使用了共享网络凭据。为了使这正常工作，你需要设置关联域授权。主要文档可以在Apple开发者网站上找到。至少apple-app-site-association文件必须在https://<your-domain>/.well-known/apple-app-site-association可访问，并且必须包含如下内容：

{
  "webcredentials": {
    "apps": [
      "<your-team-id>.<your-bundle-id>"
    ]
  }
}

你的团队ID可以在ios/Runner.xcodeproj/project.pbxproj中找到，例如，在DEVELOPMENT_TEAM键下查找；而包ID可以在PRODUCT_BUNDLE_IDENTIFIER键下查找。Apple会用其CDN缓存对上述文件的请求，但你可以在这里检查缓存值：https://app-site-association.cdn-apple.com/a/v1/<your-domain>。

如果你还没有设置你的应用，请检查Apple开发者资源。

为了在iOS和macOS上使用零触登录，你需要添加iCloud能力并在Xcode项目中配置iCloud键值存储。以下是逐步指南：

1. 打开你的Xcode项目。
2. 在项目导航器中选择你的项目以打开项目设置。
3. 在“目标”下选择你的目标。
4. 转到“签名与功能”选项卡。
5. 点击“+ 功能”按钮。
6. 滑动并选择“iCloud”。
7. 在iCloud部分中，勾选“键值存储”。

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用autologin插件。

import 'dart:async';

import 'package:autologin/autologin.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const DemoFrame());
}

/// 这个框架只是为了确保DemoPage有一个可以显示snackbar的上下文
class DemoFrame extends StatelessWidget {
  const DemoFrame({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Autologin-Plugin 示例应用'),
        ),
        body: const SingleChildScrollView(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 24),
          child: Align(
            child: SizedBox(
              width: 400,
              child: DemoPage(),
            ),
          ),
        ),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  [@override](/user/override)
  State<DemoPage> createState() => _DemoPageState();
}

/// 大多数这些状态字段只是为了调试发生了什么
class _DemoPageState extends State<DemoPage> {
  bool? isPlatformSupported;
  String? usernameNote;
  String? passwordNote;
  bool obscurePassword = true;
  final usernameController = TextEditingController();
  final passwordController = TextEditingController();
  String loginToken = '加载中...';

  [@override](/user/override)
  void initState() {
    super.initState();
    unawaited(initPlatformState());
    usernameController.addListener(resetUsernameNote);
    passwordController.addListener(resetPasswordNote);
    AutologinPlugin.setup(
      domain: 'rekire.github.io',
      appId: 'eu.rekisoft.flutter.autologin',
      appName: 'Autologin Demo',
    );
    AutologinPlugin.requestLoginToken().then((value) async {
      if (value != null) {
        setState(() => loginToken = value);
      } else {
        final hasZeroTouchSupport = (await AutologinPlugin.performCompatibilityChecks()).hasZeroTouchSupport;
        setState(() => loginToken = hasZeroTouchSupport ? '这是首次启动' : '平台不支持');
        if (hasZeroTouchSupport) {
          await AutologinPlugin.saveLoginToken('首次启动 ${DateTime.now()}');
        }
      }
    }).onError((error, stackTrace) {
      setState(() => loginToken = error.toString());
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    usernameController.removeListener(resetUsernameNote);
    passwordController.removeListener(resetPasswordNote);
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    final isSupported = await AutologinPlugin.isPlatformSupported;
    setState(() => isPlatformSupported = isSupported);
  }

  void resetUsernameNote() {
    setState(() => usernameNote = null);
  }

  void resetPasswordNote() {
    setState(() => passwordNote = null);
  }

  Future<void> requestCredentials() async {
    final credentials = await AutologinPlugin.requestCredentials();

    if (mounted) {
      setState(() {
        if (credentials?.username != null) {
          usernameController.text = credentials!.username!;
          usernameNote = null;
        } else {
          usernameController.text = '';
          usernameNote = 'API未提供用户名';
        }
        if (credentials?.password != null) {
          passwordController.text = credentials!.password!;
          passwordNote = null;
        } else {
          passwordController.text = '';
          passwordNote = 'API未提供密码';
        }
      });
    }
  }

  Future<void> saveCredentials() async {
    final success = await AutologinPlugin.saveCredentials(
      Credential(username: usernameController.text, password: passwordController.text, domain: 'rekire.github.io'),
    );

    if (!success && mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('保存凭证失败！'),
        ),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (isPlatformSupported != true)
          const Padding(
            padding: EdgeInsets.only(bottom: 16),
            child: Text('⚠️ 此${kIsWeb ? '浏览器' : '平台'}不支持 ⚠️'),
          ),
        TextFormField(
          controller: usernameController,
          textInputAction: TextInputAction.next,
          autofillHints: const [AutofillHints.username],
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: '用户名',
            helperText: usernameNote,
          ),
          onFieldSubmitted: (_) => saveCredentials(),
        ),
        const SizedBox(height: 16),
        TextFormField(
          controller: passwordController,
          obscureText: obscurePassword,
          textInputAction: TextInputAction.send,
          keyboardType: TextInputType.visiblePassword,
          autofillHints: const [AutofillHints.password],
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: '密码',
            helperText: passwordNote,
            suffixIcon: IconButton(
              icon: Icon(obscurePassword ? Icons.visibility : Icons.visibility_off),
              onPressed: () {
                setState(() => obscurePassword = !obscurePassword);
              },
              tooltip: obscurePassword ? '显示密码' : '隐藏密码',
            ),
          ),
          onFieldSubmitted: (_) => saveCredentials(),
        ),
        const SizedBox(height: 16),
        FilledButton(
          onPressed: isPlatformSupported == true ? saveCredentials : null,
          child: const Text('保存凭证'),
        ),
        const SizedBox(height: 8),
        OutlinedButton(
          onPressed: () {
            usernameController.text = 'Some-Username';
            passwordController.text = r'Example-P@§$w0rd!';
          },
          child: const Text('输入示例数据'),
        ),
        const SizedBox(height: 8),
        OutlinedButton(
          onPressed: isPlatformSupported == true ? requestCredentials : null,
          child: const Text('请求登录数据'),
        ),
        const SizedBox(height: 8),
        Text('登录令牌: $loginToken'),
      ],
    );
  }
}