本地调试获取微信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
    评论
当然,我可以为您提供一个简单的示例代码来演示如何使用Go编写一个服务端接入微信登录的程序。请注意,以下代码仅供参考,您需要根据自己的实际需求进行适当的修改和完善。 ```go package main import ( "encoding/json" "fmt" "io/ioutil" "log" "net/http" "net/url" ) const ( // 替换为您的微信应用的AppID和AppSecret AppID = "your_app_id" AppSecret = "your_app_secret" ) type AccessTokenResponse struct { AccessToken string `json:"access_token"` ExpiresIn int `json:"expires_in"` OpenID string `json:"openid"` } type UserInfoResponse struct { OpenID string `json:"openid"` Nickname string `json:"nickname"` HeadImgURL string `json:"headimgurl"` } func main() { http.HandleFunc("/wechat/login", wechatLoginHandler) log.Fatal(http.ListenAndServe(":8080", nil)) } func wechatLoginHandler(w http.ResponseWriter, r *http.Request) { code := r.FormValue("code") // 获取访问令牌 tokenResp, err := getAccessToken(code) if err != nil { log.Println("Failed to get access token:", err) http.Error(w, "Failed to get access token", http.StatusInternalServerError) return } // 获取用户信息 userInfoResp, err := getUserInfo(tokenResp.AccessToken, tokenResp.OpenID) if err != nil { log.Println("Failed to get user info:", err) http.Error(w, "Failed to get user info", http.StatusInternalServerError) return } // 在此处根据需要进行用户验证和登录处理 // ... // 返回登录状态给前端 w.Write([]byte("Login successful")) } func getAccessToken(code string) (*AccessTokenResponse, error) { // 构建获取访问令牌的URL tokenURL := fmt.Sprintf("https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code", AppID, AppSecret, code) // 发送HTTP请求获取访问令牌 resp, err := http.Get(tokenURL) if err != nil { return nil, err } defer resp.Body.Close() // 解析响应JSON数据 body, err := ioutil.ReadAll(resp.Body) if err != nil { return nil, err } var tokenResp AccessTokenResponse err = json.Unmarshal(body, &tokenResp) if err != nil { return nil, err } return &tokenResp, nil } func getUserInfo(accessToken, openid string) (*UserInfoResponse, error) { // 构建获取用户信息的URL userInfoURL := fmt.Sprintf("https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s", accessToken, openid) // 发送HTTP请求获取用户信息 resp, err := http.Get(userInfoURL) if err != nil { return nil, err } defer resp.Body.Close() // 解析响应JSON数据 body, err := ioutil.ReadAll(resp.Body) if err != nil { return nil, err } var userInfoResp UserInfoResponse err = json.Unmarshal(body, &userInfoResp) if err != nil { return nil, err } return &userInfoResp, nil } ``` 在上面的示例代码中,我们使用了Go的`net/http`包来实现一个简单的HTTP服务。其中,`wechatLoginHandler`函数处理了微信登录的业务逻辑,通过调用`getAccessToken`和`getUserInfo`函数来获取访问令牌和用户信息。 请注意,以上代码中的`AppID`和`AppSecret`需要替换为您自己微信应用的实际值。 此示例仅提供了基本的实现框架,您可以根据自己的实际需求进行适当的修改和扩展。同时,为了保证安全性,请务必加入适当的错误处理、安全验证和数据校验等措施。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值