使用 apifm 插件进行 Flutter 云开发——QQ一键登录/注册

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

申请开通QQ互联

https://connect.qq.com/

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

安装 Flutter 依赖

pubspec.yaml 文件增加依赖

dependencies:
  flutter_qq: ^0.0.5

安装依赖

$ flutter pub get

引入 package

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

import 'package:flutter_qq/flutter_qq.dart';

配置 Android / IOS 打包设置

Android

修改 AndroidManifest.xml 文件

添加权限

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

application标签下增加：

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

添加activity

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

<activity
    android:name="com.tencent.connect.common.AssistActivity"
    android:configChanges="orientation|keyboardHidden"
    android:screenOrientation="behind"
    android:theme="@android:style/Theme.Translucent.NoTitleBar" />
<activity
    android:name="com.tencent.tauth.AuthActivity"
    android:launchMode="singleTask"
    android:noHistory="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="[QQ APPId]" />
    </intent-filter>
</activity>

IOS

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

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>tencent</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>tencent1107493622</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>mqq</string>
  <string>mqqapi</string>
  <string>mqqwpa</string>
  <string>mqqbrowser</string>
  <string>mttbrowser</string>
  <string>mqqOpensdkSSoLogin</string>
  <string>mqqopensdkapiV2</string>
  <string>mqqopensdkapiV3</string>
  <string>mqqopensdkapiV4</string>
  <string>wtloginmqq2</string>
  <string>mqzone</string>
  <string>mqzoneopensdk</string>
  <string>mqzoneopensdkapi</string>
  <string>mqzoneopensdkapi19</string>
  <string>mqzoneopensdkapiV2</string>
  <string>mqqapiwallet</string>
  <string>mqqopensdkfriend</string>
  <string>mqqopensdkdataline</string>
  <string>mqqgamebindinggroup</string>
  <string>mqqopensdkgrouptribeshare</string>
  <string>tencentapi.qq.reqContent</string>
  <string>tencentapi.qzone.reqContent</string>
</array>
<key>NSMicrophoneUsageDescription</key>
<string>microphoneUsageDescription</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>photoLibraryDesciption</string>
<key>NSCameraUsageDescription</key>
<string>cameraUsageDesciption</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UIBackgroundModes</key>
<array>
  <string>fetch</string>
  <string>remote-notification</string>
</array>

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

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

调用手机QQ

 loginQQ () async {
    const appid = '1105644913';
    await FlutterQq.registerQQ(appid);
    var qqResult = await FlutterQq.login();    
    if (qqResult.code == 0) {
      // 登录成功
      Fluttertoast.showToast(msg: '授权成功', gravity: ToastGravity.CENTER, fontSize: 14);
      var res = await Apifm.loginQQConnect(appid, qqResult.response['openid'], qqResult.response['accessToken']);
      if (res['code'] == 10000) {
        // 用户不存在，则先注册
        await Apifm.registerQQConnect({
          'oauthConsumerKey': appid,
          'openid': qqResult.response['openid'],
          'accessToken': qqResult.response['accessToken'],
        });
        // 注册完后重新登录
        res = await Apifm.loginQQConnect(appid, qqResult.response['openid'], qqResult.response['accessToken']);
      }
      if (res['code'] != 0) {
        // 登录失败
        Fluttertoast.showToast(msg: res['msg'], gravity: ToastGravity.CENTER, fontSize: 14);
        return;
      }
      processLoginSuccess (res['data']['token'], res['data']['uid']); // 登录成功后的业务处理
    } else if (qqResult.code == 1) {
      // 授权失败
      Fluttertoast.showToast(msg: qqResult.message, gravity: ToastGravity.CENTER, fontSize: 14);
    } else {
      // 用户取消授权
      Fluttertoast.showToast(msg: '已取消', gravity: ToastGravity.CENTER, fontSize: 14);
    }
  }

方法拆解

初始化QQ互联组件

FlutterQq.registerQQ(APP ID);

弹出QQ授权窗口

FlutterQq.login();

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

QQ互联一键注册

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

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

QQ授权后返回的参数：

oauthConsumerKey、openid、accessToken

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

可选参数：

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

QQ互联一键登录

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

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

用户管理

开通开发者后台

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

用户管理

用户管理

本例Flutter源码：

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