微信公众号第三方h5页面登录

在联调页面之前需要找到联调平台,所以需要自己先建立一个测试公众号方便之后的页面联调;

一、建立测试号
1.（有公众号后台账号），在微信公众平台(https://mp.weixin.qq.com/
)登录，进入“ 开发 ”---“ 开发者工具 ”---“ 公众平台测试账号 ”，随后按照页面指示建立自己的测试公众号；
（没有公众号后台账号），在微信公众平台登录页面进入服务号 “ 开发文档 ” --- “ 开始开发 ” --- “ 接口测试号申请 ” --- “ 进入微信公众帐号测试号申请系统 ”，随后按照页面指示建立自己的测试公众号；

2.手机扫描页面上的 “ 测试号二维码 ”并关注，这样就有自己的测试公众号，之后页面调试都是在这个测试号上进行调试；

3.（有公众号后台账号），还是在刚开发者工具页面进入“ 微信公众平台接口调试工具 ”；
没有账号可直接进入https://mp.weixin.qq.com/debug?token=724775402&lang=zh_CN；

4.将自己刚测试公众号页面上的appID和appsecret分别填入appid和secret，点击 “ 检查问题 ”之后成功了就会看到access_token，复制上之后，在 “ 接口类型 ”中选择 “ 自定义菜单 ” ，“ 接口列表 ”中呈现的是 “ 自定义菜单创建接口 /menu/create ” ,将刚复制的access_token粘贴在对应的access_token中，body中填入自定义的菜单（如下），点击 “ 检查问题 ”成功后即可在手机测试公众号上看到刚定义的按钮；

举例子：（按照自己的需求选择不同的type即可）
{
     "button":[
     {  
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜单",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
                 "type":"miniprogram",
                 "name":"wxa",
                 "url":"http://mp.weixin.qq.com",
                 "appid":"wx286b93c14bbf93aa",
                 "pagepath":"pages/lunar/index"
             },
            {
               "type":"click",
               "name":"赞一下我们",
               "key":"V1001_GOOD"
            }]
       }]
 }

5.需要注意的是，需要启动一个页面的服务，如果没有就自己本地把项目启动后，将项目前边的域名端口号复制粘贴在如下位置确认，然后在JS接口安全域名处也同理；

image.png

6.接口配置信息模块中，URL是项目前路径域名（同上），Token随意定义；
以上就建立好一个完整的测试号功能了；

二、调试登录
1.首先声明的是登录必须后台配合，前端无法独自完成，重点！！！
官方文档上写的非常清晰，但是让我头疼的是他没有写清楚哪块是后台配合哪块是前端完成，所以对刚接触的小白来说真是难受的很；
（开发文档--- “ 微信网页开发 ” --- “ 网页授权 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html” ）
1）首先前端需要做的是新建一个页面，本文前端以vue为例；
2）建好页面后根据文档中提示将对应参数写入
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
中，redirect_uri后接的就是1）中页面的完整路径，注意页面路径应当使用https链接来确保授权code的安全性；scope有两个参数分别是：
“ snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）”，
“ snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）”
将上面路径完整好后，最关键的一步到了，在一中提到的自定义菜单中，定了按钮，那就将本次完整好的路径作为一个跳转路径放入自定义的JSON中，写法如下：

{
     "button":[
     {
          "type":"view",
          "name":"go go go!",
          "url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" "&redirect_uri=" "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
      }
    ]
 }

菜单创建之后，点击 “go go go!”按钮，会自动跳转到刚定义的页面；
3）在跳转到的这个vue页面首先需要做的逻辑是获取code，微信跳转过来后会在路径中自动带有code=""的参数，前端需要的做的是拿到这个code并传给后台小哥，此时后台小哥需要提供一个接口得到code,通过微信提供的https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 接口去得到access_token ,

之后用 https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN来获取用户信息，之后就是后台来做登录的逻辑，如果这个人没登录过，后台就返回没登录的逻辑，前端跳到 “ 登录 ” 页面进行登录，若该用户已登录，后台返回用户信息，前端跳到应跳的页面就可以了；

以上就是微信公众号第三方h5页面完成的登录逻辑介绍；

三、测试号与正式服务号的对照
最后来说说测试号与正式服务号的对照。
1）在“设置”---“公众号设置”中，选择 “功能设置” ，将里面的 “JS接口安全域名” 和 “ 网页授权域名 ”改成生产服务的域名即可
2）在“功能”---“自定义菜单”中，将页面访问的路径（二中提到的长路径）放入其中即可，
注意如果你项目已经布到了一个生产环境，那以上提到的域名以及页面路径都是生产环境的，不再是自己本地启动的服务或者测试服务。