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

 更新时间:2024年10月21日 09:41:16   作者:小李大魔王  
这篇文章给大家介绍了uniapp实现微信小程序一键登录功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

前言

实现微信一键登录的流程:

① 微信小程序端获取临时凭证codecode只能被消费一次

② 将code交给后端

③ 后端拿到code,向微信服务器发起请求,拿到openidopenid代表微信用户在一个小程序中的唯一标识,另外拓展一下unionid代表微信用户在企业中的唯一标识

④ 后端查询数据库是否存在这个openid,存在则登录,返回token;不存在则注册账号,登录,返回token

一、复制 AppID 和 AppSecret

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

复制AppIDAppSecret

二、通过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微信小程序一键登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 前端获取用户ip信息几种常见的方法

    前端获取用户ip信息几种常见的方法

    这篇文章主要介绍了几种在前端页面获取用户IP地址的方法,包括使用第三方服务、WebRTC API和服务器端获取,每种方法都有其优缺点,需要根据具体需求和场景选择合适的方法,需要的朋友可以参考下
    2025-02-02
  • 一文详解JavaScript的转码方式

    一文详解JavaScript的转码方式

    JavaScript 转码是指将 JavaScript 代码从一种编码方式转换为另一种编码方式,常见的转码方式包括 URL 编码和 Base64 编码,解码是前端比较常见的一种操作,本文就给大家讲讲JavaScript转码方式
    2023-09-09
  • js中的referrer返回上一页使用介绍

    js中的referrer返回上一页使用介绍

    js中的referrer想必大家并不陌生吧,在本文将为大家详细介绍其是如何使用的,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • 11行JS代码制作二维码生成功能

    11行JS代码制作二维码生成功能

    本篇文章给大家分享了用11行简单的JS代码制作出二维码生成的简单功能,有兴趣的朋友参考下。
    2018-03-03
  • 用Javascript实现UTF8编码转换成gb2312编码

    用Javascript实现UTF8编码转换成gb2312编码

    这篇文章主要介绍了用Javascript实现UTF8编码转换成gb2312编码
    2006-12-12
  • javascript 尚未实现错误解决办法

    javascript 尚未实现错误解决办法

    打开页面的时候,FF下一切正常,但是当我用IE6测试的时候,JS总执行不下去了,提示“尚未实现”,无论怎么搞就搞不定。
    2008-11-11
  • 前端大文件分片下载具体实现方法(看这一篇就够了)

    前端大文件分片下载具体实现方法(看这一篇就够了)

    本文介绍了在浏览器中下载大文件的技术方案,包括分片下载、断点续传、进度条显示、取消及暂停下载和文件合并等功能,分片下载可以降低网络传输中断的风险,并减少内存占用,需要的朋友可以参考下
    2024-10-10
  • 小程序中如何绘制思维导图详解

    小程序中如何绘制思维导图详解

    小程序相信大家应该都很熟悉了,对于小程序的整个运营的方法,很多运营都比较关注,今天希望通过一个思维导图,这篇文章主要给大家介绍了关于小程序中如何绘制思维导图的相关资料,需要的朋友可以参考下
    2021-10-10
  • 为什么TypeScript的Enum会出现问题

    为什么TypeScript的Enum会出现问题

    TypeScript引入了很多静态编译语言的特性,今天有一个类型需要着重讨论下,这就是enum,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

    微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

    这篇文章主要介绍了微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论