Flutter魔法功能集成插件magic_sdk的使用

magic_sdk 是一个用于集成 Magic 身份验证服务的 Flutter 插件。Magic 是一个无密码身份验证解决方案，允许用户通过电子邮件或社交登录进行身份验证，而无需处理密码。通过 magic_sdk 插件，你可以在 Flutter 应用中轻松集成 Magic 的身份验证功能。

以下是如何在 Flutter 项目中使用 magic_sdk 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 magic_sdk 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  magic_sdk: ^1.0.0 # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 Magic

在你的 Flutter 项目中，首先需要初始化 Magic。通常，你可以在 main.dart 文件中进行初始化。

import 'package:flutter/material.dart';
import 'package:magic_sdk/magic_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Magic
  await Magic.instance.initialize(
    apiKey: 'YOUR_MAGIC_API_KEY', // 替换为你的 Magic API Key
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Magic Demo',
      home: MagicLoginScreen(),
    );
  }
}

3. 实现登录功能

接下来，你可以创建一个登录页面，使用 Magic 进行无密码登录。

import 'package:flutter/material.dart';
import 'package:magic_sdk/magic_sdk.dart';

class MagicLoginScreen extends StatefulWidget {
  @override
  _MagicLoginScreenState createState() => _MagicLoginScreenState();
}

class _MagicLoginScreenState extends State<MagicLoginScreen> {
  final _emailController = TextEditingController();

  Future<void> _loginWithEmail() async {
    try {
      final email = _emailController.text.trim();
      if (email.isEmpty) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Please enter your email')),
        );
        return;
      }

      // 使用 Magic 进行登录
      final didToken = await Magic.instance.auth.loginWithMagicLink(email: email);

      // 登录成功后，你可以将 didToken 发送到你的后端进行验证
      print('DID Token: $didToken');

      // 导航到主页
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Login failed: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Magic Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(
                labelText: 'Email',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _loginWithEmail,
              child: Text('Login with Magic Link'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome!'),
      ),
    );
  }
}

4. 处理用户会话

Magic 会管理用户的会话状态。你可以使用 Magic.instance.user 来获取当前用户的信息，或者检查用户是否已经登录。

Future<void> checkUserSession() async {
  final isLoggedIn = await Magic.instance.user.isLoggedIn();
  if (isLoggedIn) {
    final userMetadata = await Magic.instance.user.getMetadata();
    print('User is logged in: $userMetadata');
  } else {
    print('User is not logged in');
  }
}

5. 退出登录

当用户想要退出登录时，你可以调用 logout 方法来结束会话。

Future<void> _logout() async {
  await Magic.instance.user.logout();
  // 导航回登录页面
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => MagicLoginScreen()),
  );
}

6. 处理 Magic 事件

Magic 提供了一些事件监听器，你可以监听这些事件来处理用户登录或登出等操作。

Magic.instance.onEvent.listen((event) {
  if (event.type == MagicEventType.Login) {
    print('User logged in');
  } else if (event.type == MagicEventType.Logout) {
    print('User logged out');
  }
});