【微信开发】免费域名—网页授权获取用户openid

时间：2022-08-06 19:48:01 | 来源：网站运营

时间：2022-08-06 19:48:01 来源：网站运营

最近在接触微信支付开发，要进行微信支付就需要用户的唯一标识——openid，因为第一次接触踩了很多坑，于是就把他记录下来，也便于以后查阅，也方便有需要的人进行参考

本文中的所使用的源码都会在给出地址。可放心浏览

一、openid?

openid是微信用户在公众号appid下的唯一用户标识（appid不同，则获取到的openid就不同），可用于永久标记一个用户，同时也是微信JSAPI支付的必传参数。

二、准备工具

工欲善其事必先利其器，不管做什么我们先要把准备工作做好，比如写代码的时候，可以先把具体的思路写在代码块里面，第一步做什么第二步做什么，咳咳，说的有点远了，回归正题，在微信开发中最重要的一个就是 官方文档 ，所以一定要仔细阅读文档，下面就是我们需要微信开发中需要的工具：

1、公网域名：**NATApp** 2、官方文档：**网页授权获取用户openid接口文档** 3、测试账号：**测试号**

2.1、免费公网域名

1、首先我们登录到NATApp官网中，进行注册登录，登录后，进入以下页面，点击 购买隧道 > 免费隧道




2、购买免费隧道 我们需要设置就是一个本地端口，也就是你可以 提供服务的端口（tomcat端口），点击免费购买

3、点击 我的隧道 ，查看刚才创建的隧道，这里要留意 authtoken 我们下面会使用到

4、点击列表中 配置，修改配置，除了本地地址和端口，其他的默认即可 本地地址：127.0.0.1 即可 端口：tomcat端口，博主的是 8080

5、点击客户端下载，这里以 win64 为例

6、将安装包解压，会看到一个natapp.exe的文件，双击运行

7、下面的提示错误，可以忽略，不会影响我们正常使用

8、输入命令 natapp -authtoken 4526sdfe44，注意 4526sdfe44 是你自己的 authtoken，在 我的隧道 列表中可以看到 authtoken，上文 第3点 中有说到 注意：不要 点击复制 按钮，没有效果

9、下面就是我们成功创建 隧道和本地的链接了

http://kxfmfu.natappfree.cc -> 127.0.0.1:8080#就是我们需要使用的域名http://kxfmfu.natappfree.cc #本地IP和端口127.0.0.1:8080免费隧道域名是系统随机分配，可以的话，花9块钱买一个固定的隧道也是可以的，有效期是一个月

Ctrl+C #退出系统

10、测试，通过域名访问 新建一个项目，在浏览器能访问就行，这里就不做详细介绍了

测试代码：

/** * @program: weixin_demo * @ClassName WeiXinController * @description: * @author: lyy * @create: 2019-11-12 10:16 * @Version 1.0 **/@RestController@RequestMapping("weixin")@Slf4jpublic class WeiXinController { @GetMapping("test") public String auth(){ log.info("test进来了。。。"); return "test测试"; }}访问成功：

2.2、授权获取用户openid接口文档

网页授权获取用户openid接口文档

2.3、测试账号：

点击：**测试号**

1、设置域名回调

开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；也就是说在微信公众号请求用户网页授权之前，也就是微信开发之前，填入我们所要开发的域名，这里我们使用的是测试环境，所以需要在测试账号管理页面 网页帐号 > 网页授权获取用户基本信息 填入我们自己的域名,这里要注意填入域名的规则,这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头

2、设置成功后，我们就可以看到我们设置的，JS接口安全域名，如果需要修改点击 JS接口安全域名 修改 中的 修改

要登录测试号后，我们才可以进行测试




3、测试号设置完成，接口配置信息不需要进行配置

三、微信开发

第一步：用户同意授权，获取code

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

# 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 参数说明:

将我们刚才在测试号中填写的信息放入对应的参数中： appID ：在我们测试号信息中有 redirect_uri：链接地址，是我们在代码中编写的地址，文档上说：请使用 urlEncode 对链接进行处理，其实做不做 urlEncode 都可以访问 scope：这里有 snsapi_base和 snsapi_userinfo两种，因为我们需要拿到用户的信息（openid）所以使用 snsapi_userinfo

• snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）
• snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地

获取code：

1、代码：

/** * @program: weixin_demo * @ClassName WeiXinController * @description: * @author: lyy * @create: 2019-11-12 10:16 * @Version 1.0 **/@RestController@RequestMapping("weixin")public class WeiXinController { @GetMapping("test") public String auth(@RequestParam("code") String code){ System.out.println(code); return code; }}2、编辑连接：

可以直接在文件助手中打开： 我的连接： https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的AppID&redirect_uri=http://域名/weixin/test&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

成功返回code：

第二步：正式开发，获取用户openid

当我们把第一步成功之后，下面的步骤就非常简单了，只需要按照微信文档的说明一步步往下走就可以了，你以为这么简答吗？其实是的，但是我们在这里要介绍一个第三方的SDK包——WxJava ，用来帮助我们更好更快的使用微信开发，感兴趣的可以了解下

WxJava：**https://github.com/Wechat-Group/WxJava**

目录结构：

2.1 导入jar包:

<dependency> <groupId>com.github.binarywang</groupId> <artifactId>weixin-java-mp</artifactId> <version>3.5.0</version></dependency>

2.2 源码：

WeChatController

package com.weixin.controller;import com.weixin.config.WeixinUrlConfig;import com.weixin.enums.ResultEnum;import com.weixin.exception.WeixinException;import lombok.extern.slf4j.Slf4j;import me.chanjar.weixin.common.api.WxConsts;import me.chanjar.weixin.common.error.WxErrorException;import me.chanjar.weixin.mp.api.WxMpService;import me.chanjar.weixin.mp.bean.result.WxMpOAuth2AccessToken;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import java.net.URLEncoder;/** * @program: sell * @ClassName WeChatController * @description: * @author: lyy * @create: 2019-11-12 21:37 * @Version 1.0 **/@Controller@RequestMapping("wechat")@Slf4jpublic class WeChatController { @Autowired private WxMpService wxMpService; @Autowired private WeixinUrlConfig weixinUrlConfig; @GetMapping("/authorize") public String authorize(@RequestParam("returnUrl") String returnUrl){ //1. 配置 //2. 调用方法 String url = weixinUrlConfig.getWechatMpAuthorize()+"/wechat/userInfo"; String redirectUrl = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAuth2Scope.SNSAPI_USERINFO, URLEncoder.encode(returnUrl)); log.info("【微信网页授权获取code，result={}】",redirectUrl); return "redirect:"+redirectUrl; } @GetMapping("/userInfo") public String userInfo(@RequestParam("code") String code, @RequestParam("state") String returnUrl) { log.info("进入userInfo信息表里面"); WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken(); try { wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code); } catch (WxErrorException e) { log.error("【微信网页授权】{}", e); throw new WeixinException(ResultEnum.WECHAT_MP_ERROR.getCode(), e.getError().getErrorMsg()); } String openId = wxMpOAuth2AccessToken.getOpenId(); return "redirect:" + returnUrl + "?openid=" + openId; }}WeixinUrlConfig

package com.weixin.config;import lombok.Data;import org.springframework.boot.context.properties.ConfigurationProperties;import org.springframework.stereotype.Component;/** * @program: sell * @ClassName ProjectUrlConfig * @description: * @author: lyy * @create: 2019-11-12 21:41 * @Version 1.0 **/@Data@Component@ConfigurationProperties(prefix = "projecturl")public class WeixinUrlConfig { /** * 微信公众平台授权url */ public String wechatMpAuthorize;}WechatMpConfig

package com.weixin.config;import me.chanjar.weixin.mp.api.WxMpService;import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;import me.chanjar.weixin.mp.config.WxMpConfigStorage;import me.chanjar.weixin.mp.config.impl.WxMpDefaultConfigImpl;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.context.annotation.Bean;import org.springframework.stereotype.Component;/** * @program: sell * @ClassName ProjectUrlConfig * @description: * @author: lyy * @create: 2019-11-12 21:41 * @Version 1.0 **/@Componentpublic class WechatMpConfig { @Autowired private WechatAccountConfig accountConfig; @Bean public WxMpService wxMpService(){ System.out.println("wxMpService"); WxMpService wxMpService = new WxMpServiceImpl(); wxMpService.setWxMpConfigStorage(wxMpConfigStorage()); return wxMpService; } @Bean public WxMpConfigStorage wxMpConfigStorage(){ System.out.println("wxMpConfigStorage(),{}"+accountConfig.getMpAppId()); WxMpDefaultConfigImpl wxMpConfigStorage = new WxMpDefaultConfigImpl(); wxMpConfigStorage.setAppId(accountConfig.getMpAppId()); wxMpConfigStorage.setSecret(accountConfig.getMpAppSecret()); return wxMpConfigStorage; }}配置文件：application.yml 注意：这里的配置文件需要填你自己的信息

wechat: mpAppId: wxbd885se5e5se53 mpAppSecret: 3a6bsdf85sdf5wesd5fwesd5fwesdfdeprojecturl: wechatMpAuthorize: http://xxyyg.n52y00.top

第三步：测试，拿到openId

输入链接： http://域名/wechat/authorize?returnUrl=https://www.baidu.com/

打开我们填写的网站：www.baidu.com,点击复制链接地址，我们就可以看到我们带过来的 openId 了

https://www.baidu.com/?openid=oMU7C1246578976kCEsrAcE

三、总结

总体看来还是很简单，但是还是需要注意一些细节，不然就很容易卡在那里，一定要对照着官方文档进行开发，仔细阅读，好了，今天就到这里，有问题或者不懂的小伙伴留言或者私信我，小农看到后会第一时间回复大家，谢谢。

双手奉上源码地址：https://github.com/839022478/weixin/