微信公众号H5页面获取微信授权

api接入师
4,565 阅读3分钟

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。以上是微信官方文档的介绍，公司最近的一个h5项目需要嵌入微信公众号，所以去了解了下这方面知识。

这里需要介绍两个id

OpenID

每个公众号针对关注自身的用户都会产生一个安全的openid，公众号会将此id保存，用于甄别用户或在第三方网页中将自身与用户进行绑定。

UnionId

如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的，开发者需要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来满足上述需求。

操作步骤可略过，官方文档更详细哦！

操作步骤：

用户授权，获取code

首先，我们引导用户同意授权，获取相应的code。

这里的授权有两种授权方式，分别是静默授权，用户手动授权。

静默授权

不需要用户同意，进入页面后自动跳转我们设置的回调页面，用户感知中就是直接进入了回调页面。

用户手动授权

进入页面后弹出获取用户授权操作，用户同意后，就可以获取用户基本信息，无需用户关注公众号。

特殊场景

如果已经关注了公众号，用户从会话或者自定义菜单进入公众号即便设置为用户手动授权，也会自动选择静默授权方式，用户无感知。

微信提供了一串链接来完成授权操作并将网页重定向到我们的页面。

"https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=" 
    + encodeURIComponent(REDIRECT_URI) +
 "&response_type=code&scope=SCOPE&state=STATE#wechat_redirect";

这串url中有几个参数需要注意。

APPID：微信公众号唯一标识，直接从微信后台获取

REDIRECT_URI： 完成授权后跳转的页面地址，通过urlEncode 进行处理

SCOPE：有两种参数，分别是snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

STATE：重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节

授权完成后，页面会跳转至REDIRECT_URI/?code=CODE&state=STATE。

通过code获取access_token

这一步通常是后端从前端拿取code调用微信提供的链接

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

正确是会返回JSON数据

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

一般根据业务需求可能会将openid传给前端保存。

刷新access_token

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。请求以下链接

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

拉取用户信息

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

请求方式

http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

业务代码

通过上述操作步骤，可以大致了解到获取微信授权的大致流程，所以接下来要将它加入我们的业务代码中，话不多说上代码（vue项目）。

created() {
  let code = this.getUrlParam("code");
  !code ? this.getWXCode() : this.saveOpenId(code);
},
methods: {
    //截取当前页面中code值
    getUrlParam(name) {
        console.log(window.location.href)
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    },
    //将当前页面更改为获取code的链接并配置回调地址
    getWXCode() {
      var url =
           "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=" +
           encodeURIComponent(
             "REDIRECT_URI"
           ) +
           "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
         window.location.href = url;
     },
     saveOpenId(code) {
       getOpenidByCode({code})//axios请求将code传给后端
         .then(res => {
               localStorage.setItem('openid', res.data )
           })
           .catch(err => {
               console.log(err)
           })
     },
}

这样我们就将openid存起来了供后续操作，并且后端也可以根据access_token和openid获取用户信息了。

avatar
文章
阅读
粉丝