ionic第三方QQ，微博，微信的登录,分享功能的实现和注意事项

admin管理员组

文章数量:1530336

本文只针对ionic1的用法做下记录，即使版本不同，但思想相同。

申请应用权限

第三方功能需要申请开发者账号，之后才可以进行后续的操作。

• QQ：使用开发者账号登录腾讯开放平台(众创空间) 点击 应用接入 / 应用管理 / 创建应用 自己按照步骤填写完成。需要注意的是：安卓应用创建完成之后，直接在该应用下，点击IOS应用，同步进行IOS应用的创建，此时他们使用的是同一个 APP ID,请不要分别，分开创建! 创建完成后提交审核。【备注，有个重要的事项需要此处说明，同一个开发者账户创建的多个应用，如果使用同一QQ账号登录不同的产品后无法识别为同一个QQ用户，此时需要通过邮件的形式申请unionid接口】

• 微博： 大致同QQ，登录微博开放平台的后台管理系统之后，创建新应用，按照步骤一步步的设置，最后在OAuth2.0 授权设置的回调设置页中直接按照默认的来就行了：https://api.weibo/oauth2/default.html, 在项目的config.xml中同步添加<preference name="REDIRECTURI" value="https://api.weibo/oauth2/default.html" />创建完成后提交审核。

• 微信： 同样是登录微信开放平台的后台系统，点击创建移动应用按钮,按照步骤进行创建，创建完成后提交审核。

• 其他注意事项：

  • 关于QQ的Unionid接口： 用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是，如果开发者同游多个移动应用、网站应用，可通过获取用户的unionid来区分用户的唯一性，因为只要是同一个QQ互联平台账号下的移动应用、网站应用，用户的unionid是唯一的。换句话说，同一用户，对同一个QQ互联平台下的不同应用，unionid是相同的。(Unionid机制暂未对外开放，开发者只能通过申请获得权限，后续会开放给所有开发者) https请求方式： GET https://graph.qq/oauth2.0/me?access_token=ACCESSTOKEN&unionid=1

  • 如果之后需要使用不同的签名，则需要在三方后台替换新的签名。其中QQ只能在QQ互联上与腾讯开放平台关联，之后可以在QQ互联上替换新的签名。

  • 获取apk签名的工具：https://github/mobileresearch/weibo_android_sdk/blob/master/app_signatures.apk

相关cordova插件

• QQ插件： cordova-plugin-qqsdk
  安装：$cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=YOUR_QQ_APPID --save

• 微博插件：cordova-plugin-weibosdk
  安装： $cordova plugin add cordova-plugin-weibosdk --variable WEIBO_APP_ID=YOUR_WEIBO_APPID --save

• 微信插件：cordova-plugin-wechat
  安装： $cordova plugin add cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID --save

应用签名(安卓)

• 生成签名工具keystore: keytool -genkey -v -keystore your-full-keystore-name.keystore -alias your-lias-name -keyalg RSA -keysize 2048 -validity 360000
  备注： 在项目根目录执行这句话，其中 your-full-keystore-name.keystore 是你自己设置的keystore全称，your-lias-name 是你keystore的别名，两个都自己按照自己的项目来自定义命名。

• 生成未签名的apk文件: cordova build --release android (备注 : 所有的红色Android是小写)
  备注： 生成apk之后，将apk移动到项目根目录，同keystore同级，为了之后进行签名工作方便

• 签名apk: jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore your-full-keystore-name.keystore android-release-unsigned.apk your-lias-name

• 备注：签名只用于安卓端

授权相关简要说明

在QQ，微博，微信的开发文档中都有说明，需要注意的是：通过包名，签名和AppId，AppSecret进行授权与登录，授权完成后通过接收参数access_token或code来进行换取用户或登录，详情请看各方开发文档，此处不再赘述。

• QQ
• 微博
• 微信
• 备注，官网上为原生登录流程, 而ionic中是基于cordova插件实现的登录，cordova插件是基于原生SDK开发的。

更新apk文件

生成签名之后的文件，上传到各大安卓应用市场，一般都会上传的是腾讯开放平台，其他平台也需申请开发者账号。

对cordova相关API进行封装

• QQ

  (function (angular) {
      'use strict';
      angular.module('your-ng-app')
          .factory('qqService', [
              function () {
                  // 检测是否安装插件
                  if (typeof QQSDK === "undefined") {
                      console.log("qq plugin is not installed.");
                      return false;
                  }
  
                  return {
                      // 检测qq客户端是否安装
                      isInstalled: function (suc, fail) {
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.checkClientInstalled(suc, fail);
                          }
                      },
  
                      // 登录
                      login: function (suc, fail) {
                          var args = {};
                          args.client = QQSDK.ClientType.QQ;
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.ssoLogin(function (res) {
                                  suc(res);
                              }, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      },
  
                      // 退出登录
                      logout: function (suc, fail) {
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.logout(suc, function (failReason) {
                                  fail(failReason);
                              });
                          }
                      },
  
                      // 分享文字
                      shareText: function (text, suc, fail) {
                          var args = {};
                          args.client = QQSDK.ClientType.QQ;
                          args.scene = QQSDK.Scene.QQ;
                          args.text = text;
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.shareText(suc, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      },
  
                      // 分享图片
                      shareImage: function (params, suc, fail) {
                          var args = {};
                          args.client = QQSDK.ClientType.QQ;
                          args.scene = QQSDK.Scene.QQ;
                          args.title = params.title;
                          args.description = params.description;
                          args.image = params.image;
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.shareImage(suc, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      },
  
                      // 分享新闻
                      shareNews: function (params, suc, fail) {
                          var args = {};
                          args.client = QQSDK.ClientType.QQ;
                          args.scene = QQSDK.Scene.QQ;
                          args.url = params.url;
                          args.title = params.title;
                          args.description = params.description;
                          args.image = params.image;
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.shareNews(suc, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      },
  
                      // 分享音乐
                      shareAudio: function (params, suc, fail) {
                          var args = {};
                          args.client = QQSDK.ClientType.QQ;
                          args.scene = QQSDK.Scene.QQ;
                          args.url = params.url;
                          args.title = params.title;
                          args.description = params.description;
                          args.image = params.image;
                          args.flashUrl = params.flashUrl;
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              QQSDK.shareAudio(suc, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      }
  
                  };
              }])
  })(angular);
  

• 微博

  (function (angular) {
      'use strict';
      angular.module('your-ng-app')
          .factory('weiboService', [
              function () {
                  // 检测是否安装插件
                  if (typeof WeiboSDK === "undefined") {
                      console.log("weibo plugin is not installed.");
                      return false;
                  }
  
                  return {
                      // 检测客户端是否安装
                      isInstalled: function (suc, fail) {
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              WeiboSDK.checkClientInstalled(suc, fail);
                          }
                      },
  
                      // 分享
                      share: function (params, suc, fail) {
                          var args = {};
                          args.url = params.url || '';
                          args.title = params.title || '';
                          args.description = params.description || '';
                          args.image = params.image; // weibo 有默认分享图片
  
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              WeiboSDK.shareToWeibo(suc, function (failReason) {
                                  fail(failReason);
                              }, args);
                          }
                      },
  
                      // 登录
                      login: function (suc, fail) {
                          if (suc && typeof suc === 'function' && fail && typeof fail === 'function') {
                              WeiboSDK.ssoLogin(function (args) {
                                  suc(args);
                              }, function (failReason) {
                                  fail(failReason);
                              });
                          }
                      },
  
                      // 退出登录
                      logout: function (suc, fail) {
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              WeiboSDK.logout(suc, function (failReason) {
                                  fail(failReason);
                              });
                          }
                      }
                  };
              }])
  })(angular);
  

• 微信：

  (function (angular) {
      'use strict';
      angular.module('your-ng-app')
          .factory('wechatService', [
              function () {
                  // 检测是否安装插件
                  if (typeof Wechat === "undefined") {
                      console.log("Wechat plugin is not installed.");
                      return false;
                  }
  
                  return {
                      // 检测微信客户端是否安装
                      isInstalled: function (callback) {
                          Wechat.isInstalled(function (installed) {
                              if (callback && typeof callback === 'function') {
                                  callback(installed);
                              }
                          });
                      },
  
                      // 分享参数 scene 0 是会话 1 是朋友圈 2 是收藏 ; message 是分享的消息对象
                      share: function (scene, message, suc, fail) {
                          var params = {
                              scene: scene
                          };
  
                          // 配置消息类型
                          params.message = {
                              title: message.title || '',
                              description: message.description || '',
                              mediaTagName: message.mediaTagName || "",
                              messageExt: message.messageExt || "",
                              messageAction: message.messageAction || "",
                              thumb: message.thumb || "images/common/about-logo.png",
                              media: message.media || {}
                          };
  
                          // 开始分享
                          if (suc && fail && typeof suc === 'function' && typeof fail === 'function') {
                              Wechat.share(params, suc, function (reason) {
                                  fail(reason);
                              });
                          }
                      },
  
                      // 登录
                      login: function (callback) {
                          Wechat.auth("snsapi_userinfo", function (response) {
                              callback && angular.isFunction(callback) && callback(response);
                          }, function () {
                              callback && angular.isFunction(callback) && callback(false);
                          });
                      }
  
                  };
              }])
  })(angular);
  

• 备注：此API是封装了最近一期的cordova插件相关api,是github上用法的再次封装, 其中QQ和微博API在近期修改过一次，所以不保证以后不在被修改或更新，所以在此处说明下, 如下是近期版本：

  cordova-plugin-qqsdk 0.9.6 "QQSDK"
  cordova-plugin-weibosdk 0.5.8 "cordova-plugin-weibosdk"
  cordova-plugin-wechat 1.4.0 "Wechat"

• 在使用登录退出登录或分享功能时，注入相关服务，然后调用上面封装过的相关api。

• 其中微信无客户端时需要检测客户端，如果未安装，则需隐藏微信登录按钮，QQ的h5登录功能存在一些问题，所以QQ的处理方式同微信，而微博则可以使用h5登录，所以不必处理微博登录按钮，所以使用cordova的方式暂时还不是很完美。

• 此篇文档较偏前端，不是完整的登录过程，完整的登录过程，请详细看官方文档。本文只提供相关思路而非具体步骤，just a clue, not steps!

本文标签： 第三方注意事项功能Ionic微博