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

最新推荐文章于 2024-05-22 15:46:46 发布

环球商业推荐

最新推荐文章于 2024-05-22 15:46:46 发布

阅读量561

点赞数 4

分类专栏：程序员文章标签：单元测试功能测试学习

本文链接：https://blog.csdn.net/m0_55004058/article/details/138663185

版权

程序员专栏收录该内容

126 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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

下载中转工具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")



![img](https://img-blog.csdnimg.cn/img_convert/830473e619dbff575c370b661ead922c.png)
![img](https://img-blog.csdnimg.cn/img_convert/fc42648c16fda92859c0fce668c6d336.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

/sns/jscode2session")

                .append("?appid=%s")



[外链图片转存中...(img-4dJypDqc-1715320106318)]
[外链图片转存中...(img-66W3MFeW-1715320106319)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

环球商业推荐

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
微信公众平台测试号申请、使用HBuilder X与微信开发者工具实现授权登陆功能以及单点登录

因为前端写的是一次性将code与用户信息全传过来，用户点击登陆后会跳转到授权页面，用户若点击拒绝那么用户信息将不会传过来，只有code，这时我的处理逻辑是判断有无用户信息，若没有不存如数据库，这里由于用户点击授权会有时间响应所以做了一个短暂的休眠处理。创建登陆页面主要代码login.vue，主要是调用微信提供的api获取用户的code，这在前端同时还获取了用户的基本信息发送给后端。下载后在网页注册，进行实名认证，申请免费隧道，会生成隧道信息，启动natapp，创建springboot项目，添加依赖。
复制链接

扫一扫