在你的 App 中集成手机QQ一键授权(注册)登录功能,达到快速注册、快速登录功能
按照本教程的操作指引,预计5分钟即可帮你实现并掌握QQ登录的实现
申请开通QQ互联
前往QQ互联官网,创建一个移动应用的接入,审核通过后,你就可以获取到一个 APP ID;
下文中所提的 APP ID,或者 oauthConsumerKey,以及 oauth_consumer_key 都是值得这里的 APP ID;
安装 Flutter 依赖
pubspec.yaml 文件增加依赖
1dependencies: 2 flutter_qq: ^0.0.5
安装依赖
1$ flutter pub get
引入 package
在 dart 文件中,引入插件,下面会用到
1import '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
1loginQQ () 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互联组件
1FlutterQq.registerQQ(APP ID);
弹出QQ授权窗口
1FlutterQq.login();
用户点击同意授权后,你就可以取到授权参数:openid、accessToken
QQ互联一键注册
1Apifm.registerQQConnect(Map<String, String> params)
QQ互联的一键注册功能,需要以下参数:
QQ授权后返回的参数:
oauthConsumerKey、openid、accessToken
具体请查阅QQ互联的接口文档说明
可选参数:
referrer 邀请人,邀请你注册的用户id
postJsonString 注册的扩展信息,Json数据格式
QQ互联一键登录
1Apifm.loginQQConnect(String oauthConsumerKey, String openid, String accessToken)
登录的3个参数,请查阅QQ互联的接口文档返回值说明
用户管理
开通开发者后台
《使用 apifm 插件进行 Flutter 云开发——安装篇》
用户管理
本例Flutter源码: