获取新浪微博用户头像

发表于 | 分类于 | | 阅读次数:

在之前的在微信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
2
3
WB2.login(() => {
    // 已经登入
})

退出接口

只需要调用WB2.logout即可，例如：

1
2
3
WB2.logout(() => {
    // 已经退出
})

检测是否登入接口

只需要调用WB2.checkLogin()即可，例如

1
const loginStatus = WB2.checkLogin()



查询信息接口

此步主要用于调用微博的OAuth API，需要先调用WB2.anyWhere，然后在其回调里面调用parseCMD接口。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
WB2.anyWhere(W => {
    // 获取用户的uid
    const url = '/account/get_uid.json'
    const params = {}
    const options = {
        method: 'get',
        cache: 60
    }
    W.parseCMD(url, (sResult, bStatus) =>{
        // bStauts用于标识是否正常返回结果
        if(bStatus) {
            // 输出结果：{uid: 1093567195}
            console.log(sResult)
        }
    }, params, options)
})

上面的代码主要用于获取用户的uid，比如我们拿到了uid为1093567195的用户，现在我们查询该用户的基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
WB2.anyWhere(W => {
    // 查询用户的基本信息
    const url = '/users/show.json'
    const params = {uid: '1093567195'}
    const options = {
        method: 'get',
        cache: 60
    }
    W.parseCMD(url, (sResult, bStatus) =>{
        // bStauts用于标识是否正常返回结果
        if(bStatus) {
            // 输出结果：{93567195, idstr: "1093567195", class: 1, screen_name: "flyingzl", name: "flyingzl", …}
            console.log(sResult)
        }
    }, params, options)
})

/users/show.json这个接口主要用于查询用户的基本信息，具体可以参考https://open.weibo.com/wiki/2/users/show接口。里面有一个avatar_large字段，可以获取到用户的高清头像。

获取用户头像

每次调用WB2.anyWhere和W.parseCMD比较麻烦，我们简单封装下，然后代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

((WB2) => {

    const parseCMD = (url, params = {}) => {
        return new Promise((resolve, reject) => {
            WB2.anyWhere(function (W) {
                W.parseCMD(url, function (sResult, bStatus) {
                    try {
                        bStatus ? resolve(sResult) : reject(sResult)
                    } catch (e) { }
                }, params, {
                    method: 'get',
                    cache: 60
                })
            })
        })
    }

    const isLoginPromise = new Promise(resolve => {
        const status = WB2.checkLogin()
        status ? resolve() : WB2.login(resolve)
    })

    isLoginPromise.then(() => {
        const queryUIDPromise = parseCMD('/account/get_uid.json').then(res => res.uid)
        const queryAvatarPromise = queryUIDPromise.then(uid => {
            return parseCMD('/users/show.json', { uid }).then(o => o.avatar_large)
        })
        queryAvatarPromise.then(url => {
            // url 为用户的头像
            var image = new Image()
            image.src = url
            document.body.appendChild(image)
        })
    })
})(window.WB2)

效果