首先:这个项目是在公众号下单,所以要开发 公众号 相关的功能
然后:再开发
网页授权 : 用于拿到 openid 。
如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。
1、设置域名
2、获取code (用户授权)
3、用code 换取 access_token ; (这一步会把 openid 也带过来)
重要:
设置授权回调地址 :不是那个 js安全接口域名
代码开发:
将WxMpService 进行持久化:
@Component
public class WechatMpConfig {
@Autowired
WechatAccountConfig wechatAccountConfig;
@Bean
public WxMpService wxMpService() {
WxMpService wxMpServiceBean=new WxMpServiceImpl();
wxMpServiceBean.setWxMpConfigStorage(wxMpConfigStorage());
return wxMpServiceBean;
}
@Bean
public WxMpDefaultConfigImpl wxMpConfigStorage(){
WxMpDefaultConfigImpl wxMpDefaultConfigBean=new WxMpDefaultConfigImpl();
wxMpDefaultConfigBean.setAppId(wechatAccountConfig.getMpAppId());
wxMpDefaultConfigBean.setSecret(wechatAccountConfig.getMpAppSecret());
return wxMpDefaultConfigBean;
}
}
从配置文件读取信息: WechatAccountConfig wechatAccountConfig; 上面的注入,读取信息,会用到。
@Component
@Data
@ConfigurationProperties(prefix = "wechat")
public class WechatAccountConfig {
private String mpAppId;
private String mpAppSecret;
}
代码的实际应用:
@Controller
@RequestMapping("/wechat")
public class WechatController {
Logger logger = LoggerFactory.getLogger(getClass());
@Autowired
private WxMpService wxMpService;
@Autowired
private WxMpConfigStorage wxMpConfigStorage;
@Autowired
WechatAccountConfig wechatAccountConfig;
@GetMapping("/authorize")
public String authorize(@RequestParam("returnUrl")String returnUrl) throws UnsupportedEncodingException {
//1.配置
//2.调用方法
String url = "http://halfofalemon.ngrok.wendal.cn/sell/wechat/userInfo";
String redirectResult = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAuth2Scope.SNSAPI_USERINFO,URLEncoder.encode(returnUrl, "UTF-8"));
logger.info("[微信授权] 获取code redirectResult = {}",redirectResult);
return "redirect:"+redirectResult;
}
@GetMapping("userInfo")
private String userInfo(@RequestParam("code")String code,@RequestParam("state")String returnUrl){
WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();
try {
wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);
} catch (WxErrorException e) {
logger.error("[微信网页授权] 获取AccessToken错误 {}",e);
throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(),e.getError().getErrorMsg());
}
String openId = wxMpOAuth2AccessToken.getOpenId();
logger.info("[微信授权] 获取openId openId = ",openId);
return "redirect:"+returnUrl + "?openId="+openId;
}
}
注:
内网穿透: 微信回调需要使用内网穿透
使用方法:
1、下载客户端和配置文件
2、官方上面的例子输入下面就可以启动服务
ngrok -config ngrok.yml 8080
3、有点蠢,原样照搬, 进入了我的文件夹,启动ngrok
d:\software3\ngrok_win\ngrok -config ngrok2.yml 8080
提示找不到配置文件。
4、实际上,配置文件也要完整路径:
d:\software3\ngrok_win\ngrok -config d:\software3\ngrok_win\ngrok2.yml 8080
配置前端项目:
前端项目在 /opt/code/sell_fe_buyer
1、到 config 文件 修改 index.js 文件 。
sellUrl : 项目地址 。
openidUrl : 获取openid 的地址。
wechatPayUrl :
2、回到前端根目录 : npm run build
重新构建项目:构建好,项目会在 前端根目录的 dist
将构建好的项目发布: cp -r dist/* /opt/data/wwwroot/sell
end