在小程序授权公众号，获取openId等信息（前端）

需求背景

• 在开发的小程序里，需要判断使用该小程序的用户是否有关注该小程序关联的公众号，如未关注要引导用户去关注公众号。

解决思路

使用小程序web-view组件进行微信公众号授权网页跳转

代码开发前的准备

1）登陆小程序管理平台-开发–开发设置-业务域名加上需要跳转的路径的域名

注意：1.是业务域名不是服务器域名；2.需要配置校验文件（当时叫公司运维帮忙加上）

2）登陆公众号管理平台-公众号设置–功能设置-网页授权域名加上和上面小程序业务域名一样的域名地址。

用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。

如果没有进行以上域名配置，自己开发测试可先在开发者工具，右上角的详情-本地设置勾选上不进行域名校验，就可以正常进行使用（要开发上线的话必须要配置好域名，不然无法正常使用）

3. 在小程序管理平台-设置-关注公众号-开启公众号关注组件（小程序需关联到需要跳转的公众号），这一步是为了使用关注公共号组件【official-accoun】

代码开发：

小程序端

使用web-view组件跳转微信公众号授权页面 webView使用官方文档

• 链接拼接参数：
  appid：需要授权的公众号appid
  redirect_uri：授权回调页面，即公众号成功授权后跳转的页面链接，用来接收参数code ；如果跳转出现问题，最好用encodeURIComponent() 对链接的参数进行编码转化，
  encodeURI(url）对跳转的url链接进行编码转化 （*该链接的域名要使用上面在小程序和公众号配置了的域名）

response_type：接收的参数
scope：应用授权作用域{1.静默授权snsapi_base ，不弹出授权页面，直接跳转；2.snsapi_userinfo ，弹出授权页面。}

state：重定向后带上的参数
#wechat_redirect：链接一定要带上

<view class="list-wrap">
	<web-view src="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri={{url}}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"></web-view>
</view>

H5页面

该页面是进行微信公众号授权后的回调页面，用来接收code参数，然后携带参数跳回到小程序页面（我使用的是vue开发的页面）

步骤：

1）引入JSSDK 1.3.2

• 可在index.html页面直接加script 引入

<!-- 引入weixin-js-sdk线上版本 -->
<script charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

• 用npm安装weixin-js-sdk

npm install weixin-js-sdk

在需要用到的页面引入：

import wx from 'weixin-js-sdk'

2）获取页面链接，截取code

使用decodeURIComponent() 对获取的参数进行解码
使用decodeURI() 对 url链接进行解码

3）使用JSSDK 1.3.2提供的接口返回小程序页面；

    wx.miniProgram.navigateTo({
      url: '/pages/index/index?code=' + this.code
    })

使用code获取openId

过程
调用接口： https://api.weixin.qq.com/sns/oauth2/access_token?appid=appid&secret=SECRET&code=${code}&grant_type=authorization_code

• 参数：
  appid：公众号appid
  SECRET：开发者密码(AppSecret)
  code:上面微信公众号授权获取的code
  

下面是我在小程序进行测试的代码，一般需要后端调用进行处理返回参数，前端接收参数，比较安全。（自己测试开发需要把开发这工具的校验权限关掉）

 wx.request({  
             url:`https://api.weixin.qq.com/sns/oauth2/access_tokenappid=appid&secret=SECRET&code=${code}&grant_type=authorization_code`, 
              header: {
                'content-type': 'application/json' 
              },
              success (res) {
                console.log(res.data)
              }
 })

回参：

获取用户是否关注公众号标识

步骤
1）调用接口，获取access_token。access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。（开发的时候通常都是后端去请求获取）
(注意：该access_token和上面微信授权页面获取的access_token不一样)
官方文档解释：

‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret’
参数：
appid：公众号appid
secret：开发者密码(AppSecret)
下面是我在小程序进行测试的代码，一般需要后端调用进行处理返回参数，前端接收参数，比较安全。

 wx.request({
              url:`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`, 
              header: {
                'content-type': 'application/json' 
              },
              success (res) {
                console.log(res.data)
              }
 })

回参：

2)获取公众号关注标识
调用接口：https://api.weixin.qq.com/cgi-bin/user/info?access_token=${access_token}&openid=${openid}&&lang=zh_CN

-参数：
access_token：上面获取的access_token
openid：通过code获取的openid

下面是我在小程序进行测试的代码，一般需要后端调用进行处理返回参数，前端接收参数，比较安全。

           wx.request({
              url:`https://api.weixin.qq.com/cgi-bin/user/info?access_token=${access_token}&openid=${openid}&&lang=zh_CN`, 
              header: {
                'content-type': 'application/json' 
              },
              success (res3) {
                console.log(res.data)
              }
            })

• 回参：
  
  subscribe ：用户是否订阅该公众号标识，值为0时，代表此用户没有关注该公众号，拉取不到其余信息。