apiCloud授权绑定第三方账号，微信、QQ、微博。

最新推荐文章于 2021-03-28 15:04:40 发布
最新推荐文章于 2021-03-28 15:04:40 发布
阅读量239 收藏 2
点赞数
文章标签： json
本文介绍了一款社交应用如何实现微信、QQ和微博的第三方登录及账号绑定功能。包括了检测客户端安装情况、获取授权码、访问令牌、用户基本信息等步骤，并详细展示了通过API进行用户信息获取和后台绑定操作的具体实现。
摘要由CSDN通过智能技术生成

422101-20161212161717354-1573846954.png

1.检测软件是否安装

2.授权获取code

3.获取token，openid等

4.获取头像昵称

var wx,qq,weibo;
var loginParam={};
apiready = function () {
    fix_status_bar();
    var user = $api.getStorage('user');
    var customerId = user.customer_id;
    var memberId   = user.member_id;

    // 获取第三方绑定信息
    api.ajax({
        url: BASE_REQUEST_URL+'/Customer/GetExternal',
        method: 'post',
        data: {
            values: {
                customerId: customerId,
                memberId: memberId
            }
        }
    }, function(json, err) {
        if (json.result) {
            var interText = doT.template($("#info_tmpl").text());
            $("#info_area").html(interText(json.info));
        } else {
            var toast = new auiToast();
            toast.fail({
                title: json.msg,
                duration: 2000
            });

        }
    });

}


function initWxBind() {
    wx = api.require('wx');
    wx.isInstalled(function(ret, err) {
        if (!ret.installed) {
            alert('当前设备未安装微信客户端');
        } else {
            wx.auth(function(ret, err) {
                if (ret.status) {
                    wx.getToken({
                        code: ret.code
                    }, function(ret, err) {
                        if (ret.status) {
                            api.showProgress({
                                style: 'default',
                                animationType: 'fade',
                                title: '授权成功',
                                text: '绑定处理中...',
                                modal: true
                            });
                            var provideName="wx_" + BASE_APP_TYPE;
                            //临时存储openId,与accessToken后面绑定账号时用到(绑定用完需要清理掉)
                            loginParam.provideName=provideName;
                            loginParam.openId=ret.openId;
                            loginParam.accessToken=ret.accessToken;
                            loginParam.refreshToken=ret.dynamicToken;
                            $api.setStorage('loginParam', loginParam);
                            //获取wx头像，昵称
                            wx.getUserInfo({
                                accessToken: ret.accessToken,
                                openId: ret.openId
                            }, function(ret, err) {
                                if (ret.status) {
                                    // 绑定成功
                                    var loginParam=$api.getStorage('loginParam');
                                    loginParam.nickName=ret.nickname;
                                    loginParam.avatar=ret.headimgurl;
                                    $api.setStorage('loginParam', loginParam);
                                    // 实现绑定动作
                                    bindAccount(function (res) {
                                        if (res == true) {
                                            // 发送页面刷新事件
                                            var toast = new auiToast();
                                            toast.success({
                                                title: "绑定成功",
                                                duration: 2000
                                            });
                                            setTimeout("location.reload()", 2000);
                                        }
                                    });
                                    api.hideProgress();
                                }
                            });

                        } else {
                            alert(JSON.stringify(err))
                        }
                    });
                } else {
                    var toast = new auiToast();
                    toast.fail({
                        title: "微信授权绑定失败",
                        duration: 1500
                    });
                }
            });
        }
    });
}

function initQQBind() {
    qq = api.require('qq');
    qq.login(function(ret, err) {
        if (ret.status) {
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '授权成功',
                text: '绑定处理中...',
                modal: true
            });
            var provideName="qq_" + BASE_APP_TYPE;
            loginParam.provideName=provideName;
            loginParam.openId=ret.openId;
            loginParam.accessToken=ret.accessToken;
            $api.setStorage('loginParam', loginParam);
            //获取qq头像，昵称
            qq.getUserInfo(function(ret, err) {
                if (ret.status) {
                    // 绑定成功
                    var loginParam=$api.getStorage('loginParam');
                    loginParam.nickName=ret.info.nickname;
                    loginParam.avatar=ret.info.figureurl_qq_2;
                    $api.setStorage('loginParam', loginParam);
                    //实现绑定动作
                    bindAccount(function (res) {
                        if (res == true) {
                            // 发送页面刷新事件
                            var toast = new auiToast();
                            toast.success({
                                title: "绑定成功",
                                duration: 2000
                            });
                            setTimeout("location.reload()", 2000);
                        }
                    });
                    api.hideProgress();

                }
            });
            
        } else {
            var toast = new auiToast();
            toast.fail({
                title: "授权失败",
                duration: 1500
            });
        }
    });
}


function initWbBind() {
    weibo = api.require('weibo');
    weibo.auth(function(ret, err) {
        //alert(JSON.stringify(ret));
        if (ret.status) {
            api.showProgress({
                style: 'default',
                animationType: 'fade',
                title: '授权成功',
                text: '绑定处理中...',
                modal: true
            });
            var provideName="wb_" + BASE_APP_TYPE;
            //临时存储openId,与accessToken后面绑定账号时用到(绑定用完需要清理掉)
            loginParam.provideName=provideName;
            loginParam.openId=ret.userId;
            loginParam.accessToken=ret.token;
            $api.setStorage('loginParam', loginParam);
            //获取微博头像，昵称
            weibo.getUserInfo(function(ret,err){
                if (ret.status) {
                    // 绑定成功
                    var loginParam=$api.getStorage('loginParam');
                    loginParam.nickName=ret.userInfo.screen_name;
                    loginParam.avatar=ret.userInfo.avatar_large;
                    $api.setStorage('loginParam', loginParam);
                    // 实现绑定动作
                    bindAccount(function (res) {
                        if (res == true) {
                            // 发送页面刷新事件
                            var toast = new auiToast();
                            toast.success({
                                title: "绑定成功",
                                duration: 2000
                            });
                            setTimeout("location.reload()", 2000);
                        }
                    });
                    api.hideProgress();
                }
            });
            
        }else {
            var toast = new auiToast();
            toast.fail({
                title: "授权失败",
                duration: 1500
            });
        }
    });
}



// 解除绑定
function removeAuth(externalId) {
    var user = $api.getStorage('user');
    var customerId = user.customer_id;

    // 获取第三方绑定信息
    api.ajax({
        url: BASE_REQUEST_URL+'/Customer/RemoveAuthentication',
        method: 'post',
        data: {
            values: {
                customerId: customerId,
                externalId:externalId
            }
        }
    }, function(json, err) {
        if (json.result) {
            var toast = new auiToast();
            toast.success({
                title: '解绑成功',
                duration: 2000
            });
            setTimeout("location.reload();", 2000);
        } else {
            var toast = new auiToast();
            toast.fail({
                title: json.msg,
                duration: 2000
            });

        }
    });
    
}

function bindAccount(callback) {
    var loginParam = $api.getStorage('loginParam');
    var user       = $api.getStorage('user');
    api.ajax({
        url: BASE_REQUEST_URL + '/Customer/AssociateAccountWithExistCustomer',
        method: 'post',
        data: {
            values: {
                provideName: loginParam.provideName,
                openId: loginParam.openId,
                accessToken: loginParam.accessToken,
                refreshToken: loginParam.refreshToken,
                userName: user.login_name,
                nickName: loginParam.nickName,
                avatar: loginParam.avatar,
            }
        }
    }, function(ret, err) {
        if (ret.status == 1) {
            callback(true);
        }
        callback(false);
    });
}

function showAction() {
    var dialogBox = api.require('dialogBox');
    dialogBox.actionMenu ({
        tapClose: true, // 点击关闭
        rect:{
            h: 150
        },
        texts:{
            cancel: '取消'
        },
        items:[
            {
                text: '绑定微信',
                icon: 'widget://image/share_wx.png'
            },
            {
                text: '绑定QQ',
                icon: 'widget://image/share_qq.png'
            },
            {
                text: '绑定微博',
                icon: 'widget://image/share_wb.png'
            },
        ],
        styles:{
            bg:'#FFF',
            column: 3,
            itemText: {
                color: '#000',
                size: 12,
                marginT:8
            },
            itemIcon:{
                size:50
            },
            cancel:{
                bg: 'fs://icon.png',
                color:'#000',
                h: 44 ,
                size: 14
            }
        }
    }, function(ret){
        if (ret.index == '0') { // 微信
            initWxBind();
            dialogBox.close();
        }

        if (ret.index == '1') { // QQ
            initQQBind();
            dialogBox.close();
        }

        if (ret.index == '2') { // 微博
            initWbBind();
            dialogBox.close();
        }

        if (ret.eventType == 'cancel') {
            dialogBox.close();
        }
    });
}

确保已经有这些数据申请,申请要些时日。

<feature name="wx"> 
    <param name="urlScheme" value="wx65fbcf8b5a4765cc"/>  
    <param name="apiKey" value="wx65fbcf8b5a4765cc"/>  
    <param name="apiSecret" value="6f9e7a1cb328745de623263c18773368"/> 
</feature>  
<feature name="qq"> 
    <param name="urlScheme" value="tencent1105688283"/>  
    <param name="apiKey" value="1105688283"/> 
</feature>  
<feature name="weibo"> 
    <param name="urlScheme" value="wb3537030359"/>  
    <param name="apiKey" value="3537030359"/>  
    <param name="registUrl" value="http://www.diandodo.com"/> 
</feature>
weixin_34255793
关注
APICloud使用记录——创建项目
Colimuca的博客
03-29 7060
APICloud创建项目分为两种：APICloud云端创建和APICloud Studio创建 APICloud云端创建 1、打开APICloud官网http://www.apicloud.com/console，点击创建应用，选择Native ，输入应用名称和应用描述，如图： 2、可以使用TortoiseSVN从云端拉取项目代码，或者打开APICloud Studio，通过云端资源库可
apicloud——微信第三方登录、apple登录
baidu_41604826的博客
05-18 1198
apicloud中微信第三方登录的问题 混合开发移动应用很火啊现在，多数公司都要求是必备技能，或者加分技能，所以学习来了 如下是作为前端工作者应该了解的内容，更加详细的前往官方示例 *** 结合apicloud官方提供的模块——wxPlus或者是wx（新旧版本而已） a.wxPlus.isInstalled判断是否安装了微信，如果有再进行下一步，没有就给与相应的提示； b.wxPlus.auth去...
APICloud 微信授权登录
weixin_33757911的博客
12-16 2816
2019独角兽企业重金招聘Python工程师标准>>> ...
apicloud mysql_APICloud 微信授权登录
weixin_42525106的博客
02-06 266
使用此模块之前建议先配置 config.xml 文件，配置完毕，需通过云端编译生效，配置方法如下：名称：wx参数：urlScheme、apiKey、apiSecret配置示例:字段描述:urlScheme：(必须配置)用于实现应用间跳转及数据交换，本应用可以启动微信客户端，也可以从微信客户端跳回本应用。urlScheme 的 value 值是从微信开放平台获取的 appid。appid 申请方法参...
QQ 登录API
weixin_33834679的博客
07-02 515
2019独角兽企业重金招聘Python工程师标准>>> ...
php使用QQ登录API,QQ的账号登录及api操作
weixin_31265295的博客
03-28 1247
QQ的账号登录及api操作，使用oauth 2.0官方提供的sdk都太过庞大，这是我自己简化的，提供简单的账号登录、获取个人信息、发布分享等功能，如果需要其他功能可以根据官方的api文档自行添加qq.php...
微信，微博，qq第三方登录demo，thinkphp框架
04-03
本项目是基于ThinkPHP框架实现的一个简单示例，用于演示如何集成微信、微博和QQ这三大主流社交平台的第三方登录功能。 首先，我们要了解ThinkPHP框架。ThinkPHP是一款国内广泛使用的开源PHP框架，基于MVC（Model-...
第三方登陆包含qq微信微博
12-27
3. 获取授权码：用户授权后，第三方平台会返回一个授权码给应用。 4. 换取令牌：应用使用授权码向第三方平台请求访问令牌，这个令牌用于后续的API调用，以获取用户信息。 5. 获取用户信息：应用使用令牌调用第三方...
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
09-28
在`NativeShare.js`中，这部分通常会涉及到平台特定的调用代码，例如调用微信的`wx.onMenuShareAppMessage`和`wx.onMenuShareTimeline`等方法，QQ的`QQApi.share`，以及微博的`WeiboAPI.share`等。 总的来说，HTML5...
网页分享插件，可以实现微信、QQ、微博分享
11-17
网页分享插件是一种常见的工具，尤其在现代互联网环境中，它为用户提供了一种便捷的方式，将网页内容快速地分享到各种社交媒体平台，如微信、QQ和微博。本插件的标题和描述表明，它专为PC端和H5（HTML5）网页设计，...
apicloud开发app案例 生成QQ和微信的聊天界面.zip
07-13
《APICloud开发APP实战：构建类似QQ与微信的聊天界面》 APICloud作为一个强大的移动应用开发平台，提供了高效且便捷的HTML5+JavaScript API，使得开发者可以快速构建原生的移动应用。本教程以“apicloud开发app案例...
[ APP开发技巧 ] APICloud打开三方地图整合（百度，高德，腾讯，苹果自带）
weixin_43947457的博客
11-01 900
一直想系统的整理打开地图的方法，今天抽时间把了百度，高德，腾讯，苹果自带地图都整理出来了，闲话不多说，直接上干货 ----------------------------------------------------------------------code start---------------------------------------------------------------...
apicloud 第三方登录授权、微信、扣扣、微博登录授权
weixin_30680385的博客
05-14 477
授权登录、接入第三方的配置 例如：微信的登录授权。 首先在模块里面添加 wx 这个模块，然后在项目的配置文件里面进行配置。 配置的时候要现在微信开放平台 https://open.weixin.qq.com/ 的移动应用里面，创建这个应用，等审核通过之后就会拿到相应的 appleid 以及 key。 具体配置请参考 https://docs.apicloud.com/Cl...
APICloud-App-Templates
飞奔的小土豆@1024
06-16 2362
基于APICloud平台开发的应用案例模版源码合集，收集一些优秀的基于 APICloud 技术开发的应用模板，欢迎更多的开发者共享优质模板。 更多实际应用案例可以到APICloud开发案例查看，体验一下使用APICloud开发的App的功能、性能和体验。 仿每日优鲜应用模版： 模仿每日优鲜APP 2.0.2版本开发，包含APP源码、编译后的Android安装包（iOS的需要自己编
APP带第三方微博、微信、QQ等登录注册的登录注册流程分解
云鸽
10-24 1179
SpringSocial--第三方社交账号绑定
喝醉的咕咕鸟
03-25 899
SpringSocial提供了表单登陆的账号和第三方账号绑定的功能，主要作用的控制类是social包下的ConnectController类。 ConnectController源码： //用于社交账号绑定 @Controller @RequestMapping("/connect") public class ConnectController implements Initia...
QQ，微信第三方授权登录、分享
sxiaobi
05-15 2643
登录pc 微信登录 找后台拿链接 QQ登录 https://graph.qq.com/oauth2.0/show?which=Login&display=pc&state=当前时间戳&response_type=code&client_id=授权id&redirect_uri=回调地址 <a href="https://graph.qq.com...
Apicloud 底部导航实现
qq_26282869的博客
03-07 2584
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initi
C#实现QQ、微信、微博OAuth2.0授权登录代码示例
在OAuth2.0授权框架下，用户通过第三方平台（如QQ、微信、新浪微博）进行身份验证，应用获取到用户的授权凭证（access_token），然后可以进一步获取用户的公开信息或进行其他操作。在ASP.NET中实现这一过程，主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值