微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能 ...

测试账号申请

   测号响应流程：客户端发送请求，微信服务器收到请求后，转发到开发者服务器上，处理完后在发送给微信服务器，在返回给客户端
  1、打开微信公众平台，点击测试帐号申请。地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，
通过微信扫一扫授权就能进入到测试号管理页面。可以看到自己的开发者ID
测试号中的url需要自己有服务器编写对应接口，点击提交微信会像url发送数据根据返回结果判断url是否配置成功；token为自己定义的字符串


最后在扫码添加自己微信为开发者


下载中转工具NATAPP-内网穿透 基于ngrok的国内高速内网映射工具
下载后在网页注册，进行实名认证，申请免费隧道，会生成隧道信息，启动natapp，
输入 natapp -authtoken 隧道信息生成的authtoken 回车
这时就会生成自己的域名，在测试时需要一直开启natapp
若是有企业公众号那么就不用以上步骤，直接配置开发者WX即可

1. 创建小程序测试：使用微信开发者工具通过扫码登陆，点击创建选择小程序即可，AppID为刚才申请的。选择需要编写的模板即可

复制代码

使用HBuilder X与微信开发者工具实现授权登陆功能

   首先需要在HBuilder上导入项目模板，在设置安全中配置微信开发者工具的目录，然后点击运行到小程序模拟器，这样运行之后就会自动打开微信开发者工具
  创建登陆页面主要代码login.vue，主要是调用微信提供的api获取用户的code，这在前端同时还获取了用户的基本信息发送给后端

1. <button class="confirm-btn" @click="wxlogin" :disabled="logining">登录</button>
2. //对应逻辑
3. methods: {
4.                         wxlogin(){
5.                         uni.getUserProfile({
6.                                         desc:"获取资料",
7.                                         success: (res) => {
8.                                                 console.log(res)
9.                                                 this.encryptedData=res.encryptedData
10.                                                 this.rawData=res.rawData
11.                                                 this.iv=res.iv
12.                                                 this.signature=res.signature
13.                                                 this.avatarUrl=res.userInfo.avatarUrl
14.                                                 this.name=res.userInfo.nickName
15.                                         }
16.                                 });//获取用户资料
17.                                 uni.login({
18.                                   provider: 'weixin',
19.                                   success: (res) => {
20.                                        
21.                                          this.code=res.code;
22.                                         // console.log(this.code);
23.                                        
24.                                   }
25.                                 });
26.                                 console.log(this.name)
27.                                 console.log(this.avatarUrl)
28.                                 //发送请求
29.                                 uni.request({
30.                                         url:"http://localhost:8081/api/dsxs/company/token",
31.                                         method:"POST",
32.                                  data: {
33.                                         // encryptedData:this.encryptedData,
34.                                         // rawData:this.rawData,
35.                                         // iv:this.iv,
36.                                         // signature:this.signature,
37.                                         code:this.code,
38.                                         img:this.avatarUrl,
39.                                         name:this.name
40.                                     },
41.                                         success: (e) => {
42.                                                
43.                                                 console.log("向后端请求成功");
44.                                         }
45.                                        
46.                                 })
47.                         },

复制代码

后端可以通过之前申请的appID、appSecret和前端传来的code获取到用户的openID与session_key
创建springboot项目，添加依赖

1. <dependency>
2.             <groupId>com.squareup.okhttp3</groupId>
3.             <artifactId>okhttp</artifactId>
4.             <version>4.7.2</version>
5.         </dependency>
6.         <dependency>
7.             <groupId>org.springframework.boot</groupId>
8.             <artifactId>spring-boot-starter-test</artifactId>
9.             <scope>test</scope>
10.         </dependency>
11.         
12.         <dependency>
13.             <groupId>com.baomidou</groupId>
14.             <artifactId>mybatis-plus-boot-starter</artifactId>
15.             <version>3.3.1</version>
16.         </dependency>
17.         
18.         <dependency>
19.             <groupId>mysql</groupId>
20.             <artifactId>mysql-connector-java</artifactId>
21.         </dependency>
22.         
23.         <dependency>
24.             <groupId>org.projectlombok</groupId>
25.             <artifactId>lombok</artifactId>
26.         </dependency>
27.         <dependency>
28.             <groupId>org.springframework.boot</groupId>
29.             <artifactId>spring-boot-starter</artifactId>
30.         </dependency>
32.         <dependency>
33.             <groupId>org.springframework.boot</groupId>
34.             <artifactId>spring-boot-starter-web</artifactId>
35.         </dependency>
36.         <dependency>
37.             <groupId>com.baomidou</groupId>
38.             <artifactId>mybatis-plus-generator</artifactId>
39.             <version>3.3.1</version>
40.         </dependency>
42.         <dependency>
43.             <groupId>org.apache.velocity</groupId>
44.             <artifactId>velocity-engine-core</artifactId>
45.             <version>2.0</version>
46.         </dependency>
47.         <dependency>
48.             <groupId>com.alibaba</groupId>
49.             <artifactId>fastjson</artifactId>
50.             <version>1.2.62</version>
51.         </dependency>
52.         <dependency>
53.             <groupId>io.jsonwebtoken</groupId>
54.             <artifactId>jjwt</artifactId>
55.             <version>0.9.1</version>
56.         </dependency>
57.         <dependency>
58.             <groupId>org.apache.httpcomponents</groupId>
59.             <artifactId>httpclient</artifactId>
60.             <version>4.3.1</version>
61.         </dependency>
62.         <dependency>
63.             <groupId>commons-io</groupId>
64.             <artifactId>commons-io</artifactId>
65.             <version>2.6</version>
66.         </dependency>
67.         <dependency>
68.             <groupId>commons-lang</groupId>
69.             <artifactId>commons-lang</artifactId>
70.             <version>2.6</version>
71.         </dependency>

复制代码

配置好实体类与数据相关代码后，将自己的appID、appSecret放在配置文件中

1. wx.open.app_id=xxxxxxxx
2. wx.open.app_secret=xxxxxxxxx

复制代码

创建获取配置信息类

1. @Component
2. //@PropertySource("classpath:application.properties")
3. public class ConstantPropertiesUtil implements InitializingBean {
4.     //读取配置文件并赋值
5.     @Value("${wx.open.app_id}")
6.     private String appId;
7.     @Value("${wx.open.app_secret}")
8.     private String appSecret;
10.     public static String WX_OPEN_APP_ID;
11.     public static String WX_OPEN_APP_SECRET;
13.     @Override
14.     public void afterPropertiesSet() throws Exception {
15.         WX_OPEN_APP_ID = appId;
16.         WX_OPEN_APP_SECRET = appSecret;
17.     }
18. }

复制代码

  编写用户登录控制层，这里我的实现逻辑是根据前端传来的code，获取用户openID作为用户的唯一标识。首先在数据库中查询有无当前用户，要有创建token返回给前端对应信息。因为前端写的是一次性将code与用户信息全传过来，用户点击登陆后会跳转到授权页面，用户若点击拒绝那么用户信息将不会传过来，只有code，这时我的处理逻辑是判断有无用户信息，若没有不存如数据库，这里由于用户点击授权会有时间响应所以做了一个短暂的休眠处理。

1. public class LoginController {
2.     @Autowired
3.     private UserService userService;
5.     @PostMapping("token")
6.     public R login(@RequestBody LoginBO loginBO) throws IOException, InterruptedException {
7.     //拼接对应信息
8.         StringBuffer baseAccessTokenUrl = new StringBuffer()
9.                 .append("https://api.weixin.qq.com/sns/jscode2session")
10.                 .append("?appid=%s")
11.                 .append("&secret=%s")
12.                 .append("&js_code=%s")
13.                 .append("&grant_type=authorization_code");
14.         String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
15.                 ConstantPropertiesUtil.WX_OPEN_APP_ID,
16.                 ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
17.                 loginBO.getCode());
18.          //像网站发送请求
19.         OkHttpClient client = new OkHttpClient();
20.         Request request = new Request.Builder().url(accessTokenUrl).build();
21.         Response response = client.newCall(request).execute();
22.         //请求成功会返回对应信息，解析为json
23.         if (response.isSuccessful()){
24.             String body = response.body().string();
25.             JSONObject jsonObject = JSONObject.parseObject(body);
26.             String session_key = jsonObject.getString("session_key");
27.             String openid = jsonObject.getString("openid");
28.             HashMap<String, Object> map = new HashMap<>();
29.             Thread.sleep(1000);
30.             //判断数据中有无当前用户
31.             User userInfo = userService.getByOpenId(openid);
32.             if (userInfo==null){
33.                 User user = new User();
34.                 user.setOpenid(openid);
36.                 if (loginBO.getName().equals("")){
37.                     return R.error().message("授权失败");
38.                 }
39.                 user.setNickName(loginBO.getName());
40.                 user.setAvatarUrl(loginBO.getImg());
41.                 user.setStat(1);
42.                 userService.save(user);
43.                 userInfo = userService.getByOpenId(openid);
44.             }
45.                 String token = JwtHelper.createToken(userInfo.getOpenid(),userInfo.getNickName(),userInfo.getAvatarUrl());
46.                 map.put("token",token);
47.                 map.put("nickname",userInfo.getNickName());
48.                 map.put("img",userInfo.getAvatarUrl());
49.                 return R.ok().data(map);
50.         }
51.         return R.error().message("授权失败，请重试");
52.     }

复制代码

创建JWT生成token工具类

1. public class JwtHelper {
2.     //过期时间  毫秒
3.     private static long tokenExpiration = 60*60*1000;
4.     //自定义秘钥
5.     private static String tokenSignKey = "123456";
6.     public static String createToken(String openid,String nickName,String img) {
7.         String token = Jwts.builder()
8.                 //设置分组
9.                 .setSubject("DSXS-USER")
10.                 //设置字符串过期时间
11.                 .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
12.                 //私有部分
13.                 .claim("userId", openid)
14.                 .claim("userName", nickName)
15.                 .claim("img",img)
16.                 //设置秘钥
17.                 .signWith(SignatureAlgorithm.HS512, tokenSignKey)
18.                 .compressWith(CompressionCodecs.GZIP)
19.                 .compact();
20.         return token;
21.     }
22.     //从生成token字符串获取userId值
23.     public static String getUserId(String token) {
24.         if(StringUtils.isEmpty(token)) return null;
25.         Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
26.         Claims claims = claimsJws.getBody();
27.         String userId = (String)claims.get("userId");
28.         return (String)claims.get("userId");
29.     }
30.     public static String getUserName(String token) {
31.         if(StringUtils.isEmpty(token)) return "";
32.         Jws<Claims> claimsJws
33.                 = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
34.         Claims claims = claimsJws.getBody();
35.         return (String)claims.get("userName");
36.     }
37.     public static String getImg(String token) {
38.         if(StringUtils.isEmpty(token)) return "";
39.         Jws<Claims> claimsJws
40.                 = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
41.         Claims claims = claimsJws.getBody();
42.         return (String)claims.get("img");
43.     }

复制代码

创建根据token获取用户信息方法

1. //根据token获取用户信息
2.     @GetMapping("auth/getUserInfo")
3.     public R getUserInfo(HttpServletRequest request) {
4.         try{
5.             String userId = AuthContextHolder.getUserId(request);
6.             String userName = AuthContextHolder.getUserName(request);
7.             String userImg = AuthContextHolder.getUserImg(request);
8.             User user = new User();
9.             user.setOpenid(userId);
10.             user.setNickName(userName);
11.             user.setAvatarUrl(userImg);
12.             return R.ok().data("userInfo",user);
13.         }catch (ExpiredJwtException e){
14.             System.out.println("token失效");
15.         }
16.         return R.error().message("token失效");
17.     }

复制代码

若有其他实现方式欢迎讨论

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！