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

最近在接触微信支付开发，要进行微信支付就需要用户的唯一标识——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")
@Slf4j
public 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")
@Slf4j
public 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
 **/
@Component
public 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: 3a6bsdf85sdf5wesd5fwesd5fwesdfde

projecturl:
  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/