Flutter微信登录插件gotrue_wechatlogin的使用

Flutter微信登录插件gotrue_wechatlogin的使用

Dart客户端用于GoTrue API。

使用

使用方式与gotrue-js相同，但有一些不同点：

Oauth2

  • signIn 通过Oauth2提供商仅返回提供商URL。用户需要打开该URL以继续认证流程。我推荐使用 url_launcher 包。
  • 接收Oauth2提供商的回调URI后，使用 getSessionFromUrl 解析会话数据。

持久化/恢复会话

  • 未提供持久存储。用户可以轻松地使用任何Flutter存储库将会话作为JSON存储。
  • 暴露了 recoverSession 方法。它用于从保存的JSON字符串恢复会话。

示例代码

以下是一个简单的示例，展示了如何使用 gotrue_wechatlogin 插件进行微信登录。

import 'package:flutter/material.dart';
import 'package:gotrue_wechatlogin/gotrue.dart';
import 'package:url_launcher/url_launcher.dart'; // 用于打开URL

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("微信登录示例")),
        body: Center(child: LoginButton()),
      ),
    );
  }
}

class LoginButton extends StatefulWidget {
  [@override](/user/override)
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  bool _isLoggedIn = false;

  Future<void> _launchSignInUrl(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw '无法打开URL: $url';
    }
  }

  Future<void> _signInWithWeChat() async {
    const gotrueUrl = 'http://localhost:9999';
    const annonToken = '';
    final client = GoTrueClient(
      url: gotrueUrl,
      headers: {
        'Authorization': 'Bearer $annonToken',
        'apikey': annonToken,
      },
    );

    try {
      // 获取微信登录URL
      final signInUrl = await client.signInWithProvider('wechat');
      // 打开微信登录URL
      await _launchSignInUrl(signInUrl);
      
      // 假设微信回调后我们收到一个包含会话数据的URL
      final callbackUrl = 'http://localhost/callback?code=weixin_code&state=weixin_state';
      final session = await client.getSessionFromUrl(callbackUrl);
      print('Logged in, uid: ${session.user.id}');
      setState(() {
        _isLoggedIn = true;
      });
    } on AuthException catch (error) {
      print('Sign in Error: ${error.message}');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _signInWithWeChat,
      child: Text(_isLoggedIn ? "已登录" : "微信登录"),
    );
  }
}

更多关于Flutter微信登录插件gotrue_wechatlogin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter微信登录插件gotrue_wechatlogin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


gotrue_wechatlogin 是一个用于在 Flutter 应用中实现微信登录的插件。它基于 GoTrue（一个开源的用户认证系统）和微信的 OAuth2.0 认证流程。以下是如何在 Flutter 项目中使用 gotrue_wechatlogin 插件的步骤：

1. 添加依赖

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

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

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

2. 配置微信开发者平台

在微信开放平台上注册你的应用，并获取 AppID 和 AppSecret。你还需要配置应用的包名和签名信息。

3. 初始化插件

在你的 Flutter 应用中初始化 gotrue_wechatlogin 插件。通常你可以在 main.dart 文件中进行初始化：

import 'package:gotrue_wechatlogin/gotrue_wechatlogin.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化微信登录插件
  await GotrueWechatLogin.init(
    appId: 'your_wechat_app_id',
    universalLink: 'your_universal_link',
  );

  runApp(MyApp());
}

4. 实现微信登录

在你的应用中，你可以通过调用 GotrueWechatLogin.login() 方法来触发微信登录流程。通常你会在一个按钮的点击事件中调用这个方法。

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

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('微信登录'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              final result = await GotrueWechatLogin.login();
              // 处理登录结果
              print('登录成功: ${result.toJson()}');
            } catch (e) {
              // 处理登录失败
              print('登录失败: $e');
            }
          },
          child: Text('微信登录'),
        ),
      ),
    );
  }
}

5. 处理登录结果

GotrueWechatLogin.login() 方法会返回一个 GotrueWechatLoginResult 对象，包含了用户的授权信息，如 access_token、refresh_token 等。你可以将这些信息发送到你的后端服务器进行进一步处理，或者直接在前端进行用户认证。

final result = await GotrueWechatLogin.login();
print('Access Token: ${result.accessToken}');
print('Refresh Token: ${result.refreshToken}');
print('OpenID: ${result.openId}');

6. 处理微信回调

在 Android 和 iOS 平台上，微信登录需要处理特定的回调。你需要在 AndroidManifest.xml 和 Info.plist 文件中进行相应的配置。

Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加以下内容：

<activity
    android:name=".wxapi.WXEntryActivity"
    android:exported="true"
    android:launchMode="singleTask"
    android:taskAffinity="你的包名"
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:scheme="你的微信AppID" />
    </intent-filter>
</activity>

iOS 配置

在 ios/Runner/Info.plist 文件中添加以下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>你的微信AppID</string>
        </array>
    </dict>
</array>

7. 处理登出

你可以通过调用 GotrueWechatLogin.logout() 方法来登出用户：

await GotrueWechatLogin.logout();

8. 处理错误

在登录过程中可能会遇到各种错误，如用户取消登录、网络错误等。你可以通过捕获异常来处理这些错误：

try {
  final result = await GotrueWechatLogin.login();
  // 处理登录成功
} catch (e) {
  // 处理登录失败
  print('登录失败: $e');
}
回到顶部