如QQ互联,这里详细介绍如何实现微博登录。
成为开发者
首先还是得先注册一个微博账号,用微博账号来登录开放平台。
打开微博开放平台官网http://open.weibo.com/index.php,点击登录,完成开发者注册
完成开发者认证
按照流程走,开发者类型一般选择个人。
创建网站应用
一般来说,我们创建的是网站应用,其他应用是类似的,所以这里仅以网站应用为例。
完成认证后,选择首页的微链接菜单下的网站接入(或者首页下的网站接入WEB),按照要求填写资料。
需要准备的资料主要有:
1、完成备案的域名
2、开发好的网站
3、服务器
4、应用图标
特别注意:
填写完基本信息后,还需要填写高级信息,高级信息里面的授权回调页和取消授权回调页很重要、很重要、很重要(重要的事说三遍)。
授权回调页面为授权完成后回调的页面,该页面必须在应用地址域名下,同理,取消授权回调页为取消授权后回调的页面(一般跳转回登录页面)。
等待审核
审核时长一般为一个工作日,所以为了节约时间,资料一定要准确,避免多次修改。
页面开发
开发模式有两种,一种是用sdk,一种是自定义开发。sdk开发门槛低,不需要懂具体授权逻辑,简单粘贴代码即可,下面以登录按钮为例简要介绍(不推荐该方法,建议自定义开发)。
打开链接http://open.weibo.com/widget/loginbutton.php
配置登录按钮样式
选择应用
复制代码
1、在HTML标签中增加XML命名空间
2、在HEAD头中引入WB.JS
3、在需要部署登录按钮的位置粘贴WBML代码 (复制代码)
4、写回调方法
WB2.anyWhere(function(W){
W.widget.connectButton({
id: "wb_connect_btn",
type:"3,2",
callback : {
login:function(o){ //登录后的回调函数
},
logout:function(){ //退出后的回调函数
}
}
});
自定义开发(推荐)
我们是专业的,必须选择自定义开发(可跳过上面sdk的教程)。
完善网站应用信息后,开始使用接口,而在登录功能里面主要有以下几个接口:
1、OAuth2.0授权登录接口
2、获取token和uid接口
3、获取用户信息接口
第一步:登录页面添加链接
这里的应用主键是App Key,在开发平台的应用管理里面可以看到,回调地址是应用高级信息里面的授权回调页,两者必须一样。
第二步:开发授权回调页
因为回调页必须为外网,所以这个在开发是要经常部署新网站(更新部分即可),所以到这一步的时候后要有服务器的权限。
回调页里面有一个十分重要的参数,那就是地址栏上面的code参数,code参数在授权后自动带上,用来获取token,并且只能使用一次,再次使用会出错。
第三步:根据code换取token和uid
此时需要在后台以post形式请求access_token接口,地址为
https://api.weibo.com/oauth2/access_token?client_id=" + 应用主键+ "&client_secret=" + 应用密钥 + "&grant_type=authorization_code&redirect_uri=" + 回调地址 + "&code=" + 获取到的code
应用主键和应用密钥都可以在应用管理里面找到,因为很重要,所以必须后台请求(前台请求存在跨域和头信息不符合的问题),而回调地址和code通过前台传过来,下面是后台代码
第四步:获取用户信息(登录)
获取用户信息的前提是提供token和uid,所以我们调用第三步封装的方法private WBTokenState GetWeiBoToken(string code, string callback),此时需要请求的地址为"https://api.weibo.com/2/users/show.json?access_token=" + 换取的token+ "&uid=" + 换取的uid
此时代码如下
具体登录逻辑略...
第五步:前台调用
这时候后台已经写好了,前台开始去调用。
先判断回调地址的code参数是否为空,然后动态获取回调地址(写死后期要改很麻烦,测试时倒必须写死),再调用后台写好的登录接口(后台登录接口里面自动换取token、uid和获取用户信息),下面是具体代码
结束语
微博登录的意义在于接入微博海量用户,减低网站注册门槛,实现社交关系的零成本引入和优质内容的快速传播。
ps:
code只能用一次,再次使用会报错,并且要在后台调用,post方式。
授权机制(包括获取uid)
http://open.weibo.com/wiki/授权机制
获取uid
http://open.weibo.com/wiki/2/account/get_uid
获取用户信息
http://open.weibo.com/wiki/2/users/show
js sdk
http://open.weibo.com/wiki/Weibo-JS_V2#JS_widget.E8.AF.B4.E6.98.8E.E5.8F.8A.E7.A4.BA.E4.BE.8B