微信客户端H5网页获取用户授权信息详解

2023-09-09 08:08:25

微信客户端H5网页获取用户授权信息

在社交媒体时代，公众号已成为企业与用户互动和提供服务的有效平台。为了进一步提升用户体验，微信提供了H5网页授权机制，使公众号能够在H5网页中获取用户的授权信息，从而实现更丰富的功能和服务。本文将详细介绍微信客户端H5网页获取用户授权信息的步骤、注意事项和常见问题解答。

获取网页授权access_token

要获取网页授权access_token，需要通过OAuth2.0授权流程向微信服务器发送请求。具体步骤如下：

准备授权参数

appid: 公众号的AppId
redirect_uri: 授权后重定向的回调链接地址
scope: 应用授权作用域，snsapi_userinfo代表请求用户授权
state: 用于保持请求和回调的状态，授权请求后原样带回给第三方

拼接授权URL

将准备好的授权参数拼接成授权URL，格式如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

在微信客户端中打开授权URL

将授权URL在微信客户端中打开，用户同意授权后，微信会将授权码（code）通过重定向URL带回。

拉取用户信息

获取网页授权access_token后，可以使用access_token拉取用户的详细信息。具体步骤如下：

拼接拉取用户信息URL

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

向微信服务器发送请求

将准备好的拉取用户信息URL发送给微信服务器，即可获取用户的详细信息。

代码示例

// 第一步：获取网页授权access_token
const code = window.location.search.slice(6);
const appid = 'wx123456789';
const redirect_uri = 'http%3A%2F%2Fexample.com%2Fcallback';
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = url;

// 第二步：拉取用户信息
const accessToken = 'ACCESS_TOKEN';
const openid = 'OPENID';
const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}`;
fetch(url)
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

注意点

一定要在微信客户端中打开授权链接，否则会报错。
网页授权获取用户信息的有效期为2小时，超过2小时需要重新授权。
用户可以通过公众号设置取消授权，取消授权后，需要重新授权才能获取用户信息。

常见问题解答

为什么在微信客户端中打开授权链接会报错？

可能是由于以下原因：
- 微信版本过低，需要更新微信版本。
- 手机网络不稳定，导致重定向失败。
- 公众号未配置js接口安全域名。
如何解决“网页授权获取用户信息的有效期为2小时”的问题？

如果需要长时间获取用户信息，可以使用refresh_token刷新access_token。具体方法参考微信官方文档。
如何处理用户取消授权的情况？

如果用户取消授权，需要引导用户重新授权。可以在公众号设置中添加取消授权后的提示信息。
为什么拉取用户信息时返回“invalid code”错误？

可能是由于以下原因：
- code已过期或无效。
- code不属于当前appid。
为什么拉取用户信息时返回“invalid access_token”错误？

可能是由于以下原因：
- access_token已过期或无效。
- access_token不属于当前appid。