spring boot实战——微信点餐系统03：微信授权（用户授权），免费内网穿透（固定ip）

首先：这个项目是在公众号下单，所以要开发公众号相关的功能

然后：再开发

网页授权：用于拿到 openid 。

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

请看官方文档: 网页授权部分 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

1、设置域名

2、获取code （用户授权）

3、用code 换取 access_token ; (这一步会把 openid 也带过来)

第三方SDK ：https://github.com/Wechat-Group

　　请阅读别人总结的文档（踩过的坑）： https://github.com/Wechat-Group/WxJava/wiki

重要：

设置授权回调地址：不是那个 js安全接口域名

使用测试号进行开发： https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index ，订阅号并没有权限调用该接口

代码开发：

将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;
    }
}

注：

关于@Component 注解： https://www.cnblogs.com/clwydjgs/p/9255083.html

内网穿透：微信回调需要使用内网穿透

使用nutz社区的 ngrok: https://nutz.cn/yvr/t/33b68q9106imspallbj4c6aa0p

使用方法：

　　1、下载客户端和配置文件

　　2、官方上面的例子输入下面就可以启动服务

　　ngrok -config ngrok.yml 8080

　　3、有点蠢，原样照搬，进入了我的文件夹，启动ngrok

d:software3 grok_win grok -config ngrok2.yml 8080

　　提示找不到配置文件。

　　4、实际上，配置文件也要完整路径：

　　d:software3 grok_win grok -config d:software3 grok_win grok2.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