注意:只有企业公众号才可以申请微信支付,个人公众号无权限申请。所以,我们得先有一个企业公众号。
一、参考官网文档
进入微信支付开发文档的官网地址https://pay.weixin.qq.com/wiki/doc/api/index.html,点击JSAPI支付。
1、主要交互流程
可以看到的是:商户系统和微信支付系统主要交互在于:
1、商户server调用统一下单接口请求订单,api参见公共api【统一下单API】
2、商户server接收支付通知,api参见公共api【支付结果通知API】
3、商户server查询支付结果,api参见公共api【查询订单API】
2、设置授权域名
开发JSAPI支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取openid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。
2.1、登录企业公众平台
在“开发 - 接口权限 - 网页服务 - 网页授权- 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头。
注意:配置的时候需要将该txt文件放置到公众号的根目录下,并且确保可以通过浏览器直接访问该文件。
2.2、使用内网穿透工具将域名映射到本地,方便调试
这里我使用的是https://www.ngrok.cc/,使用方法参考博客https://blog.csdn.net/hjfcgt123/article/details/104173788,配置域名http://hungteshun.viphk.ngrok.org指向本地开发的项目地址127.0.0.1:8080,方便调试。
二、手动方式获取openid
官网文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0
1、第一步:用户同意授权,获取code
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),在微信客户端打开以下链接:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的appId&redirect_uri=http://hungteshun.viphk.ngrok.org/sell/weixin/callback&response_type=code&scope=snsapi_base&state="state"#wechat_redirect
参数说明
参数 | 是否必须 | 说明 |
---|---|---|
appid | 是 | 公众号的唯一标识 |
redirect_uri | 是 | 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 |
response_type | 是 | 返回类型,请填写code |
scope | 是 | 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) |
state | 否 | 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节 |
#wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候,必须带此参数 |
这里的redirect_uri值,必须是公众平台中配置的授权域名下的url,否则不能回调。
请求成功之后,将会跳转至 http://hungteshun.viphk.ngrok.org/sell/weixin/callback?code=CODE&state=STATE,携带的参数为code和state。
2、第二步:通过code换取网页授权access_token和openid
在微信客户端打开以下链接
https://api.weixin.qq.com/sns/oauth2/access_token?appid=公众号的appid&secret=公众号的secret&code=CODE&grant_type=authorization_code
参数说明
参数 | 是否必须 | 说明 |
---|---|---|
appid | 是 | 公众号的唯一标识 |
secret | 是 | 公众号的appsecret |
code | 是 | 填写第一步获取的code参数 |
grant_type | 是 | 填写为authorization_code |
正确时返回的JSON数据包如下:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
参数说明:
参数 | 描述 |
---|---|
access_token | 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同 |
expires_in | access_token接口调用凭证超时时间,单位(秒) |
refresh_token | 用户刷新access_token |
openid | 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID |
scope | 用户授权的作用域,使用逗号(,)分隔 |
如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。
如果网页授权的作用域为snsapi_base,则可以继续获取用户的信息,具体操作参考官方文档。
三、通过sdk方式获取openid(推荐)
这里的sdk包并非官方给出,而是由其他开发者整合了微信官网给出的url调用方式,封装了一套api:
github地址:https://github.com/Wechat-Group/WxJava
码云地址:https://gitee.com/binary/weixin-java-tools
其中 weixin-java-mp 项目是企业公众号的源代码
1、引入maven依赖
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-mp</artifactId>
<version>2.7.0</version>
</dependency>
2、在application.yml文件中配置公众号的appId和secret以及需要跳转的本项目访问路径
wechat:
mpAppId: xxxxxxxxxxxxx
mpAppSecret: xxxxxxxxxxxxxxx
projecturl:
wechatMpAuthorize: http://hungteshun.viphk.ngrok.org
3、将配置写入对象
wechat前缀的配置
@Data
@Component
@ConfigurationProperties(prefix = "wechat")
public class WechatAccountConfig {
private String mpAppId;
private String mpAppSecret;
}
projecturl前缀的配置
@Data
@Component
@ConfigurationProperties(prefix = "projecturl")
public class ProjectUrlConfig {
private String wechatMpAuthorize;
}
4、构造调用对象
这里主要使用的对象是 me.chanjar.weixin.mp.api.impl.WxMpServiceImpl,通过这个对象来获取code以及获取access_token和openid(注意不是驼峰命名)
这里我们将构造WxMpServiceImpl实例,并将其交由spring管理,方便其他地方自动注入。
@Component
public class WechatMpConfig {
@Autowired
private WechatAccountConfig wechatAccountConfig;
@Bean
public WxMpService wxMpService() {
WxMpService wxMpService = new WxMpServiceImpl();
wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
return wxMpService;
}
@Bean
public WxMpConfigStorage wxMpConfigStorage() {
WxMpInMemoryConfigStorage wxMpDefaultConfig = new WxMpInMemoryConfigStorage();
wxMpDefaultConfig.setAppId(wechatAccountConfig.getMpAppId());
wxMpDefaultConfig.setSecret(wechatAccountConfig.getMpAppSecret());
return wxMpDefaultConfig;
}
}
5、获取code和accsee_token以及openid
根据码云上的wiki操作指引:https://gitee.com/binary/weixin-java-tools/wikis/MP_OAuth2%E7%BD%91%E9%A1%B5%E6%8E%88%E6%9D%83?sort_id=154594,
点击MP_OAuth2网页授权,我们需要执行以下操作:
第一步:构造网页授权url并访问,获取code和state
第二步:通过code获得access_token和openid
@Controller
@RequestMapping("/wechat")
@Slf4j
public class WeChatController {
@Autowired
private ProjectUrlConfig projectUrlConfig;
@Autowired
private WxMpService wxMpService;
/**
* 请求路径:
* http://hungteshun.viphk.ngrok.org/sell/wechat/authorize?returnUrl=http://hungteshun.viphk.ngrok.org/sell/WeChat/showOpenId
* @param returnUrl
* @return
*/
@GetMapping("authorize")
public String authorize(@RequestParam("returnUrl") String returnUrl) {
//回调的url
String url = projectUrlConfig.getWechatMpAuthorize() + "/sell/wechat/userInfo";
//1、构造网页授权url
String redirectUrl = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAUTH2_SCOPE_BASE, URLEncoder.encode(returnUrl));
/**
* 得到的结果:
* https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxx&redirect_uri=http%3A%2F%2Fhungteshun.viphk.ngrok.org%2Fsell%2Fwechat%2FuserInfo&response_type=code&scope=snsapi_base&state=http%3A%2F%2Fhungteshun.viphk.ngrok.org%2Fsell%2Fwechat%2FcallBack&connect_redirect=1#wechat_redirect
*/
return "redirect:" + redirectUrl;
}
@GetMapping("userInfo")
public String userInfo(@RequestParam("code") String code,
@RequestParam("state") String returnUrl) {
WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();
try {
//2、获取accessToken和openId
wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);
} catch (WxErrorException e) {
log.error("【微信网页授权获取accessToken异常】" + e.getMessage());
e.printStackTrace();
}
String openId = wxMpOAuth2AccessToken.getOpenId();
//重定向到我们想要请求的路径
return "redirect:" + returnUrl + "?openid=" + openId;
}
@GetMapping("showOpenId")
public void showOpenId(@RequestParam(value = "openid") String openId) {
log.info("openId={}", openId);
}
}
这里我的做法是:通过authorize方法构造网页授权url:https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxx&redirect_uri=http%3A%2F%2Fhungteshun.viphk.ngrok.org%2Fsell%2Fwechat%2FuserInfo&response_type=code&scope=snsapi_base&state=http%3A%2F%2Fhungteshun.viphk.ngrok.org%2Fsell%2Fwechat%2FcallBack&connect_redirect=1#wechat_redirect,并重定向访问该url获取code,其中state参数是我的showOpenId方法的请求地址;回调路径是http://hungteshun.viphk.ngrok.org/sell/wechat/userInfo,即我的userInfo方法,当请求授权成功之后,微信后台会回调该方法并传入code和state,在该方法中我通过code获取了openid,然后重定向到showOpenId方法,打印openid。