Flutter OAuth认证插件magic_ext_oauth的使用

Flutter OAuth认证插件magic_ext_oauth的使用

Magic 提供了一种创新的方法来保护您的用户，通过无密码认证流，而不会像传统的OAuth实现那样影响用户体验。

功能

这是您进入安全的无密码认证的入口，适用于基于iOS或Android的Flutter应用。

安装

在 pubspec.yaml 文件中添加 magic_sdk 和 magic_ext_oauth：

dependencies:
  flutter:
    sdk: flutter
  magic_sdk: ^4.0.0
  magic_ext_oauth: ^0.3.0

运行以下命令以安装依赖项：

$ dart pub get

创建SDK实例

在 main.dart 中，使用您的发布密钥实例化 Magic：

void main() {
  runApp(const MyApp());

  Magic.instance = Magic("YOUR_PUBLISHABLE_KEY");
}

在顶层使用 Stack 并将 Magic.instance.relayer 添加到 Stack 的子元素中，以确保最佳性能。注意：Relayer 是建立应用与 Magic 服务之间通信所必需的。确保在需要进行身份验证或与区块链交互时包含它。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(children: [
        MaterialApp(
          title: 'Magic Demo',
          home: const LoginPage(),
        ),
        Magic.instance.relayer // 插入 relayer
      ]),
    );
  }
}

使用OAuth进行身份验证

现在您可以使用OAuth进行身份验证了！以下是如何使用GitHub作为OAuth提供者进行登录的示例：

import 'package:magic_sdk/magic_sdk.dart';
import 'package:magic_ext_oauth/magic_ext_oauth.dart';

// 创建OAuth配置对象
var configuration = OAuthConfiguration(provider: OAuthProvider.GITHUB, redirectURI: 'YOUR_APP_SCHEME://');

// 执行登录操作
var result = await magic.oauth.loginWithPopup(configuration);

如果登录成功，您可以通过 result.magic.userInfo.email 访问用户信息。

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用 magic_ext_oauth 进行OAuth身份验证。

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

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  Magic magic = Magic.instance;

  final myController = TextEditingController(text: 'your.email@example.com');

  [@override](/user/override)
  void initState() {
    super.initState();

    // 检查用户是否已登录
    var future = magic.user.isLoggedIn();
    future.then((isLoggedIn) {
      if (isLoggedIn) {
        // 导航到主页
        // Navigator.push(context, MaterialPageRoute(builder: (context) => const HomePage()));
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Magic Demo Login'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32.0),
              child: TextFormField(
                controller: myController,
                decoration: const InputDecoration(
                  hintText: 'Enter your email',
                ),
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  return null;
                },
              ),
            ),
            TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              onPressed: () async {
                // 创建OAuth配置对象
                var configuration = OAuthConfiguration(
                    provider: OAuthProvider.GITHUB,
                    redirectURI: 'link.magic.demo://');

                // 执行登录操作
                var result = await magic.oauth.loginWithPopup(configuration);

                if (result.magic!.userInfo!.email != null) {
                  // 导航到新页面
                  // Navigator.push(context, MaterialPageRoute(builder: (context) => const HomePage()));
                }
                debugPrint(
                    'publicAddress, ${result.magic!.userInfo!.publicAddress}');
              },
              child: const Text('Github Login'),
            ),
          ],
        ),
      ),
    );
  }
}