网页qq抓取什么原理( 微信H5网页需要获取用户的基本信息(图))

　　网页qq抓取什么原理(

微信H5网页需要获取用户的基本信息(图))

　　从微信H5网页获取用户基本信息

　　在微信访问一些HTML5网页时，我们经常会看到是否允许访问用户公开信息的提示。如果用户点击“允许”，网页可以获得用户的头像、昵称等信息。

　　

　　如果复制网址，在非微信环境打开，会看到提示“请在微信客户端打开连接”。

　　

　　一直很好奇这是怎么实现的，是微信提供的功能还是开发者自己实现的？从页面显示效果来看，应该是微信提供的功能。如果是微信提供的功能，如何实现这样的效果？正好我们有个H5网页需要获取用户昵称信息，研究了微信的相关文档，整理了这篇文章。

　　先决条件

　　首先，获取用户昵称属于微信H5开发中的“高级功能”。所谓“高级功能”就是微信收费的内容。开发者必须通过公众号认证后方可使用。所以如果你想玩这篇文章，先把300大洋转到微信。不是崩溃吗？没办法，微信这么厉害。认证成功后，可以调用相关接口获取用户的基本信息。相关文档可直接访问

　　页面授权

　　在上一篇文章中，我们看到了一个微信授权提示页面。这个页面其实是微信自动弹出的。用户点击“允许”后，应用程序可以获得用户的基本信息。那么问题来了，如何让微信弹出这个授权提示页面呢？其实很简单，在微信上访问一个特定的网站就行了。如以下代码所示：

　　 const redirectToAuthPage = () => {

const callbackURL = encodeURIComponent(`https://pk.xxx.cn/pk/wechat/getUserInfoCallback`)

const state = encodeURIComponent('/pk/page/teachersday/index.html')

const wechatId = 'wx116c7ab3d519b006'

const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`

window.location.href = redirectURI

}

　　URL中主要有几个参数：也就是说，只要我们访问诸如:///pk/wechat/getUserInfoCallback&response_type=code&scope=snsapi_userinfo&state=/abc这样的地址，微信就会自动弹出授权提示。如果在微信客户端内没有访问，会提示“请在微信客户端打开连接”。

　　appid 开发者ID，公众号唯一标识。您可以在微信公众号左侧的“基本配置”菜单中通过redirect_uri查看授权后重定向的回调链接地址。官方要求是使用urlEncode对状态重定向后的链接进行处理。带状态参数，最多128字节

　　前两个参数必须填写，最后一个可以忽略。但是状态在开发的时候会很有用，可以传入一些辅助信息。比如在我们的页面中，授权成功后，我们会使用状态来让后台页面跳转。

　　回到上面的URL地址，当用户在微信中访问时，首先会弹出一个授权提示。如果用户点击“允许”，页面将自动重定向到它。

　　注意这里的代码，用于在微信中获取access_token，通过access_token调用其他API可以获取用户的基本信息。

　　access_token 的交换代码

　　拿到code后，可以兑换access_token的code，如下图：

　　curl https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx116c7ab3d519b006&secret=SECRET_CODE&code=xxxxxx&grant_type=authorization_code

　　Secret 是开发人员的密钥。第一次创建密钥时，微信会提示我们保存。

　　返回以下结果：

　　{

　　"Access_token":"13_wNUT-XFU2d4TYuBRt98",

　　"Expires_in":7200,

　　"Refresh_token":"13__46yGQMYzwe2",

　　"Openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",

　　"范围":"snsapi_userinfo"

　　}

　　通过access_token获取用户基本信息

　　获取access_token后，就可以获取用户的基本信息，如下图：

　　https://api.weixin.qq.com/sns/userinfo?access_token=13_wNUT-XFU2d4TYuBRt98&openid=og7kR1WU05l0hUYpGtQAZNHYJSzE&lang=zh_CN

　　返回以下结果：

　　{

　　"Openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",

　　"昵称":"石头",

　　“性别”：1，

　　"语言":"zh_CN",

　　"城市":"成都",

　　"省":"四川",

　　"国家":"中国",

　　"headimgurl": "",

　　“特权”：[]

　　}

　　跳转到H5页面

　　后台获取用户昵称后，可以通过读取redirect_uri中的state参数跳转到前端H5页面。比如跳转到Stone，前端页面可以很方便的获取到用户的昵称信息。

　　注意公众号必须经过认证，否则无法获取用户基本信息。公众号需要到“安全中心”设置白名单，比如后台服务器的外部IP地址，否则将无法访问微信界面。公众号需要设置JS接口安全域名和回调域名。

　　以上配置都OK后，就可以正常调用微信JS SDK，获取用户公开的基本信息了。

　　对于后台开发的同学来说，code兑换的access_token是有时间限制的，2小时左右就会过期。需要使用接口返回的refresh_token来获取新的access_token。refresh_token 的有效期为 30 天。如下：

　　curl https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=wx116c7ab3d519b006&grant_type=refresh_token&refresh_token=13__46yGQMYzwe2

　　返回以下数据：

　　{

　　"Access_token":"ACCESS_TOKEN",

　　"Expires_in":7200,

　　"Refresh_token":"REFRESH_TOKEN",

　　"Openid":"og7kR1WU05l0hUYpGtQAZNHYJSzE",

　　“范围”：””

　　}

　　同时，微信还提供了API接口来验证access_token是否有效。

　　curl https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=og7kR1WU05l0hUYpGtQAZNHYJSzE

　　如果access_token有效，则返回如下数据，否则提示错误信息：

　　{

　　"错误代码":0,

　　"Errmsg": "好的"

　　}

　　如果数据不合法，将返回其他信息：

　　{

　　"错误代码":40013,

　　"Errmsg":"无效的 appid"

　　}

　　总结

　　本篇短文主要介绍如何通过微信HTML5网页中的授权提示获取用户的基本信息。此功能需要微信公众号认证才能使用。同时需要配置相应的白名单IP和回调域名。希望对大家的发展有所帮助。