cordova 实现第三方登录及分享，qq，微信，微博，插件的使用和改动

cordova 实现第三方登录及分享，qq，微信，微博，插件的使用和改动

www.111cn.net 编辑:angel 来源:转载

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码

　QQ、微信、微博，只针对移动应用或JS提供SDK，JS SDK表面上是最方便cordova项目实现的，但在授权是通过网页的，其session还需要在网页上输入用户名密码来建立，而android sdk和ios sdk的实现形式是调用本身已安装的第三方软件完成授权，显然后者才是我们想要的方式。

插件推荐：

（以下几个插件是我用到的，其他的我还试过一些，都不满意）

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/
2、通过cordova添加插件

注意：由于微信插件会改变根目录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

3、插件的进一步设置

微博需要验证redirecturi，所以，如果在开放平台上有设置redirecturi，则需要在config.xml文件中加入以下属性：

//YOUR_REDIRECT_URL替换为你在开放平台上设置的redirecturi

<preference name="REDIRECTURI" value="YOUR_REDIRECT_URL" />

微博插件中作者把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/" />

4、检查是否安装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;

});

5、第三方登录

//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);

});

6、第三方分享

//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);

7、插件的改造

（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"];

8、重新生成平台，手动修改插件后，需要重新生成平台版本（如果你有在其他地方有改过生成后的文件，请记得重新设置）

cordova platform rm android

cordova platform rm ios

cordova platform add android

cordova platform add ios

9、xcode需允许bitcode，因为新浪的库不符合

build settings - > all -> 搜索 bitcode，把值改no

10、xcode需做urltype的检查，有缺少则补充

tencentopenapi 

URL Schemes: tencent+appid

weibo

URL Schemes: wb+appid

weixin

URL Schemes: appid