前端HTML第三方登录集合，微信，微博，企鹅

申请开发者账号之内的就不累赘了网上一大堆说下需求一个网页要在三类容器运行公司app微信自动登录浏览器。假设是已经申请完成各平台开发者账号。先来简单的微博和QQ微博引入微博JSscript srchttp://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey*******debugtrue typetext/javascript charsetutf-8/scriptappkey中填入你的微博开发者id(替换****)span idwb_connect_btn微博登录按钮/span在你的页面微博登录按钮标签上加入以上id。页面加载时微博会自动加载样式你也可以自己强行修改。script WB2.anyWhere(function (W) { W.widget.connectButton({ id: wb_connect_btn, type: 3,2, callback: { login: function (o) { //登录后的回调函数 console.log(o); thirdparty(null,null,o.avatar_hd, o.name ,3, o.id);//个人方法 try{ document.getElementsByClassName(loginout)[0].click(); //页面需求当前页面登录完成之后不进行跳转所以模拟点击事件让微博账号在当前域中退出。不影响下次登录。元素为微博动态添加 //微博没有提供退出方法。下面的logout为另一种开发模式调用。 }catch(e){ console.log(e); } }, logout: function () { //退出后的回调函数 } } }); }); /script将以上标签全部加入html中。至此只要在页面中登录之后就能在控制台看到返回数据。当然测试要在微博注册的域下。QQ登录和微博一样引入JavaScript文件script typetext/javascript srchttp://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js />②引入JS文件绑定点击事件 此时浏览器端自动打开QQ弹窗授权页 跳转红框中的回调地址 由于新URL带# 所以只能再跳回登录页③ JS 截取#后边的参数 回调地址组成新的跳转地址 再次请求回调地址后端处理部分效果图现在来说最蛋疼的微信登录。微信登录提供两种方法第一种扫码登录需要在微信开发者平台中注册获取appId。微信登录按钮span classweixin-login/span在你微信登录按钮上添加点击事件执行以下代码$(.weixin-login).on(click,function(){ window.location.hrefhttps://open.weixin.qq.com/connect/qrconnect? appid*******redirect_urihttp%3a%2f%2fwww.xxxxxx.com%2fwindow.location.pathname.substr(1)response_typecodescopesnsapi_loginstate3d6be0a4035d839573b04816624a415e#wechat_redirect; });需要替换redirect_url:要想传当前url直接encodeURIComponent(window.location.href) //当然需要你自己进行拼接不懂的留言至此当用户点击之后跳转至扫码界面例如https://passport.yhd.com/wechat/callback.do?codeCODEstate3d6be0a4035d839573b04816624a415e至此拿到第一步令牌code。在你的回调页面中你要获取url中的code去和微信换取下一步的令牌。因为换取下一步的令牌需要涉及到跨域请求但是微信不让跨域请求只能在后台进行后续事项。第二步后台请求https://api.weixin.qq.com/sns/oauth2/access_token?appid[APPID]secret[SECRET]code[CODE]grant_typeauthorization_code替换中括号中的数据。我走的get请求。返回以下数据{ access_token:ACCESS_TOKEN, expires_in:7200, refresh_token:REFRESH_TOKEN, openid:OPENID, scope:SCOPE, unionid: o6_bmasdasdsad6_2sgVt7hMZOPfL }最后一步就不说了https://api.weixin.qq.com/sns/userinfo?access_token[ACCESS_TOKEN]openid[OPENID]替换成上次请求获取到的数据再请求一次获奖用户基本信息。详情查看微信开发者帮助