100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ionic第三方QQ 微博 微信的登录 分享功能的实现和注意事项

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

时间:2024-03-28 02:34:36

相关推荐

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

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

申请应用权限

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

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

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

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

其他注意事项:

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

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

获取apk签名的工具:/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!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。