本地调试获取微信code网页授权,免部署(前端+开发者工具)

前言

之前做微信code获取的调试都是部署到服务器上比较麻烦。这次总结了一下前端怎么在本地就能获取微信code。本项目是在mac上用react开发,所以教程内容偏向这俩。内容仅供参考,有更好的办法可以留言,互相学习一下~

准备工作

  1. 有资质的公众号。并加入你为开发者。
  2. 备案的域名。
  3. 微信开发者工具。
  4. 查看微信文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

教程

以上工作准备全,前端就需要实现

在这里插入图片描述
其中我们要解决的就是本地项目启动地址改为https+域名,才能调试redirect_uri重定向。

如何将本地项目启动的ip改为域名

修改hosts

找到电脑hosts路径 打开后将127.0.0.1改为 127.0.0.1 域名。

mac系统推荐一个小软件配置hosts很方便 【SwitchHosts】

	//路径
	win C:\Windows\System32\drivers\etc\hosts
	mac  usr/etc/hosts

在这里插入图片描述

修改项目配置

在webpack中加入刚配好的域名, 找到node_modules/webpack-dev-server/lib 的Server.js 找到如下处添加修改

 // always allow localhost host, for convience
  // if (hostname === 'localhost') return true;
  if(hostname === "127.0.0.1" || hostname === "localhost" || hostname === "域名") return true;
修改端口号

将本地项目启动的端口号改为443,这样不加端口号也能访问本地项目。
我是react 项目 ,找到scripts/start.js

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 443;

package.json

    "start": "set PORT=443  node scripts/start.js",
重启项目即可用域名访问本地项目。

如何将本地项目http改为https

https需要证书,所以我们通过在本地配置一个证书来实现https。

配置过程

macOS 使用 brew 安装 mkcert
安装 brew 命令

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"  //推荐1中科大
安装mkcert
brew install mkcert
brew install nss
windows 使用 scoop 安装 mkcert
scoop bucket add extras
scoop install mkcert
创建 CA 证书到本地

在终端中执行:

mkcert -install
生成证书( localhost 127.0.0.1 后面还可以空格添加其他域名或IP地址)
mkcert localhost 127.0.0.1 域名
找到证书 rootCA.pem
mkcert -CAROOT

将CA证书放到react项目中
在项目根目录下新建一个 .cert 文件夹,将 rootCA.pem 文件放入文件夹中
在项目根目录的终端中执行:

mkcert -key-file ./.cert/key.pem -cert-file ./.cert/rootCA.pem “localhost”

效果如下
在这里插入图片描述

修改react项目中的启动命令

在启动命令中添加:

HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem

最终代码如下

  "scripts": {
    "start": "set PORT=443 && HTTPS=true SSL_CRT_FILE=./.cert/rootCA.pem SSL_KEY_FILE=./.cert/key.pem node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

重启项目即可,效果如下。
在这里插入图片描述

到此为止,你已经可以无需部署服务器,在本地调用微信授权获取code后再重定向回到本地项目了。

获取到code后,我的项目还需调用微信支付,这块目前还的部署服务器在真机上测试。最近发现一个免部署的可以真机测试的内网穿透,研究好再发上来,大家一起讨论。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
首先,在获取微信公众号网页授权和用户信息之前,我们需要先了解微信公众号的几个概念: 1. AppID和AppSecret:AppID是每个公众号独有的身份标识,在开发者中心中可查看;而AppSecret则是用于获取access_token的密钥。 2. 授权作用域:微信网页授权分为静默授权和弹出授权,前者只能获取用户基本信息,后者可以获取用户详细信息。 3. 网页授权流程:用户同意授权后,微信后台会将授权code返回给开发者开发者可以使用该code获取access_token,并通过access_token获取用户信息。 接下来,我们就可以开始使用JSP获取微信公众号网页授权和用户信息了。 1. 获取授权链接 首先,我们需要构造出授权链接,以便用户点击授权。 String redirect_uri = URLEncoder.encode("http://your.domain.com/callback.jsp", "UTF-8"); String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"; 其中,redirect_uri是授权后重定向的回调链接地址,需要进行URLEncode编码;scope=snsapi_userinfo表示需要用户授权获取详细信息。 2. 获取授权code 当用户点击授权后,需要在回调页面(上面代码中的callback.jsp)中获取授权code。 String code = request.getParameter("code"); 3. 获取access_token 利用上一步获取授权code,构造出获取access_token的链接,并向该链接发送HTTP GET请求,获取access_token。 String tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appId + "&secret=" + appSecret + "&code=" + code + "&grant_type=authorization_code"; URL url = new URL(tokenUrl); HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection(); urlConnection.connect(); InputStream inputStream = urlConnection.getInputStream(); BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream)); String line; StringBuffer stringBuffer = new StringBuffer(); while ((line = bufferedReader.readLine()) != null) { stringBuffer.append(line); } JSONObject json = new JSONObject(stringBuffer.toString()); String accessToken = json.getString("access_token"); String openid = json.getString("openid"); 4. 获取用户信息 利用获取到的access_token和openid,可以构造出获取用户信息的链接。 String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openid + "&lang=zh_CN"; URL url = new URL(userInfoUrl); HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection(); urlConnection.connect(); InputStream inputStream = urlConnection.getInputStream(); BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream)); String line; StringBuffer stringBuffer = new StringBuffer(); while ((line = bufferedReader.readLine()) != null) { stringBuffer.append(line); } JSONObject json = new JSONObject(stringBuffer.toString()); String nickname = json.getString("nickname"); String headimgurl = json.getString("headimgurl"); 以上就是使用JSP获取微信公众号网页授权和用户信息的流程。需要注意的是,获取用户信息需要用户同意授权获取详细信息,并且在构造链接时需要进行URL编码。另外,在实际开发过程中,建议将获取access_token和获取用户信息的代码封装为工具类,以便重复使用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值