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

这篇具有很好参考价值的文章主要介绍了微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

测试账号申请

测号响应流程:客户端发送请求,微信服务器收到请求后,转发到开发者服务器上,处理完后在发送给微信服务器,在返回给客户端

1、打开微信公众平台,点击测试帐号申请。地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,

通过微信扫一扫授权就能进入到测试号管理页面。可以看到自己的开发者ID

测试号中的url需要自己有服务器编写对应接口,点击提交微信会像url发送数据根据返回结果判断url是否配置成功;token为自己定义的字符串

微信公众平台测试号,微信小程序,测试号,小程序登陆,微信授权,openid

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

微信公众平台测试号,微信小程序,测试号,小程序登陆,微信授权,openid

下载中转工具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("授权失败,请重试");
    }

微信公众平台测试号,微信小程序,测试号,小程序登陆,微信授权,openid

创建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失效");
    }

若有其他实现方式欢迎讨论文章来源地址https://www.toymoban.com/news/detail-782098.html

到了这里,关于微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HBuilder将uniapp项目运行到微信开发者工具进行小程序调试

    HBuilder将uniapp项目运行到微信开发者工具进行小程序调试 有时候我们的项目开发是使用uniapp,而最终是要发布到微信小程序的。 在开发uniapp项目过程中,我们可以使用HBuilderX运行到微信小程序模拟器(微信开发者工具),一边写代码一边调试、预览效果。 电脑安装以下软件

    2024年02月16日
    浏览(73)
  • 使用Laf云平台,两步将ChatGPT接入微信公众号

    原文链接:https://husanr.cloud/views/ChatGPT/aircode_wechat

    2023年04月14日
    浏览(37)
  • uniapp项目从Hbuilder Vscode运行到小程序模拟器 微信开发者工具后没有反应,进不去!其实保姆级答案只需要三步

    先看问题如下图:uniapp项目从Hbuilder 或者Vscode点击运行到小程序模拟器 微信开发者工具后没有反应,进不去 只能在最外面如下图: 如何解决: 如果不知道如何查看自己的微信小程序AppID请看我的另一篇文章,下方是文章链接 如何查看自己的appid以及在微信开发者工具中查看

    2024年02月11日
    浏览(110)
  • 微信公众号推送天气教程,自动定时推送【Java版】开发者和小白详细教程

    久违的大更新: 建议先打开,因为GitHub在国内加载很慢。 点击打开 Java版本,教程最近一次更新时间为: 2023-08-23 重大更新: 1: 谚语功能修复。 2: 新增农历生日。 已经部署的伙伴,务必在公众号后台更新新的模块以及applicantion.yml配置文件中的模板ID,新的模板在本教程当中

    2024年01月23日
    浏览(77)
  • 使用Appium 测试微信小程序和微信公众号方法

    由于腾讯系QQ、微信等都是基于腾讯自研X5内核,不是google原生webview,需要打开TBS内核Inspector调试功能才能用Chrome浏览器查看页面元素,并实现Appium自动化测试微信小程序和微信公众号。 前提条件Appium环境搭建,这里不多说了,可查阅Appium环境搭建文章。 因夜神等模拟器是

    2024年02月13日
    浏览(38)
  • 【微信小程序二维码配置】微信公众平台配置二维码,小程序测试二维码,小程序动态二维码,然后扫码打开对应页面进行操作

    微信公众平台地址:微信公众平台 选择 开发管理 – 开发设置 – 扫普通链接二维码打开小程序 配置项 二维码规则: URL 为内含下载校验文件的服务器 URL , 可以加二级,比如我的 https://*** /preview , 二级随便写什么都可以 测试链接(选填): 匹配二维码规则地址,后加 *** 参数, 因

    2024年01月19日
    浏览(70)
  • 申请百度地图开发者AK和基本使用

    前言 有需求就会有市场,百度地图也会开放一些免费的Api。来提供一些基本的地图服务。 今天我们讲解的是百度地图申请AK过程,和申请完之后基本的使用,方便大家日后有需要浏览。 AK-申请 1.首先我们学习一个技术最直接的是去看官方文档,大家可以搜索百度地图开放平

    2023年04月09日
    浏览(42)
  • weixin微信开放平台 微信公众平台

      微信小程序 https://mp.weixin.qq.com/ 微信开发者社区: https://developers.weixin.qq.com/community/search?query=63002page=1block=1random=1571284603034 申请流程指引: https://kf.qq.com/product/weixinmp.html#hid=99       微信公众号可以快速注册认证小程序了==https://www.cnblogs.com/ytkah/articles/6781163.html   https://dev

    2024年02月08日
    浏览(58)
  • JAVA 微信公众号授权给开放平台(第三方平台)开发流程及第三方平台代公众号实现业务

    一 、开放平台账户注册及开发配置请参考我之前的文章 开发前准备工作。 二、授权流程 官方文档细节比较多 我说的比较直白 (1)首先 启动票据推送服务 (2)接收消息→解密→验证并获取票据→保存票据 component_verify_ticket (3)获取第三方平台调用凭证 component_access_tok

    2024年03月15日
    浏览(67)
  • 微信公众平台自定义菜单 /事件推送

    用户点击自定义菜单后,微信会把点击事件推送给开发者,请注意,点击菜单弹出子菜单,不会产生上报。 请注意,第3个到第8个的所有事件,仅支持微信iPhone5.4.1以上版本,和Android5.4以上版本的微信用户,旧版本微信用户点击后将没有回应,开发者也不能正常接收到事件推

    2024年02月16日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包