美文网首页Flutter圈子FlutterFlutter
使用 apifm 插件进行 Flutter 云开发——QQ一键登

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

作者: fe1e31171ab2 | 来源:发表于2019-09-27 13:48 被阅读0次

    在你的 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

    相关文章

      网友评论

        本文标题:使用 apifm 插件进行 Flutter 云开发——QQ一键登

        本文链接:https://www.haomeiwen.com/subject/iktauctx.html