Flutter QQ登录功能插件flutter_qq_login的使用

本插件集成了QQ登录的功能：

特性

• 判断是否已安装QQ应用 <code>isQQInstalled()</code>
• 登录成功后获取数据，包括OpenId、AccessToken等重要数据
• 获取用户信息 <code>getUserInfo()</code>

开始使用

在使用此插件之前，请务必详细阅读官方文档：

• Android SDK环境构建
• iOS SDK环境构建

使用方法

import 'package:flutter_qq_login/flutter_qq_login.dart';

// 创建FlutterQqLogin对象
final flutterQqLogin = FlutterQqLogin();

// 初始化插件，并填写由QQ互联创建的应用ID
flutterQqLogin.init(appId: "Your APPID");

// 检查是否已安装QQ应用
bool isInstalled = await flutterQqLogin.isInstalled();

// 调用QQ登录，返回登录成功后的OpenId、AccessToken等重要数据
Map<String, dynamic> qqInfo = await flutterQqLogin.login();

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

login()接口状态码描述

• 正常情况下，接口至少会返回ret属性：
  • 0 表示授权登录成功，并且此时必须有accessToken等重要数据。
  • -1 表示授权登录失败，无法获取accessToken等重要数据。
  • -2 表示取消登录授权（即跳转到QQ后点击取消再跳回）。
  • -3 表示网络异常。

配置Android版本

在android/app/build.gradle中添加以下配置：

android {
    ...

    defaultConfig {
        ...
        minSdkVersion 19
        ...
    }

}

在android/app/src/main/AndroidManifest.xml中添加以下配置：

<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="com.tencent.tauth.AuthActivity"
            android:noHistory="true"
            android:launchMode="singleTask"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="Your APPID" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.tencent.connect.common.AssistActivity"
            android:configChanges="orientation|keyboardHidden"
            android:screenOrientation="behind"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />
        <!-- 新增内容结束 -->
        ...
    </application>
    <!-- 新增内容开始 -->
    <queries>
        <package android:name="com.tencent.mobileqq" />
    </queries>
    <!-- 新增内容结束 -->
</manifest>

配置iOS版本

在Xcode中打开你的iOS项目Runner.xcworkspace，在info配置选项卡下的URL Types中添加新的条目：

• identifier 填写tencentopenapi
• URL Schemes 填写tencent123456789，其中123456789是你的APPID

如图所示：

配置LSApplicationQueriesSchemes

方法1：在Xcode中配置info：

• 打开info配置，添加LSApplicationQueriesSchemes，即Queried URL Schemes
• 添加这些项：
  • mqqopensdknopasteboard
  • mqqapi
  • mqq
  • mqqOpensdkSSoLogin
  • mqqconnect
  • mqqopensdkdataline
  • mqqopensdkgrouptribeshare
  • mqqopensdkfriend
  • mqqopensdkapi
  • mqqopensdkapiV2
  • mqqopensdkapiV3
  • mqzoneopensdk
  • wtloginmqq
  • wtloginmqq2
  • mqqwpa
  • mqzone
  • mqzonev2
  • mqzoneshare
  • wtloginqzone
  • mqzonewx
  • mqzoneopensdkapiV2
  • mqzoneopensdkapi19
  • mqzoneopensdkapi
  • mqzoneopensdk

如图所示：

方法2：直接修改Info.plist文件：

• 使用Android Studio打开项目中的ios/Runner/Info.plist
• 在dict节点下添加以下配置：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>mqqopensdknopasteboard</string>
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqzoneopensdk</string>
</array>

示例代码

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_qq_login/flutter_qq_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 _flutterQqLogin = FlutterQqLogin();

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

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

  Future<void> initData() async {
    _flutterQqLogin.init(appId: "_Your_app_id_");
    bool isInstalled = await _flutterQqLogin.isInstalled();

    // 如果在异步平台消息传输期间小部件从树中删除，则我们希望丢弃回复而不是调用setState以更新我们的非存在的外观。
    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['figureurl_qq_1']),
          ),
          SizedBox(width: 5,),
          Text(userInfo['nickname']),
        ],
      );
    }
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('QQ Login Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('isInstalled QQ: $_isInstalled'),
              ElevatedButton(
                child: Text("Login"),
                onPressed: () {
                  doLogin();
                },
              ),
              SizedBox(height: 10,),
              userInfoWidget
            ],
          ),
        ),
      ),
    );
  }

  Future<void> doLogin() async {
    if (mounted) {
      setState(() {
        startLogin = true;
      });
    }
    Map<String, dynamic> tempQqInfo = await _flutterQqLogin.login();
    print('flutter_qq_plugin -> qqInfo = $tempQqInfo');
    if (tempQqInfo.containsKey("ret") && tempQqInfo['ret'] == 0) {
      Map<String, dynamic> tempUserInfo = await _flutterQqLogin.getUserInfo(tempQqInfo['access_token'], tempQqInfo['openid']);
      print('flutter_qq_plugin -> userInfo = $tempUserInfo');
      if (mounted) {
        setState(() {
          qqInfo = tempQqInfo;
          userInfo = tempUserInfo;
          startLogin = false;
        });
      }
    } else {
      setState(() {
        startLogin = false;
      });
    }
  }
}