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

  时间:2022-05-11 15:39:32  阅读量:19  评论数:0  作者:

分享了微信公众平台测试号申请、使用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即可

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

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

首先需要在HBuilder上导入项目模板,在设置安全中配置微信开发者工具的目录,然后点击运行到小程序模拟器,这样运行之后就会自动打开微信开发者工具

创建登陆页面主要代码login.vue,主要是调用微信提供的api获取用户的code,这在前端同时还获取了用户的基本信息发送给后端

<button class="confirm-btn" @click="wxlogin" :disabled="logining">登录</button>
//对应逻辑
methods: {
			wxlogin(){
			uni.getUserProfile({
					desc:"获取资料",
					success: (res) => {
						console.log(res)
						this.encryptedData=res.encryptedData
						this.rawData=res.rawData
						this.iv=res.iv
						this.signature=res.signature
						this.avatarUrl=res.userInfo.avatarUrl
						this.name=res.userInfo.nickName
					}
				});//获取用户资料
				uni.login({
				  provider: 'weixin',
				  success: (res) => {
					
					 this.code=res.code;
					// console.log(this.code);
					
				  }
				});
				console.log(this.name)
				console.log(this.avatarUrl)
				//发送请求
				uni.request({
					url:"http://localhost:8081/api/dsxs/company/token",
					method:"POST",
				 data: {
					// encryptedData:this.encryptedData,
					// rawData:this.rawData,
					// iv:this.iv,
					// signature:this.signature,
					code:this.code,
					img:this.avatarUrl,
					name:this.name
				    },
					success: (e) => {
						
						console.log("向后端请求成功");
					}
					
				})
			},

后端可以通过之前申请的appID、appSecret和前端传来的code获取到用户的openID与session_key

创建springboot项目,添加依赖

 <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>4.7.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--lombok用来简化实体类-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.1</version>
        </dependency>

        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.6</version>
        </dependency>

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

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

创建获取配置信息类

@Component
//@PropertySource("classpath:application.properties")
public class ConstantPropertiesUtil implements InitializingBean {
    //读取配置文件并赋值
    @Value("${wx.open.app_id}")
    private String appId;
    @Value("${wx.open.app_secret}")
    private String appSecret;

    public static String WX_OPEN_APP_ID;
    public static String WX_OPEN_APP_SECRET;

    @Override
    public void afterPropertiesSet() throws Exception {
        WX_OPEN_APP_ID = appId;
        WX_OPEN_APP_SECRET = appSecret;
    }
}

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

public class LoginController {
    @Autowired
    private UserService userService;

    @PostMapping("token")
    public R login(@RequestBody LoginBO loginBO) throws IOException, InterruptedException {
    //拼接对应信息
        StringBuffer baseAccessTokenUrl = new StringBuffer()
                .append("https://api.weixin.qq.com/sns/jscode2session")
                .append("?appid=%s")
                .append("&secret=%s")
                .append("&js_code=%s")
                .append("&grant_type=authorization_code");
        String accessTokenUrl = String.format(baseAccessTokenUrl.toString(),
                ConstantPropertiesUtil.WX_OPEN_APP_ID,
                ConstantPropertiesUtil.WX_OPEN_APP_SECRET,
                loginBO.getCode());
         //像网站发送请求
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder().url(accessTokenUrl).build();
        Response response = client.newCall(request).execute();
        //请求成功会返回对应信息,解析为json
        if (response.isSuccessful()){
            String body = response.body().string();
            JSONObject jsonObject = JSONObject.parseObject(body);
            String session_key = jsonObject.getString("session_key");
            String openid = jsonObject.getString("openid");
            HashMap<String, Object> map = new HashMap<>();
            Thread.sleep(1000);
            //判断数据中有无当前用户
            User userInfo = userService.getByOpenId(openid);
            if (userInfo==null){
                User user = new User();
                user.setOpenid(openid);

                if (loginBO.getName().equals("")){
                    return R.error().message("授权失败");
                }
                user.setNickName(loginBO.getName());
                user.setAvatarUrl(loginBO.getImg());
                user.setStat(1);
                userService.save(user);
                userInfo = userService.getByOpenId(openid);
            }
                String token = JwtHelper.createToken(userInfo.getOpenid(),userInfo.getNickName(),userInfo.getAvatarUrl());
                map.put("token",token);
                map.put("nickname",userInfo.getNickName());
                map.put("img",userInfo.getAvatarUrl());
                return R.ok().data(map);
        }
        return R.error().message("授权失败,请重试");
    }

创建JWT生成token工具类

public class JwtHelper {
    //过期时间  毫秒
    private static long tokenExpiration = 60*60*1000;
    //自定义秘钥
    private static String tokenSignKey = "123456";
    public static String createToken(String openid,String nickName,String img) {
        String token = Jwts.builder()
                //设置分组
                .setSubject("DSXS-USER")
                //设置字符串过期时间
                .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))
                //私有部分
                .claim("userId", openid)
                .claim("userName", nickName)
                .claim("img",img)
                //设置秘钥
                .signWith(SignatureAlgorithm.HS512, tokenSignKey)
                .compressWith(CompressionCodecs.GZIP)
                .compact();
        return token;
    }
    //从生成token字符串获取userId值
    public static String getUserId(String token) {
        if(StringUtils.isEmpty(token)) return null;
        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        String userId = (String)claims.get("userId");
        return (String)claims.get("userId");
    }
    public static String getUserName(String token) {
        if(StringUtils.isEmpty(token)) return "";
        Jws<Claims> claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("userName");
    }
    public static String getImg(String token) {
        if(StringUtils.isEmpty(token)) return "";
        Jws<Claims> claimsJws
                = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("img");
    }

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

//根据token获取用户信息
    @GetMapping("auth/getUserInfo")
    public R getUserInfo(HttpServletRequest request) {
        try{
            String userId = AuthContextHolder.getUserId(request);
            String userName = AuthContextHolder.getUserName(request);
            String userImg = AuthContextHolder.getUserImg(request);
            User user = new User();
            user.setOpenid(userId);
            user.setNickName(userName);
            user.setAvatarUrl(userImg);
            return R.ok().data("userInfo",user);
        }catch (ExpiredJwtException e){
            System.out.println("token失效");
        }
        return R.error().message("token失效");
    }

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

关键词:微信小程序 测试号 小程序登陆 微信授权 openid,微信,微信公众平台,公众,平台,测试,测试号,申请,使用,开发,开发者,工具,实现,授权,登陆,功能,以及,单点登录,登录


相关标签/搜索

程序人生微信公众号修改微信号自定义微信主题彻底删除微信聊天记录不被恢复安卓手机微信聊天记录怎么恢复微信公众平台官网微信公众平台小程序微信公众平台怎么上传视频微信公众平台投票系统创建公众号的步骤公众号怎么制作公众号怎么开通公众号小程序制作接收短信验证码平台app搭建平台区块链交易平台排行区块链交易平台哪个好郑州市安全教育平台接口测试基础知识测试封装测试兼容性测试分析测试离职申请怎么写离职申请菜鸟驿站怎么申请开店轻松筹怎么申请ios开发者账号申请iframe框架使用方法vscode使用教程使用灭火器扑救火灾时要对准火焰的什么部位喷射使用的拼音使用灭火器进行灭火的最佳位置是哪里前端开发移动端app开发需要哪些技术应用程序开发流程应用程序开发过程的几个阶段应用程序开发过程开发者模式有什么用?开发者选项怎么开启开发者模式怎么关闭开发者大会2020华为直播使用工具jdbcutils工具类修改网站源码工具源码工具southsight源码工具箱多线程的实现方式实现中华民族伟大复兴的中国梦实现全体人民共同富裕的宏伟目标最终靠的是实现英语实现中国梦必须授权委托书授权书范本授权牌子授权书模板 电子版授权委托书模板第4号台风"黑格比"在浙江乐清登陆登录和登陆的区别搜同网址登陆有关台风登陆下列说法正确的是哪一个登陆之日补睾丸能提高性功能吗提高男性性功能的最佳锻炼方法提高性功能的药有哪些操作系统的主要功能是openmv功能以及是什么意思以及的拼音以及的英文以及读音以及什么意思jwt单点登录单点登录实现方案单点登录原理user profile service服务未能登录登录微信登录注册登录qq邮箱