微信公众号利用测试号实现本地调试微信登录授权

实现思路:微信小程序可以通过内置uni.login获取到code,但是微信公众号h5想要微信授权登录,首先需要跳转到https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=snsapi_userinfo#wechat_redirect去授权,同意授权之后,会自动跳转到redirect_uri指向的地址,并在查询字符串中携带回了code,拿到code之后再进行登录等一系列操作

注意事项

  1. 路径上redirect_uri设置的域名必须与公众号后台(设置与开发->公众号设置->功能设置->网页授权域名)配置的域名一致,否则会报redirect_uri参数错误
  2. 按照①描述的情况,就会有一个问题,我们在本地都是通过localhost或者本地ip去访问的前端项目,redirect_uri一般配置的就是当前路径window.location.href,所以redirect_uri实际会传入localhost或本地ip开头的地址,这就会导致与公众号后台配置的域名不一致报错,那就只能部署到服务器再测试登录这块,会很麻烦

解决方案:可以利用公众号提供的测试号,配置自己本地内网穿透的域名实现

  1. 首先将自己的本地穿透一个域名,我使用的是贝锐花生壳,内网主机配置自己本地ip,内网端口配置h5项目运行之后所占用的端口
    在这里插入图片描述

  2. 点击进入测试号,扫码登录之后,可以拿到测试号的appID和appsecret,将下面路径中的appid配置为测试号的appID,注意后端服务器的appId和appsecret也要配置成测试号的

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=snsapi_userinfo#wechat_redirect

    在这里插入图片描述

  3. 配置JS接口安全域名,域名就是配置第①步内网穿透的域名,前面不要带https,只填域名即可
    在这里插入图片描述

  4. 扫描测试号二维码,关注公众号
    在这里插入图片描述

  5. 在体验接口权限表中找到网页服务->网页账号,配置授权回调页面域名,格式也是不带https,只写域名即可
    在这里插入图片描述

  6. 打开微信开发者工具->公众号网页项目,地址栏中输入穿透的域名
    在这里插入图片描述

  7. 如果页面显示invalid host header,需要在manifest.json中设置禁用 Host 检查,配置完一定要重启项目,不然会报错!!

     "h5" : {"devServer": {"disableHostCheck": true}
    }
    
  8. 现在再访问穿透域名就能正常打开项目了,然后点击登录授权按钮,跳转到授权页面,同意授权之后页面再跳转回来,能看到code在查询字符串中携带过来了
    https://xxxxxx/?code=001VhQ000OoOgR1W1p0005P75m1VhQ0a&state=123&code=031PQbll2K1IBc4aBQll2Jv9xm2PQblp#/pages/login/login

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/292387.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch 性能调优基础知识

Elastic Stack 已成为监控任何环境或应用程序的实际解决方案。 从日志、指标和正常运行时间到性能监控甚至安全,Elastic Stack 已成为满足几乎所有监控需求的一体化解决方案。 Elasticsearch 通过提供强大的分析引擎来处理任何类型的数据,成为这方面的基…

50万元+奖金池!英特尔人工智能创新应用大赛正式开赛

毋庸置疑,AI已成为推动全球科技进步的重要动力。AI的快速发展不仅重塑人们对机器智能的认识,也在改变商业、工业和日常生活的方方面面。 作为全球半导体行业的领导者,英特尔以其先进的处理器技术和深度学习框架推动AI的发展,同时…

playbook控制语句

本章主要介绍 playbook中的控制语句。 目录 判断语句when &#xff08;1&#xff09;when判断中>、<、!的使用 &#xff08;2&#xff09;when判断中in的用法 &#xff08;3&#xff09;when判断中is的用法 判断语句block-rescue 循环语句 一个play中可以包含…

如何把透明OLED显示屏介绍给用户人群

透明OLED显示屏是一种新型的显示技术&#xff0c;它具有透明度高、色彩鲜艳、对比度高、响应速度快等优点。下面是一些介绍透明OLED显示屏的要点&#xff1a; 透明度&#xff1a;透明OLED显示屏的最大特点是其透明度&#xff0c;它可以让光线透过显示屏&#xff0c;使得屏幕背后…

源码订货系统的优势

源码订货系统是一种企业购买后可以获得源代码的订货系统&#xff0c;它可以不受软件厂商的规模、发展而修改和使用。与SaaS订货系统相比&#xff0c;核货宝为您分享源码订货系统的四大优势&#xff1a; 一是开放性&#xff1a;源码订货系统是开源的&#xff0c;用户可以掌握源代…

用23种设计模式打造一个cocos creator的游戏框架----(二十三)中介者模式

1、模式标准 模式名称&#xff1a;中介者模式 模式分类&#xff1a;行为型 模式意图&#xff1a;用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地相互引用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互。 结构图&#xff…

众和策略股市行情分析:股市里什么叫外资?外资股是什么?

股市里什么叫外资&#xff1f; 外资就是指的国外本钱&#xff0c;即国外出资者参与到我国股市所投入的本钱。通常情况下&#xff0c;外资主要靠直接或直接持有我国股市的股票来达成注入本钱的意图。比较于内资&#xff0c;外资更多的注重于我国商场的整体情况&#xff0c;采用…

算法模板之栈图文详解

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;算法模板、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. ⛳️模拟栈1.1 &#x1f514;用数组模拟实现栈1.1.1 &#x1f47b;栈的定义1.1.…

华为端口隔离简单使用方法同vlan下控制个别电脑不给互通

必须得用access接口&#xff0c;hybrid口不行 dhcp enable interface Vlanif1 ip address 192.168.1.1 255.255.255.0 dhcp select interface interface MEth0/0/1 interface GigabitEthernet0/0/1 port link-type access port-isolate enable group 1 interface GigabitEther…

研究生课程 |《数值分析》复习

搭配往年真题册食用最佳。

推荐算法架构7:特征工程

1 概述 特征工程[1]&#xff08;Feature Engineering&#xff09;是推荐算法的基础&#xff0c;它对收集到的原始数据进行解析和变换&#xff0c;从而提取出模型所需要的信息。通过挖掘丰富和高质量的特征&#xff0c;并对其进行合理的处理&#xff0c;可以提升模型预估准确度…

MFC静态链接+libtiff静态链接提示LNK2005和LNK4098

编译报错 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "private: __thiscall type_info::type_info(class type_info const &)" (??0type_infoAAEABV0Z) 已经在 libcmtd.lib(typinfo.obj) 中定义 1>msvcrt.lib(ti_inst.obj) : error LNK2005: "pr…