在之前的在微信H5网页中获取用户基本信息一文中, 我们提到了如何在微信中获取用户信息,这一篇小文主要分析如何在新浪微博中获取用户信息,尤其是个人头像。
前期准备
和微信类似,微博也提供了JSSDK方便开发者使用。要想使用新浪微博的JSSDK,需要先注册一个微连接应用,创建好后,输入应用的安全域名地址就可以使用了。在使用JSSDK时, 微博会校验SDK是否在特定的安全域名下运行,否则会拒绝返回执行结果。
引入JSSDK
根据官方文档, 需要在页面的HTML标签中增加XML命名空间
,如下代码所示:
1 | <html xmlns:wb="http://open.weibo.com/wb"> |
如果不使用微博组件,只是单纯的使用JSSDK,可以不用增加XML命名空间
同时引入对应的JSSDK
1 | <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=523439410" type="text/javascript" charset="utf-8"></script> |
将523439410
改为创建应用的appKey即可。
使用JSSDK
JSSDK的使用可以参考官方的JSSDK API文档, 接口都比较简单,主要调用新浪微博OAuth API。为了方便调试,新浪微博还提供了一个在线调试工具,大家感兴趣也可以试试。具体来说,主要提供了下面的几个接口,我们一一简单说明下。
登入接口
只需要调用WB2.login
即可,例如:
1 | WB2.login(() => { |
退出接口
只需要调用WB2.logout
即可,例如:
1 | WB2.logout(() => { |
检测是否登入接口
只需要调用WB2.checkLogin()
即可,例如
1 | const loginStatus = WB2.checkLogin() |
查询信息接口
此步主要用于调用微博的OAuth API,需要先调用WB2.anyWhere
,然后在其回调里面调用parseCMD
接口。例如:
1 | WB2.anyWhere(W => { |
上面的代码主要用于获取用户的uid,比如我们拿到了uid为1093567195
的用户,现在我们查询该用户的基本信息
1 | WB2.anyWhere(W => { |
/users/show.json
这个接口主要用于查询用户的基本信息,具体可以参考https://open.weibo.com/wiki/2/users/show接口。里面有一个avatar_large
字段,可以获取到用户的高清头像。
获取用户头像
每次调用WB2.anyWhere
和W.parseCMD
比较麻烦,我们简单封装下,然后代码如下:
1 |
|