Cordova 实现第三方登录及其分享

Posted 2020-12-07

Cordova 实现第三方登录及其分享

目录
一、 摘要 2

1. 摘要说明如下: 2
   二、插件推荐 2
   1.cordova使用分享功能,推荐的插件如下: 2
   三、准备工作 2
   1.准备工作,分别到各个开发平台申请 appid ,添加测试账号 2
   四、通过cordova添加插件 2
   1.cordova 创建目录config.xml 注意的事项 2
   五、插件的进一步设置 3
   1.微博需要验证redirecturi:在config.xml中的配置: 3
2. 微博插件中作者把so库的target地址写错了,修复方法如下 3
   六、 检查是否安装APP 4
   七、 第三方登录 4
   八、 第三方分享 5
   九、插件的改造 7
   十、 重新生成平台,手动修改插件,需要重新生成平台版本 8
   十一、 Xcode 需要允许bitcode，因为新浪的库不符合 8
   十二、 xcode需做urltype的检查，有缺少则补充 8

一、摘要
1.摘要说明如下:
[说明]:QQ 、微信、微博,只针对移动应用JS 提供SDK ,JS SDK 表面上是最方便cordova 项目实现的,但在授权是通过网页的,其实session还需要在网页上输入用户名和密码来建立,而android SDK和ios SDK的实现形式是调用本身已安装的第三方软件完成授权,显然后者才是我们想要的方式.
二、插件推荐
1.cordova使用分享功能,推荐的插件如下:
注释:（以下几个插件是我用到的，其他的我还试过一些，都不满意）
? QQ：https://github.com/iVanPan/Cordova_QQ
? ? ? 微信：https://github.com/xu-li/cordova-plugin-wechat
? ? ? 微博：https://github.com/iVanPan/cordova_weibo
三、准备工作
1.准备工作,分别到各个开发平台申请 appid ,添加测试账号
?QQ：腾讯开放平台 http://open.qq.com/
?微信：微信开放平台 https://open.weixin.qq.com/
?微博：新浪微博开放平台 http://open.weibo.com/
四、通过cordova添加插件
1.cordova 创建目录config.xml 注意的事项
注意：由于微信插件会改变根目录config.xml，所以我们需要伪造一个根目录的config.xml给它改（我的做法是从www里把config.xml复制一份出来根目录）
? ? //QQ：（注意把YOUR_QQ_APPID替换成第一步申请的QQ APPID）
? ? cordova plugin add https://github.com/iVanPan/Cordova_QQ.git --variable QQ_APP_ID=YOUR_QQ_APPID
? ? //微信：（注意把YOUR_WECHAT_APPID替换成第一步申请到的微信APPID）
? ? cordova plugin add https://github.com/xu-li/cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID
? ? //微博：（注意把YOUR_WEIBO_APPID替换成第一步申请到的微博APPID）
? ? cordova plugin add https://github.com/iVanPan/cordova_weibo.git --variable WEIBO_APP_ID=YOUR_WEIBO_APPID
注意：由于微信插件会改变根目录config.xml，所以我们需要伪造一个根目录的config.xml给它改（我的做法是从www里把config.xml复制一份出来根目录）
? ? //QQ：（注意把YOUR_QQ_APPID替换成第一步申请的QQ APPID）
? ? cordova plugin add https://github.com/iVanPan/Cordova_QQ.git --variable QQ_APP_ID=YOUR_QQ_APPID
? ? //微信：（注意把YOUR_WECHAT_APPID替换成第一步申请到的微信APPID）
? ? cordova plugin add https://github.com/xu-li/cordova-plugin-wechat --variable wechatappid=YOUR_WECHAT_APPID
? ? //微博：（注意把YOUR_WEIBO_APPID替换成第一步申请到的微博APPID）
? ? cordova plugin add https://github.com/iVanPan/cordova_weibo.git --variable WEIBO_APP_ID=YOUR_WEIBO_APPID
五、插件的进一步设置
1.微博需要验证redirecturi:在config.xml中的配置:

? ? //YOUR_REDIRECT_URL替换为你在开放平台上设置的redirecturi
? ? <preference name="REDIRECTURI" value="YOUR_REDIRECT_URL" />
2.微博插件中作者把so库的target地址写错了,修复方法如下
//找到以下这一行
? ? <source-file src="src/android/libs/arm64-v8a/libweibosdkcore.so" target-dir="libs/arme64-v8a/" />
? ? //把最后的 arme64-v8a 改为 arm64-v8a ，如下
? ? <source-file src="src/android/libs/arm64-v8a/libweibosdkcore.so" target-dir="libs/arm64-v8a/" />
六、检查是否安装APP
YCQQ.checkClientInstalled(function(){
? ? ? ? QQINSTALLED=true;
? ? },function(){
? ? ? ? // if installed QQ Client version is not supported sso,also will get this error
? ? ? ? QQINSTALLED=false;
? ? });
? ? Wechat.isInstalled(function (installed) {
? ? ? ? WEIXININSTALL=installed;
? ? });
? ? YCWeibo.checkClientInstalled(function(){
? ? ? ? WEIBOINSTALL=true;
? ? },function(){
? ? ? ? WEIBOINSTALL=false;
? ? });
七、第三方登录
?//QQ登录
? ? var checkClientIsInstalled = 1;//default is 0,only for iOS
? ? YCQQ.ssoLogin(function(args){
? ? ? ? ? alert(args.access_token);
? ? ? ? ? alert(args.userid);
? ? ? ? ? },function(failReason){
?? ? ? ? ? console.log(failReason);
? ? },checkClientIsInstalled);
? ? ?
? ? //微信登录
? ? var scope = "snsapi_userinfo";
? ? Wechat.auth(scope, function (response) {
? ? ? ? // you may use response.code to get the access token.
? ? ? ? alert(JSON.stringify(response));
? ? }, function (reason) {
? ? ? ? alert("Failed: " + reason);
? ? });
? ? ?
? ? //微博登录
? ? YCWeibo.ssoLogin(function(args){
?? ? ? ? ? ? alert(args.access_token);
?? ? ? ? ? ? alert(args.userid);
? ? ? ? ? },function(failReason){
?? ? ? ? ? ? console.log(failReason);
? ? });
八、第三方分享
//QQ分享
var args = {};
args.url = "";
args.title = "";
args.description = "";
args.imageUrl = "";
args.appName = "";
YCQQ.shareToQQ(function(){
? ? console.log("share success");
},function(failReason){
? ? console.log(failReason);
},args);
?
//微信分享
//Wechat.Scene.TIMELINE 表示分享到朋友圈
//Wechat.Scene.SESSION 表示分享给好友
//（1）文本
Wechat.share({
? ? text: "This is just a plain string",
? ? scene: Wechat.Scene.TIMELINE ? // share to Timeline
}, function () {
? ? alert("Success");
}, function (reason) {
? ? alert("Failed: " + reason);
});
//（2）媒体
Wechat.share({
? ? message: {
? ? ? ? title: "Hi, there",
? ? ? ? description: "This is description.",
? ? ? ? thumb: "www/img/thumbnail.png",
? ? ? ? mediaTagName: "TEST-TAG-001",
? ? ? ? messageExt: "这是第三方带的测试字段",
? ? ? ? messageAction: "<action>dotalist</action>",
? ? ? ? media: "YOUR_MEDIA_OBJECT_HERE"
? ? },
? ? scene: Wechat.Scene.TIMELINE ? // share to Timeline
}, function () {
? ? alert("Success");
}, function (reason) {
? ? alert("Failed: " + reason);
});
//（3）网页链接
Wechat.share({
? ? message: {
? ? ? ? ...
? ? ? ? media: {
? ? ? ? ? ? type: Wechat.Type.LINK,
? ? ? ? ? ? webpageUrl: "http://tech.qq.com/zt2012/tmtdecode/252.htm"
? ? ? ? }
? ? },
? ? scene: Wechat.Scene.TIMELINE ? // share to Timeline
}, function () {
? ? alert("Success");
}, function (reason) {
? ? alert("Failed: " + reason);
});
?
//微博分享（该插件只支持网页链接）
var args = {};
args.url = "http://www.baidu.com";
args.title = "Baidu";
args.description = "This is Baidu";
args.imageUrl = "https://www.baidu.com/img/bdlogo.png";//if you don‘t have imageUrl,for android http://www.sinaimg.cn/blog/developer/wiki/LOGO_64x64.png will be the defualt one
args.defaultText = "";
YCWeibo.shareToWeibo(function () {
? ? alert("share success");
?}, function (failReason) {
? ? alert(failReason);
?}, args);
九、插件的改造
1.SESSION的删除,YC采用了session缓存access_token的方式,导致我遇到一个问题，未调用登出而更换了其他第三方账号，则不能重新授权，由于项目的特殊性，所以我决定把session去掉,方法如下:
Android: YCQQ.java，查找 mTencent.isSessionValid() 并注释掉 if 和 else，只保留 else 中的代码
? ? IOS: YCQQ.m，查找 self.tencentOAuth.isSessionValid 并注释掉 if 和 else，只保留 else 中的代码
2.微博分享URL并不实用,，分享出去只能显示“网页链接”四个字，并没有图片及简介，估计要走申请审核，不过我没有找到入口，于是我决定把webpage方式的分享改为文本方式,以下是代码
强制（js中定义 args 时也要把内容写到 content 中）
?Android: YCWeibo.java，查找 weiboMessage.mediaObject = getWebpageObj(params); 那一段，改为：
? ? TextObject textObject = new TextObject();
? ? textObject.identify = Utility.generateGUID();
? ? try{
? ? ? textObject.text = params.getString("content");
? ? } catch(JSONException e){
? ? }
? ? weiboMessage.mediaObject = textObject;
IOS: YCWeibo.m，注释 WBWebpageObject 那部分，添加代码：
?message.text=[params objectForKey:@"content"];
十、重新生成平台,手动修改插件,需要重新生成平台版本

? cordova platform rm android
? cordova platform rm ios
? cordova platform add android
? cordova platform add ios
十一、Xcode 需要允许bitcode，因为新浪的库不符合
强制:build settings - > all -> 搜索 bitcode，把值改no
十二、xcode需做urltype的检查，有缺少则补充
tencentopenapi
URL Schemes: tencent+appid
weibo
URL Schemes: wb+appid
weixin
URL Schemes: appid