uniapp实现微信小程序一键登录功能

作者:慢半拍时间:2026-11-01 03:29:01浏览:626

本文详解uniapp实现微信小程序一键登录的完整流程。前端通过uni.login()获取临时凭证code,后端利用Spring Boot结合Hutool工具调用微信接口换取openid。根据openid查询数据库,若存在则直接登录返回token,不存在则执行注册并登录。文章包含AppID配置、前端代码示例及后端工具类实现,帮助开发者快速集成微信登录功能。

引言

微信一键登录的具体步骤如下:

① 在微信小程序端获取临时登录凭证code(该code具有单次有效性)

② 将获取到的code传输至后端服务器

③ 后端接收code后,向微信官方服务器发起请求以获取openid(openid标识用户在当前小程序内的唯一身份,unionid则标识用户在同一开放平台下的唯一身份)

④ 后端根据openid查询数据库:若存在则执行登录并返回token;若不存在则执行注册及登录流程,并返回token

一、获取 AppID 与 AppSecret

访问 微信公众平台 -> 开发与服务 -> 开发管理 :微信公众平台 (qq.com)

复制AppID和AppSecret

引言

二、利用 uni.login() 获取临时凭证code

uni.login({
        provider: 'weixin',
        success: function (loginRes) {
        	//	打印临时凭证
        	console.log(loginRes.code)
    	}
});

此外,可通过 uni.getUserInfo() 获取用户头像、昵称及手机号等信息,但手机号权限需具备企业主体身份,例如:

// 登录成功
uni.getUserInfo({
    provider: 'weixin',
    success: function(info) {
        // 获取用户信息成功, info.authResult是用户信息
        const wxUserInfo = info.userInfo
		//	打印头像url
        console.log(wxUserInfo.avatarUrl)
        //	打印昵称
        console.log(wxUserInfo.nickName)
        //	打印用户详细信息
        console.log(wxUserInfo)
    }
})

三、后端使用临时凭证code换取openid

在spring-web项目中引入maven依赖库

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.16</version>
</dependency>

在下方提供的工具类中配置对应的AppID与AppSecret后即可调用

import cn.hutool.http.HttpResponse;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import org.springframework.web.util.UriComponentsBuilder;
public class WechatUtil {
	//	配置自己的app_id、app_secret
    private static final String APP_ID = "Your_APP_ID";
    private static final String APP_SECRET = "Your_APP_SERCERT";
    public static String getOpenId(String loginCode) {
        String url = "https://api.weixin.qq.com/sns/jscode2session";
        String requestUrl = UriComponentsBuilder.fromHttpUrl(url)
                .queryParam("appid", APP_ID)
                .queryParam("secret", APP_SECRET)
                .queryParam("js_code", loginCode)
                .queryParam("grant_type", "authorization_code")
                .toUriString();
        HttpResponse response = HttpUtil.createGet(requestUrl).execute();
        // 获取 session_key 和 openid
        JSONObject parseObj = JSONUtil.parseObj(response.body());
        String openid = (String) parseObj.get("openid");
        return openid;
    }
}

获取openid后,即可通过数据库查询完成一键登录逻辑

至此,关于uniapp实现微信小程序一键登录的教程已结束,更多相关uniapp微信小程序一键登录内容请查阅本站往期文章或继续浏览后续相关文章,感谢大家的支持!

作者最新文章