前端第三方登录集合，QQ、微信、微博

从http://www.cnblogs.com/v-weiwang/p/5732423.html转载的

微信、QQ、微博等第三方登录都是基于OAuth2.0原则

申请开发者账号之内的就不累赘了，网上一大堆：

说下需求，一个网页要在三类容器运行，公司app，微信自动登录，浏览器。

假设是已经申请完成各平台开发者账号。

先来简单的，微博和QQ

微博：

引入微博JS

<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=*******&debug=true" type="text/javascript" charset="utf-8"></script>

appkey中，填入你的微博开发者id(替换****)

1	`<` `span` `id="wb_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 type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="******" charset="utf-8"></script>

微博类似，替换为你的appid

<span id="qqLoginBtn"></span>

登录标签中加入id标识

然后JavaScript中加入以下代码：

QC.Login({//btnId：插入按钮的节点id，必选btnId:"qqLoginBtn",//用户需要确认的scope授权项，可选，默认allscope:"all",//按钮尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可选，默认B_Ssize: "B_S"}, function(reqData, opts){//登录成功//根据返回数据，更换按钮显示状态方法
                    console.log(reqData);//查看返回数据QC.Login.getMe(function(openId, accessToken){//获取用户的openIdconsole.log('QQOPENID:'+openId);thirdparty(null,null,reqData.figureurl_qq_2,reqData.nickname,1,openId);QC.Login.signOut();//退出QQ登录调用事件});});

测试要在QQ中注册的域名下。重要的事情，再说一遍。

QQ和微博登录，大致相同，只要引入JS文件，然后直接调用方法即可，QQ比微博更和谐，直接提供退出事件。上面代码中有。。

现在来说最蛋疼的微信登录。

微信登录提供两种方法：

第一种，扫码登录：

需要在微信开发者平台中，注册获取appId。

微信登录按钮：

<span class="weixin-login"></span>

在你微信登录按钮上，添加点击事件，执行以下代码：

$('.weixin-login').on('click',function(){window.location.href='https://open.weixin.qq.com/connect/qrconnect?' +'appid=*******&redirect_uri=http%3a%2f%2fwww.xxxxxx.com%2f'+window.location.pathname.substr(1)+'&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect';});

需要替换：

redirect_url:要想传当前url，直接encodeURIComponent(window.location.href) //当然，需要你自己进行拼接，不懂的留言

至此，当用户点击之后，跳转至扫码界面：

例如：https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

至此，拿到第一步令牌，code。在你的回调页面中，你要获取url中的code去和微信换取下一步的令牌。因为换取下一步的令牌需要涉及到跨域请求，但是微信不让跨域请求，只能在后台进行后续事项。

第二步，后台请求：https://api.weixin.qq.com/sns/oauth2/access_token?appid=[APPID]&secret=[SECRET]&code=[CODE]&grant_type=authorization_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]

替换成上次请求获取到的数据，再请求一次，获奖用户基本信息。

详情查看微信开发者帮助

前端第三方登录集合，QQ、微信、微博相关推荐

python 第三方登录_Python 第三方登录实现QQ 微信微博登录
本人写的AgentLogin,能快速返回QQ.微信.微博第三方用户名信息,主要用于快速登录用 pip命令安装 pip install AgentLogin 用法 : 导入这个包 from Agent ...
vue+cordova 实现第三方登录（ QQ 微信微博）之微信登录
概要 1.首先先到各个开放平台申请开发者账号先申请,审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/ 腾讯开放平台 http://open.qq.com/ ...
Java第三方登录（QQ，微博，微信）
第三方登录_新浪微博 1. 在微博开发平台,注册开发者用户并填写相关信息和创建应用信息,等待审核通过,然后进行下一步编码操作http://open.weibo.com/,具体操作可在微博开发平台观 ...
Spring Boot开发之使用JustAuth组件实现第三方登录（QQ、微博等）
在我们的项目开发中,使用第三方登录(如QQ登录.微信登录等)可以更加方便.轻松地实现用户登录. 在以往的开发过程中,如果要使项目实现第三方登录功能,一般过程是阅读官网的开发文档,并下载其JDK(或者依 ...
个人博客系统开发总结之第三方登录（QQ、微博）
当别人访问我的博客系统时,如果需要评论,就需要登录.如果此时要求注册,就比较麻烦,并且会引起访问者的反感.于是就采用第三方登录.目前支持QQ.微博登录. QQ登录 QQ互联开放平台为第三方网站提供了丰 ...
dedecms织梦第三方登录插件-QQ登录、微博登录、微信登录
织梦程序集成第三方QQ登录.微博登录.微信登录,获取QQ.微博.微信,并存储至数据库,一键注册为网站会员,不用再次填写绑定信息,方便粘贴用户更强. 织梦第三方登录效果第三方登录插件特点 1.所有文件 ...
Oauth2.0 QQ微信微博实现第三方登陆
一.写在前面目前对于大多数的App或Web网站都支持有第三方登陆这个功能,用户可使用 QQ/ 微信/ 微博帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户.最近在新项目上刚好用到了,在 ...
实现在App端授权qq/微信/微博登录
App端登陆相关的SDK需要在manifest中配置: 打开 manifest.json -> App模块权限配置,勾选 OAuth(登陆鉴权). 打开 manifest.json -> ...
安卓三方登录趟坑,QQ,微信,微博,Twitter,Facebook,Instagram
前言最近给app加入三方登录,由于比较多,所以就用的友盟统一登录,会比一个一个配置方便点正文先说QQ,微信,微博: 国内QQ,微信,微博三方登录其实还行,并没有太多坑,文档也挺完善的. 但是需要 ...

前端第三方登录集合，QQ、微信、微博

前端第三方登录集合，QQ、微信、微博相关推荐

最新文章

热门文章