在你的 App 中集成手机QQ一键授权(注册)登录功能，达到快速注册、快速登录功能
按照本教程的操作指引，预计5分钟即可帮你实现并掌握QQ登录的实现

申请开通QQ互联

https://connect.qq.com/

前往QQ互联官网，创建一个移动应用的接入，审核通过后，你就可以获取到一个 APP ID；
下文中所提的 APP ID，或者 oauthConsumerKey，以及 oauth_consumer_key 都是值得这里的 APP ID；

安装 Flutter 依赖

pubspec.yaml 文件增加依赖

  1. dependencies:
  2.   flutter_qq: ^0.0.5

安装依赖

  1. $ flutter pub get

引入 package

在 dart 文件中，引入插件，下面会用到

  1. import 'package:flutter_qq/flutter_qq.dart';

配置 Android / IOS 打包设置

Android

修改 AndroidManifest.xml 文件

添加权限

  1. <uses-permission android:name="android.permission.INTERNET" />
  2. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

application标签下增加：

  1. <uses-library android:name="org.apache.http.legacy" android:required="false" />

添加activity

下面的 [QQ APPId] 请用上面的 APP ID 替换

  1. <activity
  2.     android:name="com.tencent.connect.common.AssistActivity"
  3.     android:configChanges="orientation|keyboardHidden"
  4.     android:screenOrientation="behind"
  5.     android:theme="@android:style/Theme.Translucent.NoTitleBar" />
  6. <activity
  7.     android:name="com.tencent.tauth.AuthActivity"
  8.     android:launchMode="singleTask"
  9.     android:noHistory="true" >
  10.     <intent-filter>
  11.         <action android:name="android.intent.action.VIEW" />
  12.         <category android:name="android.intent.category.DEFAULT" />
  13.         <category android:name="android.intent.category.BROWSABLE" />
  14.         <data android:scheme="[QQ APPId]" />
  15.     </intent-filter>
  16. </activity>

IOS

项目的Info.plist文件中增加：

  1. <key>CFBundleURLTypes</key>
  2. <array>
  3.   <dict>
  4.     <key>CFBundleTypeRole</key>
  5.     <string>Editor</string>
  6.     <key>CFBundleURLName</key>
  7.     <string>tencent</string>
  8.     <key>CFBundleURLSchemes</key>
  9.     <array>
  10.       <string>tencent1107493622</string>
  11.     </array>
  12.   </dict>
  13. </array>
  14. <key>LSApplicationQueriesSchemes</key>
  15. <array>
  16.   <string>mqq</string>
  17.   <string>mqqapi</string>
  18.   <string>mqqwpa</string>
  19.   <string>mqqbrowser</string>
  20.   <string>mttbrowser</string>
  21.   <string>mqqOpensdkSSoLogin</string>
  22.   <string>mqqopensdkapiV2</string>
  23.   <string>mqqopensdkapiV3</string>
  24.   <string>mqqopensdkapiV4</string>
  25.   <string>wtloginmqq2</string>
  26.   <string>mqzone</string>
  27.   <string>mqzoneopensdk</string>
  28.   <string>mqzoneopensdkapi</string>
  29.   <string>mqzoneopensdkapi19</string>
  30.   <string>mqzoneopensdkapiV2</string>
  31.   <string>mqqapiwallet</string>
  32.   <string>mqqopensdkfriend</string>
  33.   <string>mqqopensdkdataline</string>
  34.   <string>mqqgamebindinggroup</string>
  35.   <string>mqqopensdkgrouptribeshare</string>
  36.   <string>tencentapi.qq.reqContent</string>
  37.   <string>tencentapi.qzone.reqContent</string>
  38. </array>
  39. <key>NSMicrophoneUsageDescription</key>
  40. <string>microphoneUsageDescription</string>
  41. <key>NSPhotoLibraryUsageDescription</key>
  42. <string>photoLibraryDesciption</string>
  43. <key>NSCameraUsageDescription</key>
  44. <string>cameraUsageDesciption</string>
  45. <key>LSRequiresIPhoneOS</key>
  46. <true/>
  47. <key>UIBackgroundModes</key>
  48. <array>
  49.   <string>fetch</string>
  50.   <string>remote-notification</string>
  51. </array>

项目的AppDelegate.m文件中增加：

  1. - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  2.             options:(NSDictionary<NSString*, id> *)options
  3. {
  4.     NSString * urlStr = [url absoluteString];
  5.     [[NSNotificationCenter defaultCenter]
  6.      postNotificationName:@"QQ" object:nil userInfo:@{@"url":urlStr}];
  7.     return YES;
  8. }

调用手机QQ

  1. loginQQ () async {
  2.     const appid = '1105644913';
  3.     await FlutterQq.registerQQ(appid);
  4.     var qqResult = await FlutterQq.login();    
  5.     if (qqResult.code == 0) {
  6.       // 登录成功
  7.       Fluttertoast.showToast(msg: '授权成功', gravity: ToastGravity.CENTER, fontSize: 14);
  8.       var res = await Apifm.loginQQConnect(appid, qqResult.response['openid'], qqResult.response['accessToken']);
  9.       if (res['code'] == 10000) {
  10.         // 用户不存在，则先注册
  11.         await Apifm.registerQQConnect({
  12.           'oauthConsumerKey': appid,
  13.           'openid': qqResult.response['openid'],
  14.           'accessToken': qqResult.response['accessToken'],
  15.         });
  16.         // 注册完后重新登录
  17.         res = await Apifm.loginQQConnect(appid, qqResult.response['openid'], qqResult.response['accessToken']);
  18.       }
  19.       if (res['code'] != 0) {
  20.         // 登录失败
  21.         Fluttertoast.showToast(msg: res['msg'], gravity: ToastGravity.CENTER, fontSize: 14);
  22.         return;
  23.       }
  24.       processLoginSuccess (res['data']['token'], res['data']['uid']); // 登录成功后的业务处理
  25.     } else if (qqResult.code == 1) {
  26.       // 授权失败
  27.       Fluttertoast.showToast(msg: qqResult.message, gravity: ToastGravity.CENTER, fontSize: 14);
  28.     } else {
  29.       // 用户取消授权
  30.       Fluttertoast.showToast(msg: '已取消', gravity: ToastGravity.CENTER, fontSize: 14);
  31.     }
  32.   }

方法拆解

初始化QQ互联组件

  1. FlutterQq.registerQQ(APP ID);

弹出QQ授权窗口

  1. FlutterQq.login();

用户点击同意授权后，你就可以取到授权参数：openid、accessToken

QQ互联一键注册

  1. Apifm.registerQQConnect(Map<String, String> params)

QQ互联的一键注册功能，需要以下参数：

QQ授权后返回的参数：

oauthConsumerKey、openid、accessToken

具体请查阅QQ互联的接口文档说明

可选参数：

referrer 邀请人，邀请你注册的用户id
postJsonString 注册的扩展信息，Json数据格式

QQ互联一键登录

  1. Apifm.loginQQConnect(String oauthConsumerKey, String openid, String accessToken)

登录的3个参数，请查阅QQ互联的接口文档返回值说明

用户管理

开通开发者后台

《使用 apifm 插件进行 Flutter 云开发——安装篇》

用户管理

QQ一键登录/注册 - 图1

本例Flutter源码：

https://github.com/gooking/apifm-flutter-demo