网站三端登陆
信息来源网络,用于学习。侵删
微信第三方登录与静默授权
微信的授权登录在日常应用中应用的非常广泛,最多就是第三方登录,最近在搞这方面的例子,做个笔记,方便查阅。
微信登录分为两类:需要用户确认的授权登录与静默授权,用户确认的授权登录因为要通过用户的个人确认,所以可以获取用户全面的信息,无论是否关注相关微信号都可以获取,静默授权是嵌套在普通网页中的授权方式,不需要用户确认,但只能获取微信用户的唯一标识openid,但有时候这种交互方式更加的友好,对于用户的简单认证还是很有用的。接下来就分别详细介绍下两种登录方式的详细过程,减少没有必要的踩坑,无论什么授权,就是要具有网页授权的基本接口权限,如下图所示。
有了权限以后,点击修改,里面有一个网页授权域名选项,填写你的域名,不需要带http等协议头,请认真填写,例如:www.baidu.com,因为你的授权页面是要挂在这个域名下的,如果大家测试的话,可以使用花生壳内网映射来发布网页,有固定域名提供的。
网页授权的具体api说明链接地址如下:
https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
授权登录:
1.调用微信api获取用户授权code,即用户点击确认登录后返回给页面的一个值
其中Redirect_uri的值为用户同意授权后的回调页面,且该页面要在授权回调域名下,并且该网页的地址要经过url编码后才能访问,scope参数为授权模式,这里填写snsapi_userinfo,即用户授权。
2.调用微信api根据返回的code换取网页授权凭证accesstoken
其中的appid与secert是微信服务号或订阅号的基本信息中内容,返回值是一个json字符串,我们只要获取其中的用户唯一标识openid与授权凭证accesstoken就够了。
3.调用微信api根据用户授权凭证获取用户的账号信息
返回的信息也是json字符串,包含用户昵称,城市,国家等信息,当然也一定会包含用户唯一标识openid
静默授权:
静默授权与用户登录授权有几点不同
1.第一步获取code的时候scope的值为snsapi_base
2.第二步获取到openid之后授权过程至此结束
在这里提供给大家静默授权的一个作用,就是可以根据用户的唯一标识openid来判断用户是否关注了本微信公众号,在获取了openid之后再进行两步操作即可
3.调用微信api获取微信的通用凭证accesstoken
微信api说明地址:
https://mp.weixin.qq.com/wiki/11/0e4b294685f817b95cbed85ba5e82b8f.html
需要注意的是,这个凭证和用户授权的凭证不一样!!!一定要记住!!
4.调用微信api获取用户基本信息
微信api说明地址:
https://mp.weixin.qq.com/wiki/14/bb5031008f1494a59c6f71fa0f319c66.html
这里的accesstoken一定要用第三步获取的,千万不要用和openid一起获取的accesstoken,那个凭证仅仅适用于用户授权登录,在返回信息中一定回包含一个字段subscribe,如果用户关注了,值为1,并可以返回更多的用户信息,用户没有关注,值为0,没有更多的信息
微博第三方平台的登录接入
开发之前的准备如下:
1、注册新浪微博
2、访问新浪微博开发平台http://open.weibo.com,如果是企业,申请企业接入,并提交相关资料进行审核;如果是个人开发者,就请申请个人开发者应用,一下以开发者为例
3、使用新浪微博的开放API,就需要跟新浪申请一个appkey和App Secret,这个是入口,必须获取到这两个才能进行接下来的接入工作
4、进入http://open.weibo.com完善个人信息之后,必须还要做完身份认证审核,审核完成之后,新浪开放平台就会给出appkey和App Secret
5、接下来就是如何使用appkey和App Secret了,需要去下载开放平台中文档或者是demo代码,其实提供的文档基本都是技术文档,很多东西没有讲清楚,对于初次接触的人,还是会遇到很多麻烦
6、新浪开放平台提供了很多不同开发语言的sdk,这里我选择java sdk,下载一个(包含新版接口及OAuth2.0)的zip文件,解压之后可以直接import到eclipse中去,结构如下,包括weibo4j源代码和example代码
这里有一个config配置文件,打开如下:
之前我们申请的appkey和App Secret就派上用场了,这里的client_ID就是appkey,client_SERCRET就是App Secret,把相应的内容填上去,另外redirect_URI这就是回调地址,
点击“第三方”——》跳转微博登陆——》登录ok,授权——》回调自己的应用,这里就是回调地址的意思了。
7、开始去运行测试程序,测试程序在example下,包weibo4j.examples.oauth2下的类OAuth4Code,这里我们需要做一些修改,修改程序中的
oauth.authorize("code",args[0],args[1]),将这段改成oauth.authorize("code","","all"),至于为什么这么改,这里请阅读接口文档oauth.authorize的使用说明
假设这里我们还没有回调地址,配置文件中的redirect_URI为空,运行之后,他会自动打开浏览器运行测试,显示如下:
这里说明我的appkey和App Secret是有效的,这里由于我们没有创建正式的应用,新浪无法识别我的来源
8、在开放平台上创建应用,如下图所示
这里有三类应用,网站接入、站内应用、移动应用,如果是企业行为,有公开的域名可以访问,并且应用程序是通过域名进行访问,这里任何一种方式都可以用,但如果我们只是简单开发者,没有公用域名,比如是内 部局域网模式,ip为内网地址192.168.1.*开头,本地127.0.0.1之类的,这里就只能选择创建站内应用,填写如下
这里红色框标记的地方就是回调地址,如果我没有公网ip和域名,局域网玩玩就这么填写就ok了,不过这里不能用localhost代替127.0.0.1,这里按照配置要求完成,这个配置里面的要求是很严谨的,
特别是下面的几个应用图标,总之比较麻烦,这里结束了之后,就可以提交审核了。
9、提交审核之后,第一次大约1天时间,新浪开放平台就会发邮件到你的邮箱,告知你审核结果,不过这里审核结果失败与否没有关系,关键就是要提交审核,没有审核成功,这里照常可以用
10、完成测试工程中的配置文件redirect_URI,这里必须与创建应用时填写的【应用实际地址】保持一致,这就是回调地址!完成配置之后,再次运行OAuth4Code.java,如图所示
这里就跳转到新浪微博的登录页面,登录新浪微博的账户之后,就需要点击授权,表示你的微博帐号相关内容可以被接入的平台分享你的信息等等,授权结束之后,
会返回一个code,这个code非常重要,就是我们整个接入第三方平台的开门钥匙,有这个code之后,我们就可以获取用户的access_token,UID等内容,就相当于整个接入过程打通了,
11、调用新浪微博的开放API
这里就需要研读这些API了,从而满足接入要实现的需求了,首先要熟悉的就是OAuth 2.0授权接口,http://open.weibo.com上都可以查,如下:
12、通过一个Servlet程序调用开放API获取新浪微博的UID、微博名称示例
response.setContentType("text/html;charset=UTF-8"); String accessToken = null ; String uid = null ; String screenName = null ; String username = null ; AccessToken accessTokenObj = null ; Oauth oauth2 = new Oauth(); try { out = response.getWriter(); accessTokenObj = oauth2.getAccessTokenByCode(code) ; logger.info(accessTokenObj); accessToken = accessTokenObj.getAccessToken() ; oauth2.setToken(accessToken) ; Account account = new Account() ; account.client.setToken(accessToken) ; JSONObject uidJson = account.getUid() ; uid = uidJson.getString("uid") ; Users users = new Users() ; users.client.setToken(accessToken) ; User weiboUser = users.showUserById(uid) ; username = weiboUser.getName() ; screenName = weiboUser.getScreenName() ; } catch (WeiboException | IOException | JSONException e) { e.printStackTrace(); } out.println("微博访问Token_Info:" + accessTokenObj + "\t"); out.println("微博访问Token:" + accessToken + "\t"); out.println("微博用户-Uid:" + uid + "\t"); out.println("微博用户-名称:" + screenName + "\t"); out.flush(); out.close();*/
利用JS_SDK实现QQ第三方登录
准备工作
在正式接入之前你需要了解以下名词的含义:
1. appid :应用的唯一标识。在OAuth2.0认证过程中,appid的值即为oauth_consumer_key的值。
2. appkey:appid对应的**,访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中,appkey的值即为oauth_consumer_secret的值。
3. redirecturl:成功授权后的回调地址,必须是注册appid时填写的主域名下的地址,建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。
4. access token:用来判断用户在本网站上的登录状态,具有3个月有效期,用户再次登录时自动刷新。
5. openid:是此网站上唯一对应用户身份的标识,网站可将此ID进行存储便于用户下次登录时辨识其身份,或将其与用户在网站上的原有帐号进行绑定。
要接入QQ登录,必不可少的是appid和appkey,通过申请接入QQ登录,按照相应步骤操作即可轻松获得,在此不做赘述。
在需要放置QQ登录按钮的页面加入下面SCRIPT代码:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
PS:APPID 和 REDIRECTURI 换成第一步申请所得到的对应内容,REDIRECTURI 就是登录之后返回的回调地址,在申请页面自己填写,一般写网站主域名即可。注意:回调地址必须以http或https开头。
在页面放置一个元素节点用来展现登录按钮,并且指定其ID,如:
<div id="qq"></div>
然后在页面加入如下SCRIPT:
<script type="text/javascript">
QC.Login({
btnId:"qq" //插入按钮的节点id
});
</script>
这时你就可以在页面看到如下效果:
如何你对这个展示效果不满意,也可以自定义登录按钮。
第四步
在 REDIRECTURI 即回调地址页面加入如下SCRIPT:
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
PS:官方说法如果回调地址页与加入QQ登录按钮是同一个页面,则只需要引用一次脚本文件。如果你理解不了这种官方说法,可以在第一步的脚本中加入data-callback="true"属性,而忽略第四步,前提是回调地址页与加入QQ登录按钮的页面是同一个页面。
因为JS SDK封装了获取Access Token以及OpenID的方法,因此开发者不需要用开发代码进行获取,直接调用QQ登录OpenAPI即可。
调用OpenAPI时,请统一遵循下述调用方式:
QC.api(api, paras, fmt, method)
参数说明:
最后
提供一种代码接入思路,仅供参考:
QC.api("get_user_info", {}) //get_user_info是API参数
//指定接口访问成功的接收函数,s为成功返回Response对象
.success(function (s) {
//成功回调,通过s.data获取OpenAPI的返回数据
nick = s.data.nickname; //获得昵称
headurl = s.data.figureurl_qq_1; //获得头像
if (QC.Login.check()) {//判断是否登录
QC.Login.getMe(function (openId, accessToken) { //这里可以得到openId和accessToken
//下面可以调用自己的保存方法
……
});
}
})
//指定接口访问失败的接收函数,f为失败返回Response对象
.error(function (f) {
//失败回调
alert("获取用户信息失败!");
});
////指定接口完成请求后的接收函数,c为完成请求返回Response对象
//.complete(function (c) {
// //完成请求回调
// alert("获取用户信息完成!");
//});
如果没有效果,刷新试一下,这是因为你在本地测试和你在申请时填的回调地址不匹配造成的,真正上线之后就没有问题了。