美文网首页技术
通过js sdk 来进行第三方登录及授权(微博,微信,qq)

通过js sdk 来进行第三方登录及授权(微博,微信,qq)

作者: Michelle_Lee | 来源:发表于2017-03-10 14:37 被阅读7735次

    微博第三方登录及授权

    注册申请appkey

    1.打开微博开发者平台http://open.weibo.com/development
    2.点击创建微链接
    3.选择类型(选择网站接入)
    4.填写各项信息,并把对应的meta复制并放在html的head内(一定要绑定域名并设置回调地址)
    <meta property="wb:webmaster" content="xxxxxxx" />
    5.在html内引入微博api(debug=true是调试模式,可以返回对应的信息)
    <script type="text/javascript" src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=你的appkey&debug=true" charset="utf-8"></script>

    编写js代码

    if(WB2.checkLogin()){//检查是否已登录
        WB2.logout(function(){//退出登录方法
            //回调方法
        });
    }
    WB2.login(function(){//登录授权
        WB2.anyWhere(function(W){
            W.parseCMD('/account/get_uid.json',function(oResult1,bStatus){//获取用户uid
                if(bStatus){
                    W.parseCMD('/users/show.json',function(oResult2,bStatus){//通过uid获取用户信息
                        if(bStatus){
                            var args = {
                                openid:oResult2.id,//获取用户openid
                                access_token:WB2.oauthData.access_token,//获取用户access_token
                                username:oResult2.name,//获取用户名
                                userHeadImg:oResult2.profile_image_url,//获取用户微博头像
                            }
                            //然后根据实际情况进行自己网站的一些认证处理
                        }
                    },{uid:oResult1.uid},{method:'get',cache_time:30});
                }
            },{},{method:'get',cache_time:30});//默认是post请求方法
        });
    });
    

    QQ第三方登录及授权

    注册申请id

    1.打开腾讯开放平台http://open.qq.com/reg
    2.填写各项信息获得appid和appkey
    3.引入js文件
    <script id="qq" type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="你自己的appid" charset="utf-8"></script>

    编写js代码

    if(QC.Login.check()){//检查是否已登录
        QC.Login.signOut();退出登录
    }
    QC.login({
        btnId:"",//插入按钮的节点id,必选,可为空字符串
        scope:"all",//用户需要确认的scope授权项,可选,默认all
        size: "A_XL"//按钮尺寸,可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S],可选,默认B_S
    },function(reqData,opts){
        //登录成功回调方法
        QC.Login.getMe(function(openId,accessToken){
            var args = {
                openid:openId,
                userHeadImg:reqData.figureurl_qq_2,
                access_token:accessToken,
            };
        });
        QC.api('get_user_info',{}).success(function(userdata){
            //可以获得用户的各种相关信息,如用户昵称
            var username = userdata.data.nickname;
        });
    },function(opts){
        //注销成功回调方法
    });
    

    微信第三方登录及授权

    注册申请id

    1.打开微信开放平台https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN
    2.填写各项信息并获得appid
    3.由于微信是需要用手机扫二维码登录的,所以可以通过直接打开新窗口的方式来让用户去扫码登录,因此无需引用js相关文件

    编写js代码

    var path = 'http://www.xxxx.com';//登录后回调的地址
    var appid = 'xxxxxxxxx';//注册申请的appid
    window.open('https://open.weixin.qq.com/connect/qrconnect?appid='+appid+'&redirect_uri=path&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect');//代开二维码页面,扫码成功后会回调到path地址
    //然后可以通过地址栏得到code参数的值,可以通过code值来根据需要进行进一步的操作

    相关文章

      网友评论

      • yi条咸鱼:微信code,我已经拿到了,在页面上输入https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxfb5b6d2c5659960a&secret=3b5a4e1c7a7fddd57752503ae96c0f5c&code=&quot;+code+"&grant_type=authorization_code,没有办法通过ajax获取到accuss_token,一直在报Uncaught SyntaxError: Unexpected token :,想问下,你的那个微信的后边的是怎么写的
      • 73cb5f015572:4.填写各项信息,并把对应的meta复制并放在html的head内(一定要绑定域名并设置回调地址)
        <meta property="wb:webmaster" content="xxxxxxx" />,这段回调地址和域名写在哪?是content里面么
        Michelle_Lee:不是的。是一定要在开发者平台上绑定好。
      • 8c0a33c0e9cb:微博授权那段代码 可以直接拉取授权页面?还是说不弹出授权页面直接授权成功拿到用户信息?求指点,信息。我看文档用的拉授权拿code 获取token 再去取用户信息。你这个写法可以说说嘛?我复制你的代码参数填好没有效果?!
        Michelle_Lee:qq和微信用以上代码是没问题的。微博这边,由于Chrome做了一些升级更新,所以以上代码在Chrome53.0以上是无效的,用qq浏览器、猎豹浏览器是正常的。

      本文标题:通过js sdk 来进行第三方登录及授权(微博,微信,qq)

      本文链接:https://www.haomeiwen.com/subject/dcangttx.html