Flutter-Android-APP实现邮箱登录scheme唤起

需求: 用户输入邮箱地址调用接口传递给后端服务器进行生成唤起app的url 用户点击邮箱的url进行唤起app 并解析参数信息

科普: 唤起方案

Scheme

•   iOS和Android都支持，只需APP开发时注册Scheme，当用户点击到此类链接时，会自动唤醒APP，借助于URL Router机制，则还可以   跳转至指定页面。

•   一般会有弹窗提醒，safari中如未安装app会提示链接无效。

•   一般通过超时判断是否唤起App，然后走下载新增流程。

实现:uni_links插件监听scheme 来获取登录的参数判断用户是否登录成功

uni_links 插件是用于在 Flutter 应用程序中处理应用程序链接的插件。它允许你监听应用程序接收到的链接，并在需要时处理这些链接。主要功能包括：

订阅链接：通过使用 uriLinkStream，你可以订阅应用程序接收到的链接，当链接到达时，将触发一个事件，你可以在监听器中处理这个链接。
处理链接参数：一旦收到链接，你可以从链接中提取出参数，比如查询参数或路径参数，并根据这些参数执行相应的操作。
应用程序启动链接：uni_links 插件还允许你获取应用程序启动时的链接，这对于处理通过链接启动应用程序的情况非常有用。
多平台支持：uni_links 插件支持在 Android 和 iOS 平台上处理链接，因此你可以在这两个平台上实现相同的链接处理逻辑。

测试用户跳转:url_launcher 插件用在移动设备上启动URL，例如打开网页或发送电子邮件。

代码:

1.现在需要测试一下是否可以唤起我的APP

dart 复制代码

模仿 用户点击邮箱的URL scheme链接
const url = 'Clipto://openPage?page=home';
        if (await canLaunch(url)) {
          await launch(url);
        } else {
          throw 'Could not launch $url';
        }

2.Flutter应用程序中需要设置app的scheme 及 host打开的页面

xml 复制代码

<!-- 添加以下intent-filter以支持自定义URI scheme -->
     <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="Clipto" android:host="openPage" />
     </intent-filter>

3.在myapp入口下进行订阅点击后的校验是否为该app的scheme 解析用户数据进行登录跳转

scss 复制代码

  // 订阅邮箱链接
    uriLinkStream.listen((Uri? uri) {
      if (uri != null...校验) {
        print('跳转$uri');
        navigatorKey.currentState!.pushReplacementNamed(Routes.home);
      }
    });

遇到的跳转问题

在 MaterialApp 的 home 或 routes 中使用 Navigator 跳转可能会导致上下文不正确的问题。您可以尝试使用以下方法来跳转：

scss 复制代码

dartCopy codeWidgetsBinding.instance!.addPostFrameCallback((_) {
  uriLinkStream.listen((Uri? uri) {
    if (uri != null) {
      print('跳转$uri');
      Navigator.pushReplacementNamed(context, Routes.home);
    }
  });
});

如果上下文仍然无法正常工作，您可以尝试以下方法：

使用 GlobalKey 获取 NavigatorState ：在 MaterialApp 中设置 navigatorKey，然后通过 GlobalKey 来获取 NavigatorState。

scss 复制代码

dartCopy codefinal GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: navigatorKey,
    // other configurations
  );
}

在需要进行导航的地方：

arduino 复制代码

dart
Copy code
navigatorKey.currentState!.pushReplacementNamed(Routes.home);

使用 MaterialApp 的 onGenerateRoute ：通过 onGenerateRoute 自定义路由生成行为。

scss 复制代码

dartCopy code@override
Widget build(BuildContext context) {
  return MaterialApp(
    // other configurations
    onGenerateRoute: (settings) {
      if (settings.name == Routes.home) {
        return MaterialPageRoute(builder: (context) => HomeScreen());
      }
      // Handle other routes if needed
    },
  );
}

然后，在需要进行导航的地方：

scss 复制代码

dartCopy codeuriLinkStream.listen((Uri? uri) {
  if (uri != null) {
    print('跳转$uri');
    navigatorKey.currentState!.pushReplacementNamed(Routes.home);
  }
});

这些方法应该可以帮助您在不同的上下文中正确地进行导航。

文档后续会补充更加完整希望各位大佬们提一下意见