h5公众号登录手把手教学

最新推荐文章于 2024-05-31 12:08:06 发布

快乐的小小鸟

最新推荐文章于 2024-05-31 12:08:06 发布

阅读量3.4k

点赞数 3

分类专栏：微信公众号h5登录文章标签：微信

本文链接：https://blog.csdn.net/weixin_45623109/article/details/121957394

版权

h5公众号授权登录(测试号)

第一、这个是官方文档地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

在这里插入图片描述
第二、我们要准备两个参数 appId认证id和appsecret 秘钥
第三、微信测试号地址：
https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo? action=showinfo&t=sandbox/index
第四、登录上去就有appid 和appsecret ,登录上去页面是这样的

五、需要用到域名，推荐用花生壳内网穿透 (本人就是用utools里面下载插件)
在这里插入图片描述
第六、有了内网穿透就差不多可以编写代码了，没内网穿透是做不了的
第七、回到测试号的那个界面，就可以把生成的域名配置上去了

第八、下拉的时候看见测试号二维码嘛？那个用微信扫码一下，不然后续写完代码会有问题，应该提示：没有关注这个公众号。所有提前扫码一下
在这里插入图片描述

第九、我们参数也有了就可以编写代码了
1、需要两个 html ，当页面跳转。之后就会默认携带code，把code作为参数请求接口。拿到code用ajax请求访问controller层
2、一个controller，service 就差不多可以了
在这里插入图片描述
第十、html用于第一个跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <div>跳转</div>
<body>
    <script>
        var redirect_uri = encodeURI('http://127.0.0.1:8081/login.html');
          window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6e17309dbc3bc671&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"

    </script>
</body>
</html>

第十一、跳到这个页面就初始化直接请求controller。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script>
        //获取url栏上面的?code=xxx
        let search = location.search.slice(1);
        let arr = search.split("&");
        let result = {};
        arr.forEach(function(item){
            let itemArr = item.split('=');
            result[itemArr[0]]=itemArr[1];
        })
        code = result.code;
        //请求controller
        $.ajax({
            url: 'http://45q484749l.zicp.vip/study/wx/login',
            type:'post',
            dataType: 'json',
            data: {