admin管理员组文章数量:1566223
本文只针对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来进行换取用户或登录,详情请看各方开发文档,此处不再赘述。
- 微博
- 微信
- 备注,官网上为原生登录流程, 而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第三方QQ,微博,微信的登录,分享功能的实现和注意事项 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726253342a1062692.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论