Flutter微信登录插件flutter_wechat_login的使用

特性

此插件集成了微信登录功能：

• 微信应用授权登录
• 使用code交换access_token、refresh_token及授权范围 <code>/sns/oauth2/access_token</code>
• 刷新或续订access_token <code>/sns/oauth2/refresh_token</code>
• 检查access_token的有效性 <code>/sns/auth</code>
• 获取用户信息 <code>/sns/userinfo</code>

开始使用

在使用此插件之前，强烈建议详细阅读官方文档：

• Android接入指南
• iOS接入指南
• 移动应用微信登录开发指南

使用方法

import 'package:flutter_wechat_login/flutter_wechat_login.dart';

// 创建FlutterWechatLogin实例
final flutterWechatLogin = FlutterWechatLogin();

// 初始化
await flutterWechatLogin.init(appId: "Your AppID", secret: "Your AppSecret", universalLink: "Your Universal Links(iOS Required)");

// 判断微信应用是否已安装
bool isInstalled = await flutterWechatLogin.isInstalled();

// 调用微信登录，成功后返回code
Map<String, dynamic> wechatInfo = await flutterWechatLogin.login();

// 使用code交换access_token、refresh_token及授权范围
Map<String, dynamic> accessTokenInfo = await flutterWechatLogin.getAccessToken(code: wechatInfo['code']);

// 刷新或续订access_token
Map<String, dynamic> refreshTokenInfo = await flutterWechatLogin.refreshToken(refreshToken: accessTokenInfo['refresh_token']);

// 检查access_token的有效性
Map<String, dynamic> checkTokenInfo = await flutterWechatLogin.checkToken(accessToken: accessTokenInfo['access_token'], openid: accessTokenInfo['openid']);

// 获取用户信息
Map<String, dynamic> userInfo = await flutterWechatLogin.getUserInfo(accessToken: accessTokenInfo['access_token'], openid: accessTokenInfo['openid']);

配置Android版本

1. 创建WXEntryActivity

在项目目录下的android/app/src/main/java/packageName下创建一个名为wxapi的包，并在此包下创建一个新的WXEntryActivity，代码如下：

package packageName.wxapi;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;

import com.tencent.mm.opensdk.constants.ConstantsAPI;
import com.tencent.mm.opensdk.modelbase.BaseReq;
import com.tencent.mm.opensdk.modelbase.BaseResp;
import com.tencent.mm.opensdk.modelbiz.SubscribeMessage;
import com.tencent.mm.opensdk.modelbiz.WXLaunchMiniProgram;
import com.tencent.mm.opensdk.modelbiz.WXOpenBusinessView;
import com.tencent.mm.opensdk.modelbiz.WXOpenBusinessWebview;
import com.tencent.mm.opensdk.modelmsg.SendAuth;
import com.tencent.mm.opensdk.openapi.IWXAPI;
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler;
import com.tencent.mm.opensdk.openapi.WXAPIFactory;

public class WXEntryActivity extends Activity implements IWXAPIEventHandler {

    private IWXAPI api;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d("flutter_wechat_login", "onCreate");
        super.onCreate(savedInstanceState);
        api = WXAPIFactory.createWXAPI(this, "", false);
        try {
            Intent intent = getIntent();
            api.handleIntent(intent, this);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void onNewIntent(Intent intent) {
        super.onNewIntent(intent);
        setIntent(intent);
        api.handleIntent(intent, this);
    }

    @Override
    public void onReq(BaseReq req) {}

    @Override
    public void onResp(BaseResp resp) {
        Log.d("flutter_wechat_login", "onResp -> " + resp.errCode);

        Intent intent = new Intent("flutter_wechat_login");
        intent.putExtra("errCode", resp.errCode);
        intent.putExtra("errStr", resp.errStr);
        intent.putExtra("type", resp.getType());

        if (resp.getType() == ConstantsAPI.COMMAND_SENDAUTH) {
            SendAuth.Resp authResp = (SendAuth.Resp) resp;
            Log.i("flutter_wechat_login", "COMMAND_SENDAUTH");
            intent.putExtra("code", authResp.code);
            intent.putExtra("state", authResp.state);
            intent.putExtra("lang", authResp.lang);
            intent.putExtra("country", authResp.country);
        }

        sendBroadcast(intent);
        finish();
    }
}

2. 配置AndroidManifest.xml

微信需要验证包名，因此Activity路径必须为your package name.wxapi.WXEntryActivity，其中your package name必须是微信开放平台注册应用时填写的包名。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 新增内容开始 -->
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
	<!-- 新增内容结束 -->
	<application>
		...
		<!-- 新增内容开始 -->
		<activity
			android:name="Your package name.wxapi.WXEntryActivity"
			android:theme="@android:style/Theme.Translucent.NoTitleBar"
			android:exported="true"
			android:taskAffinity="Your package name"
			android:launchMode="singleTask">
		</activity>
		<!-- 新增内容结束 -->
		...
	</application>
	<!-- 新增内容开始 -->
	<queries>
		<package android:name="com.tencent.mm" />
	</queries>
	<!-- 新增内容结束 -->
</manifest>

配置iOS版本

1. 配置URL Types

• 使用xcode打开你的iOS项目Runner.xcworkspace
• 在info配置选项卡下的URL Types中添加新的条目
  • identifier 填写 weixin
  • URL Schemes 填写 Your APPID
  • 如下图所示：

2. 配置LSApplicationQueriesSchemes

方法1：通过xcode配置

• 打开info配置，添加LSApplicationQueriesSchemes，即Queried URL Schemes
• 添加以下项：
  • weixin
  • weixinULAPI
  • weixinURLParamsAPI
• 如下图所示：

方法2：直接修改Info.plist

• 使用Android Studio打开项目下的ios/Runner/Info.plist
• 在dict节点下添加以下配置（参考文件中的配置格式）：

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>weixin</string>
	<string>weixinULAPI</string>
	<string>weixinURLParamsAPI</string>
</array>

完整示例代码

以下是完整的示例代码，展示了如何使用flutter_wechat_login插件进行微信登录。

import 'dart:async';
import 'dart:io';

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _flutterWechatLogin = FlutterWechatLogin();

  bool _isInstalled = false;
  bool startLogin = false;
  Map<String, dynamic> userInfo = {};

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

  // 平台消息异步，初始化在异步方法中进行。
  Future<void> doInit() async {
    await _flutterWechatLogin.init(appId: "", secret: "", universalLink: "");

    bool isInstalled = await _flutterWechatLogin.isInstalled();

    if (!mounted) return;

    setState(() {
      _isInstalled = isInstalled;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget userInfoWidget = Container();
    if (startLogin) userInfoWidget = CircularProgressIndicator();
    if (userInfo.isNotEmpty) {
      userInfoWidget = Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ClipOval(
            child: Image.network(userInfo['headimgurl'], width: 40,),
          ),
          SizedBox(width: 5,),
          Text(userInfo['nickname']),
        ],
      );
    }
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Wechat Login Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('isInstalled Wechat : $_isInstalled'),
              ElevatedButton(
                child: Text("Login"),
                onPressed: () {
                  doLogin();
                },
              ),
              SizedBox(height: 10,),
              userInfoWidget
            ],
          ),
        ),
      ),
    );
  }

  Future<void> doLogin() async {
    if (mounted) {
      setState(() {
        startLogin = true;
      });
    }

    Map<String, dynamic> wechatInfo = await _flutterWechatLogin.login();
    print('flutter_wechat_plugin -> wechatInfo = $wechatInfo');

    Map<String, dynamic> accessTokenInfo = await _flutterWechatLogin.getAccessToken(code: wechatInfo['code']);
    print('flutter_wechat_plugin -> accessTokenInfo = $accessTokenInfo');

    Map<String, dynamic> refreshTokenInfo = await _flutterWechatLogin.refreshToken(refreshToken: accessTokenInfo['refresh_token']);
    print('flutter_wechat_plugin -> refreshTokenInfo = $refreshTokenInfo');

    Map<String, dynamic> checkTokenInfo = await _flutterWechatLogin.checkToken(accessToken: accessTokenInfo['access_token'], openid: accessTokenInfo['openid']);
    print('flutter_wechat_plugin -> checkTokenInfo = $checkTokenInfo');

    Map<String, dynamic> userInfo = await _flutterWechatLogin.getUserInfo(accessToken: accessTokenInfo['access_token'], openid: accessTokenInfo['openid']);
    print('flutter_wechat_plugin -> userInfo = $userInfo');

    if (mounted) {
      setState(() {
        startLogin = false;
        this.userInfo = userInfo;
      });
    }
  }
}