微信网页授权真实项目实例

微信网页授权获取用户OpenID

📌微信网页授权的前提

• 通过微信认证的微信号或者申请微信测试号
  🚀传送门：测试号申请
• 必须要有自己的服务器以便和微信后台交互
• 公众平台接口调用仅支持80端口。(网页授权获取OpenID实测无此限制)

💥网页授权域名配置

-操作步骤 ：

• 点击保存如果微信后台没有报错说明域名配置成功

💥前端获取Code

前端拉起微信OAuth2.0授权

直接看图：

• 关键字段说明

字段	来源	注释
appid	微信公众后台	微信公众号唯一标示
redirect_uri	开发者	希望用户在授权之后跳转进入的页面，需要进行encode编码
response_type		直接写code
scope		snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state	开发者	其它网页需要但微信无法提供的参数，由开发者自行设置

解析code

以微信官方的授权地址为例：
微信授权（请在微信环境打开）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

        当用户点击以上链接之后，一旦用户同意授权用户将跳转到redirect_uri指向的地址，即http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php（url经过 urlEncode 编码）这是前端路径会携带code参数，如果设置了state参数同时还会携带state参数。
        用户跳转的地址：http://nba.bluewebgame.com/oauth_response.php？code=Code&state= State
        此时前端只需要将code参数从页面地址中解析出来并传给后端即可。

code 注意事项

• 同一code只能使用一次，使用后随即无效
• 同一code只有5分钟时间，超时需要重新获取。（即需要用户再次点击授权链接）

💥后端根据code获取用户OpenID

通过code换取网页授权

        获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

• 请求参数说明
  
• 返回参数说明：

至此，已经获取到微信用户的OpenID了，若需要获取用户昵称和头像等信息继续往下请求

根据access_tokena获取用户信息

        如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。请求方法http：GET（请使用https协议）
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

• 请求参数说明
  
• 返回参数说明
  至此获取用户OpenID和基本信息流程结束

access_token注意事项

• 获取的token2小时之内有效，过期需要重新获取
• 微信限制了获取token的频次，不允许频繁获取，因此开发者最好将token在后台缓存起来，待token快过期时再更新token。

💥详情以及错误信息请查验微信开发者文档–>微信网页开发

🚀传送门：微信开发者文档

📧 通过微信公众号发送模板消息

相信绝大多数应用获取微信用户的openid都是为了通过微信公众号向用户发送模板消息。
发送模板消息需要注意以下几点：

• 需要目标用户已经关注了当前公众号
• 后台推送模板消息需要在微信公众号后台配置ip 白名单，主要是获取token 是需要白名单校验

开启IP白名单的步骤如下：
1、登录公众平台，进入开发->基本配置页面

发送模板消息

• url : https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN
• method : post
• post参数见下方代码：

      {
           "touser":"OPENID",     //接收消息用户的openid
           "template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY",  //模板消息id
           "url":"http://weixin.qq.com/download",   //消息外链
           "miniprogram":{                                      //设置跳转小程序
             "appid":"xiaochengxuappid12345",      //小程序appid
             "pagepath":"index?foo=bar"                  //跳转小程序的页面地址
           },          
           "data":{                                                   //发送消息字段，需要和模板消息字段对应
                   "first": {
                       "value":"恭喜你购买成功！",
                       "color":"#173177"
                   },
                   "keyword1":{
                       "value":"巧克力",
                       "color":"#173177"
                   },
                   "keyword2": {
                       "value":"39.8元",
                       "color":"#173177"
                   },
                   "keyword3": {
                       "value":"2014年9月22日",
                       "color":"#173177"
                   },
                   "remark":{
                       "value":"欢迎再次购买！",
                       "color":"#173177"
                   }
           }
       }

• 备注：
• 1.若要实现小程序跳转，需要在微信公众平台将小程序和微信公众号进行绑定，否则无法跳转。
• 2.目标小程序必须是已经正式上线，不能是开发版或者是体验版。

微信公众号与小程序进行绑定

进入微信公众号后台，点击小程序管理

点击添加

点击关联小程序

管理员扫码验证，输入小程序APPID搜索到目标小程序，点击绑定。