微信小程序微信登录的实现方法详解(JAVA后台)

目录
  • 1. 前提
  • 2. 开发流程
    • 2.1 小程序端
    • 2.2 Java后端接口
  • 总结

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

本文主要记录小程序实现微信登陆功能,后端为Java开发。

在开发之前我们先看一下官方提供的时序图,了解一下我们的大致开发流程:

大致了解流程之后,我们便可以着手开发了。

1. 前提

一个可以测试的微信小程序

此微信小程序的APPID和APPscret(至开发者后台获取)

2. 开发流程

从时序图我们可以了解到流程大致分为两步:

  • 小程序端获取code后传给Java后台
  • Java后台获取code后向微信后台接口获取open_id

2.1 小程序端

在微信小程序的前端调用wx.login()获取一个code,这个code就像是我们去微信后台服务器获取用户信息的一个钥匙,微信通过获取这个code的过程给用户一个选择是否授权的选择,如果用户选择了授权就会返回一个code。这个code是一次性的,也是有时限的。由于我在Java后台进行了一次数据校验,所以我也会从getUserInfo接口中获取相关数据。代码如下:

2.2 Java后端接口

后端的流程我将其大致分为如下几点:

  • 接收小程序发送的code
  • 开发者服务器 登录凭证校验接口 appi + appsecret + code
  • 接收微信接口服务 获取返回的参数
  • 校验签名 小程序发送的签名signature与服务器端生成的签名signature2 = sha1(rawData + sessionKey)
  • 根据返回的User实体类,判断用户是否是新用户,是的话,将用户信息存到数据库;

获取openId

后台接受了code以后通过建立一个http请求去访问微信后台服务器拉取这个用户的openid,如果一切正常就会得到这个用户对应这个小程序的openid。

请求的地址:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

通过GET方式访问,其中的参数分别是:

  • appid:小程序的appid
  • secret:小程序的appsecret
  • js:小程序前端传来的code
  • grant_type:这个不用修改,表示授权的类型

请求工具类代码如下:(APPID自行替换)

public class WechatUtil {
    public static JSONObject getSessionKeyOrOpenId(String code) {
        String requestUrl = "https://api.weixin.qq.com/sns/jscode2session";
        Map<String, String> requestUrlParam = new HashMap<>();
        // https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=164113089&lang=zh_CN
        //小程序appId
        requestUrlParam.put("appid", WXConstant.APPID);
        //小程序secret
        requestUrlParam.put("secret", WXConstant.SECRET);
        //小程序端返回的code
        requestUrlParam.put("js_code", code);
        //默认参数
        requestUrlParam.put("grant_type", "authorization_code");
        //发送post请求读取调用微信接口获取openid用户唯一标识
        JSONObject jsonObject = JSON.parseObject(HttpClientUtil.doPost(requestUrl, requestUrlParam));
        return jsonObject;
    }
}

HTTP工具类如下:

需要添加相关依赖。

<!-- http请求工具包依赖 -->
<dependency>
	<groupId>org.apache.httpcomponents</groupId>
	<artifactId>httpclient</artifactId>
	<version>4.5.2</version>
</dependency>
public class HttpClientUtil {

    public static String doGet(String url, Map<String, String> param) {

        // 创建Httpclient对象
        CloseableHttpClient httpclient = HttpClients.createDefault();

        String resultString = "";
        CloseableHttpResponse response = null;
        try {
            // 创建uri
            URIBuilder builder = new URIBuilder(url);
            if (param != null) {
                for (String key : param.keySet()) {
                    builder.addParameter(key, param.get(key));
                }
            }
            URI uri = builder.build();

            // 创建http GET请求
            HttpGet httpGet = new HttpGet(uri);

            // 执行请求
            response = httpclient.execute(httpGet);
            // 判断返回状态是否为200
            if (response.getStatusLine().getStatusCode() == 200) {
                resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (response != null) {
                    response.close();
                }
                httpclient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return resultString;
    }

    public static String doGet(String url) {
        return doGet(url, null);
    }

    public static String doPost(String url, Map<String, String> param) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建参数列表
            if (param != null) {
                List<NameValuePair> paramList = new ArrayList<>();
                for (String key : param.keySet()) {
                    paramList.add(new BasicNameValuePair(key, param.get(key)));
                }
                // 模拟表单
                UrlEncodedFormEntity entity = new UrlEncodedFormEntity(paramList);
                httpPost.setEntity(entity);
            }
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }

    public static String doPost(String url) {
        return doPost(url, null);
    }

    public static String doPostJson(String url, String json) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建请求内容
            StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);
            httpPost.setEntity(entity);
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }
}

接口代码

具体代码如下所示:

判断用户是否存在后的代码根据自己的业务逻辑进行修改即可。

@PostMapping("/wx/login")
public R user_login(@RequestParam(value = "code", required = false) String code,
                    @RequestParam(value = "rawData", required = false) String rawData,
                    @RequestParam(value = "signature", required = false) String signature) {
    // 用户非敏感信息:rawData
    // 签名:signature
    JSONObject rawDataJson = JSON.parseObject(rawData);
    // 1.接收小程序发送的code
    // 2.开发者服务器 登录凭证校验接口 appi + appsecret + code
    JSONObject SessionKeyOpenId = WechatUtil.getSessionKeyOrOpenId(code);
    // 3.接收微信接口服务 获取返回的参数
    String openid = SessionKeyOpenId.getString("openid");
    String sessionKey = SessionKeyOpenId.getString("session_key");

    // 4.校验签名 小程序发送的签名signature与服务器端生成的签名signature2 = sha1(rawData + sessionKey)
    String signature2 = DigestUtils.sha1Hex(rawData + sessionKey);
    if (!signature.equals(signature2)) {
        return R.error().message("签名校验失败");
    }
    // 5.根据返回的User实体类,判断用户是否是新用户,是的话,将用户信息存到数据库;
    LambdaQueryWrapper<User> lqw = Wrappers.lambdaQuery();
    lqw.eq(User::getOpenId, openid);
    User user = userService.getOne(lqw);
    if (user == null) {
        // 用户信息入库
        String nickName = rawDataJson.getString("nickName");
        String avatarUrl = rawDataJson.getString("avatarUrl");
        user = new User();
        user.setOpenId(openid);
        user.setAvatar(avatarUrl);
        user.setNickName(nickName);
        userService.save(user);
    }
    return R.ok().data(user);
}

总结

到此这篇关于微信小程序微信登录实现的文章就介绍到这了,更多相关微信小程序微信登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • java实现微信小程序登录态维护的示例代码

    相信不少喜欢开发的朋友都已经知道微信小程序是个什么物种了,楼主也是从小程序内测期间就开始关注,并且也写过几个已经上线的微信小程序.但是基本上都是写的纯前端,最近楼主从后端到前端写一个完整的小程序项目,中间碰到了一些问题,楼主会找一些个人觉得有学习价值的点不定时的拿出来跟大家分享,希望对你有一些帮助. 本次就从最基本的微信小程序登录态维护开始吧.小程序官方api文档里面有对登录态的一个完整的解释,并且有相关的代码.想看详情,可以出门右转:https://mp.weixin.qq.com/debug

  • 微信小程序 授权登录详解(附完整源码)

    一.前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否

  • uni-app微信小程序登录授权的实现

    微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接口写到该事件里面去 <button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx&q

  • 微信小程序实现授权登录

    前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发.官方连接:点击打开链接 1.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示下面"界面简介"的第一个图,让用户去执行授权的操作.如果已经授权了,则直接跳过这个页面,进入首页. 2.界面简介 3.源码

  • 微信小程序 登录的简单实现

    微信小程序 实现登录 最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一遍,话说我的运气有时候也确实挺爆炸的,小程序一个小登录送给大家, 一.小程序开发前准备 目前在网上的教程已经不计其数了,给大家推荐一个网址: http://www.jb51.net/article/111566.htm 这里面介绍比较详细,

  • 微信小程序后端实现授权登录

    登录与授权 官方文档 一.登录登录流程时序 说明: 调用 wx.login()获取临时登录凭证code,并回传到开发者服务器. 调用code2Session接口,换取用户唯一标识 OpenID和会话密钥 session_key. 之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份. 注意: 会话密钥session_key是对用户数据进行加密签名的密钥.为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥. 临时登录

  • 一步步教会你微信小程序的登录鉴权

    前言 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口.乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态.本文就来手把手的教会大家在业务里如何接入和维护微信登录态,下面话不多说了,来一起看看详细的介绍吧. 接入流程 这里官方文档上的流程图已经足够清晰,我们直接就该图展开详述和补充. 首先大家看到这张图,肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端,微信第三方服务端也参与其中,那么微信服务端在其中

  • 微信小程序scroll-view隐藏滚动条的方法详解

    效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w

  • 微信小程序实现页面导航的方法详解

    目录 一.页面导航 二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参 五.总结 一.页面导航 1.什么是页面导航 页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式 页面导航有两种实现方式: 声明式导航 方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的

  • 微信小程序微信登录的实现方法详解(JAVA后台)

    目录 1. 前提 2. 开发流程 2.1 小程序端 2.2 Java后端接口 总结 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 本文主要记录小程序实现微信登陆功能,后端为Java开发. 在开发之前我们先看一下官方提供的时序图,了解一下我们的大致开发流程: 大致了解流程之后,我们便可以着手开发了. 1. 前提 一个可以测试的微信小程序 此微信小程序的APPID和APP

  • 微信小程序自定义toast组件的方法详解【含动画】

    本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to

  • 微信小程序获取用户openid的方法详解

    目录 获取openid的思路 需要修改的地方 完整代码 总结 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系 然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid 获取openid的思路 获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) 我这里是用一个点击事件来触

  • 微信小程序裁剪头像插件使用方法详解

    本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码,供大家参考,具体内容如下 用户上传头像,需要裁剪成正方形,结合在网上找到裁剪图片方法,封装为微信小程序组件.调用很方便. 参数介绍: image_url:需要裁剪的图片链接 showCutImage:是否显示裁剪图片组件 wxml调用: <cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl"  wx:if="

  • 微信小程序Echarts图表组件使用方法详解

    1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&

  • 微信小程序自定义波浪组件使用方法详解

    最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件) 在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中. 这里顺便用一下自定义组件: 首先定义组件 wave wave.wxml:这里我默认是用得显示个人信息.其中isSho

  • 微信小程序网络数据请求的实现详解

    目录 一.限制 二.配置服务器合法域名 三.发起请求 GET请求 POST请求 二者区别 四. 跳过requst合法域名校验 五.关于跨域和Ajax的说明 番外-GET与POST二者的通俗化解释 一.限制 出于安全性考虑,小程序官方对数据接口的请求做出了如下两点限制: 只能请求HTTPS类型的接口 必须先将接口的域名添加到信任列表中 二.配置服务器合法域名 配置步骤: 登录微信小程序管理后台 链接 点击开发 开发管理 开发设置 服务器域名 点击右上角修改requst合法域名 注意事项: 域名只支

  • 微信小程序 上传头像的实例详解

    微信小程序 上传头像的实例详解 最近在做微信小程序上传头像和上传照片功能就随手写一下代码: 上传头像html: <view class="edit-list"> <text class="list-name list-first">头像</text> <view class="edit-righr-bar"> <image class="head-portrait" src

随机推荐