微信公众号第三方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
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)在“功能”---“自定义菜单”中,将页面访问的路径(二中提到的长路径)放入其中即可,
注意如果你项目已经布到了一个生产环境,那以上提到的域名以及页面路径都是生产环境的,不再是自己本地启动的服务或者测试服务。

你可能感兴趣的:(微信公众号第三方h5页面登录)