Flutter FCM Token同步插件fcm_token_sync的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter FCM Token同步插件fcm_token_sync的使用

FCM Token Sync

一个用于保持您的FCM令牌与后端同步的小部件。

✨ 特性

  • 保持用户的FCM令牌与后端同步
  • 自动处理权限请求
  • 100% 测试覆盖率
  • 零安全

🚀 安装

从pub.dev安装：

fcm_token_sync: ^1.0.4

✅ 前提条件

您应该已经在项目中设置了Firebase Cloud Messaging。详情请参见这里。

此外，您还需要构建一种将FCM令牌发送到后端服务的方法。

🔨 使用方法

该包包含一个FcmTokenSync小部件，您可以将其包裹在项目中的任何小部件周围。

一些使用建议：

  • 在您希望请求用户通知权限的地方添加此小部件。
  • 这可能是在用户注册和/或登录之后。

示例

class HomePage extends StatelessWidget {
    const HomePage({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return FcmTokenSync(
            firebaseMessaging: FirebaseMessaging.instance,
            onToken: _updateFcmToken,
            child: Scaffold(), // 显示在此处的小部件
        );
    }

    Future<void> _updateFcmToken(String token) async {
        // 在此处发送更新后的令牌到您的后端
    }
}

更多关于Flutter FCM Token同步插件fcm_token_sync的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter FCM Token同步插件fcm_token_sync的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用fcm_token_sync插件来同步FCM（Firebase Cloud Messaging）Token的示例代码。这个插件可以自动将FCM Token同步到你的后端服务器。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加fcm_token_sync依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0 # 确保你有firebase_core依赖
  firebase_messaging: ^11.2.0 # 确保你有firebase_messaging依赖
  fcm_token_sync: ^0.3.0 # 使用最新版本

2. 配置Firebase

确保你已经在Firebase控制台中为你的应用配置了Firebase Cloud Messaging，并获取了google-services.json文件，将其放置在android/app/目录下。对于iOS，你需要配置GoogleService-Info.plist文件并放置在ios/Runner/目录下。

3. 初始化Firebase和FCM Token Sync

在你的Flutter应用的主文件中（通常是main.dart），初始化Firebase和fcm_token_sync插件。

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:fcm_token_sync/fcm_token_sync.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Firebase
  await Firebase.initializeApp();

  // 获取Firebase Messaging实例
  FirebaseMessaging messaging = FirebaseMessaging.instance;

  // 配置FCM Token Sync
  FcmTokenSync fcmTokenSync = FcmTokenSync(
    messaging: messaging,
    // 配置你的后端服务器URL和端点
    serverUrl: 'https://your-backend-server.com/api/fcm-token',
    headers: <String, String>{
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_AUTH_TOKEN', // 如果需要认证
    },
    // Token发生变化时的回调函数（可选）
    onTokenSync: (String token) {
      print('FCM Token synced: $token');
    },
  );

  // 监听Token变化事件
  messaging.onTokenRefresh.listen((newToken) {
    print('FCM Token refreshed: $newToken');
    // 你可以在这里手动触发同步，但fcm_token_sync已经处理了这部分
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FCM Token Sync Example'),
        ),
        body: Center(
          child: Text('Check the console for FCM Token sync messages'),
        ),
      ),
    );
  }
}

4. 后端服务器端点

确保你的后端服务器有一个端点可以接受POST请求，并保存FCM Token。以下是一个简单的Node.js/Express示例：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParser.json());

app.post('/api/fcm-token', (req, res) => {
  const fcmToken = req.body.token;
  // 保存FCM Token到你的数据库
  console.log('Received FCM Token:', fcmToken);
  res.status(200).send({ message: 'Token received' });
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

5. 运行应用

确保你已经安装了所有依赖，并运行你的Flutter应用。打开控制台，你应该能看到FCM Token同步的消息。

注意

  • 确保你的后端服务器URL和端点是正确的。
  • 根据你的后端服务器配置，调整headers中的认证信息。
  • fcm_token_sync插件会处理Token的自动同步，但你可以在需要时手动触发同步。

这样，你就成功地在Flutter应用中集成了fcm_token_sync插件，用于同步FCM Token到你的后端服务器。

回到顶部