小程序实现微信登录Java后端(一)--前端实现

这篇具有很好参考价值的文章主要介绍了小程序实现微信登录Java后端(一)--前端实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、概述

二、登录流程

三、前端代码

四、解读前端代码

1、登录部分

2、检查当前用户是否已登录

3、小程序启动时校验登录

五、阶段性小结


一、概述

最近终于有时间去搞一下准备参加比赛的小程序,小程序一开始设计的是使用邮箱登录,老师建议直接实现微信登录,更加方便,以前没有搞过,这次试一下。

网上实现小程序微信登录的教程不是很多,其中使用Java后台的更是少之又少,大部分是基于node.js的,而且网上的教程大部分代码缺头少尾,让人摸不着头脑,所以我打算写一个思路清晰一些的教程。

首先附上微信官方文档给的微信登录流程: 

java小程序自动登录,微信小程序,Java,小程序,微信,java,前端,spring boot

先理解一下几个概念:

code:是小程序通过wx.login()获取的,也是用户注册、登录时,前端向后端发送登录凭证。

openid:是后端使用code作为参数,调用微信接口服务获得的。openid是每个微信用户在一个特定的小程序或公众号中的唯一标识符,可以用来区分不同用户。

session_key:也是后端使用code作为参数,调用微信接口服务获得的。session_key是与当前用户会话相关的密钥,用于进行数据加密和解密。其重要性不及openid,可以选择性使用。

开发者服务器:跑后端代码的服务器。

微信接口服务:微信官方提供的API,开发者可以调用这个API获得 openid 和 session_key 。

二、登录流程

从微信官方文档可以看出,具体流程分为一下几点:

  1. 在小程序前端,使用 wx.login 获取用户的临时登录凭证 code。
  2. 将获取到的 code 使用 wx.request 发送给后端服务器。
  3. 在后端服务器中,使用这个 code 调用微信接口服务得到用户的 session_key 和 openid。可以使用微信提供的登录接口或者第三方库来实现这一步骤。
  4. 将获取到的 session_key 和 openid 存储到后端数据库中,这样后面可以根据这些信息来识别和关联用户。
  5. 在后端服务器中,根据 openid 将用户的其他信息存储到数据库中。注意,要确保用户的 openid 是唯一的,可以使用 openid 作为用户的唯一标识。
  6. 存储完用户信息后,后端可以生成一个用户的 token 并返回给小程序前端。小程序前端可以将这个token存储在storage和本地缓存中。
  7. 后续的请求可以携带这个 token 进行身份验证和授权。

注意微信新出的规定:

从大概2022年十月份起,不允许小程序在获得用户微信登录授权后,直接通过弹窗方式询问是否可以获得用户的微信头像和昵称。好像是因为好些小程序设置了,如果用户禁止小程序使用头像昵称,小程序就会阻止用户登录,即使用户已经授权了微信登录。官方好像认为这侵犯了用户的权益。(好像是这样,我也不太确定哈)

以前的规定是:如果需要存储用户的其他信息(如昵称、头像等),在小程序前端使用 wx.getUserInfo 获取用户信息。

现在的规定是:当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。

具体见官方文档 头像昵称填写 | 微信开放文档

后面的文章中,我会讨论一下,在新规定下怎么样获取微信用户头像昵称。

了解完基本流程后,开发者应该获取两个必要的东西,后面用得到:

  1. AppID(小程序ID)  
  2. AppSecret(小程序密钥)  

登录进入 微信公众平台 开发-开发管理-开发者id 即可看到。

这里注意,你微信开发者工具里的 AppID,和你在官网拿到的 AppID,还有保存在后端的 AppID要保持一致,不然后面会出现离谱的错误。还有一点,就是 AppSecret 一定要和 AppID 是同一个小程序的,一定要注意!!

注意,修改appid直接在小程序目录下的project.config.json中修改即可。 

java小程序自动登录,微信小程序,Java,小程序,微信,java,前端,spring boot

经测试,如果直接在微信开发者工具>设置>项目设置>基本信息>appId 修改,project.config.json中的appid不会改变。

java小程序自动登录,微信小程序,Java,小程序,微信,java,前端,spring boot

而直接在project.config.json中修改,上图中开发者工具的appid会随之修改。

三、前端代码

前端代码的话,我是参考了微信小程序实现用户登录(详)_微信小程序登录_灵魂学者的博客-CSDN博客这篇博客写的,这位大佬的后端是基于node的,但是他的思路是一种循序渐进式的,如果没有耐心看完的话,很可能到一半就崩溃了哈哈哈。

前端代码如下:

// app.js
App({
  globalData: {
    baseAPI: "http://localhost:8081", //后端运行端口号
    token: null //微信登陆token
  },

  onLaunch: function () {
    this.checkLogin(res => {
      console.log('is_login : ', res.is_login);
      if (!res.is_login) {
        this.login();
      }
    })
  },


  //微信登录逻辑
  login: function () {
    let _this = this
    wx.login({
      success: (res) => {
        //console.log("code: " + res.code);
        wx.request({
          url: _this.globalData.baseAPI + "/wxlogin",
          header: {
            'content-type': 'application/json;charset=UTF-8'
          },
          method: 'POST',
          data: {
            code: res.code
          },
          success: (res) => {
            console.log("token : " + res.data.data)
            _this.globalData.token = res.data.data
            wx.setStorage({
              key: 'token',
              data: res.data.data
            })
          },
          fail: (error) => {
            console.error("QwQ请求失败:", error);
            wx.showToast({
              title: '请求失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
      }
    })
  },


//检查是否登录
  checkLogin: function (callback) {
    let _this = this
    var token = _this.globalData.token
    if (!token) {
      token = wx.getStorageSync('token')
      if (token) {
        _this.globalData.token = token
      } else {
        callback({
          is_login: false
        })
      }
    }
    wx.request({
      url: _this.globalData.baseAPI + "/checkwxlogin",
      data: {
        token: token
      },
      success: (res) => {
        callback({
          is_login: res.data.code == 0 ? true : false 
        })
      }
    })
  },
})

因为微信登录是你打开小程序的时候,就要弹出来的,所以上面的代码要写在 app.js 里面。

四、解读前端代码

1、登录部分

login: function () {
    let _this = this
//调用wx.login接口,获取code,即下面的res.code
    wx.login({
      success: (res) => {
        //console.log("code: " + res.code);
        wx.request({
          url: _this.globalData.baseAPI + "/wxlogin", //调用后端接口
          header: {
            'content-type': 'application/json;charset=UTF-8'
          },
          method: 'POST',
          data: {
            code: res.code  //以post方式向后端发送code
          },
        //从后端接口得到的响应,即res.data
          success: (res) => {
            console.log("token : " + res.data.data); //后端返回的token保存在res.data.data中
            _this.globalData.token = res.data.data // 将token保存至全局 globalData
            wx.setStorage({  // 将token保存在storage本地缓存中
              key: 'token',
              data: res.data.data
            })
          },
          fail: (error) => {
            // 输出错误信息到控制台或日志
            console.error("QwQ请求失败:", error);          
            // 弹出提示框显示错误信息
            wx.showToast({
              title: '请求失败',
              icon: 'none',
              duration: 2000
            });
          }
        })
      }
    })
  }

注意上面 token 令牌的生成:后端使用 code 调用微信接口服务得到的用户的 session_key 和 openid,将 openid 经过加密变换或者结合时间戳的方式生成的,后面的文章会介绍到。

2、检查当前用户是否已登录

 checkLogin: function (callback) {
    let _this = this 
    var token = _this.globalData.token  //尝试从全局变量中获取token
    if (!token) {  //全局变量中没有
      token = wx.getStorageSync('token')  // 再试试从storage缓存中获取token
      if (token) {  //storage缓存中有
        _this.globalData.token = token
      } else {  //storage缓存也没有
        callback({
          is_login: false  //回调函数,设置登录状态为 :未登录
        })
      }
    }
    // 全局变量中有token,则向后端发送请求检验token是否存在
    wx.request({
      url: _this.globalData.baseAPI + "/checkwxlogin",
      data: {
        token: token
      },
      success: (res) => {
        //console.log(res);
        callback({
          is_login: res.data.code == 0 ? true : false  //三元表达式判断,如果res.data.code==0,则赋值is_login为true;其他,则赋值is_login为false
        })
      }
    })
  },
})

3、小程序启动时校验登录

  onLaunch: function () {
    // 小程序启动时检查用户是否登录
    this.checkLogin(res => {
      console.log('is_login : ', res.is_login);
      // 未登录,则调用login()函数
      if (!res.is_login) {
        this.login();
      }
    })
  }

五、阶段性小结

实现微信登录的前端部分已经实现好了,后续文章会继续介绍如何用Java写后端逻辑、获得用户头像昵称等,尽情期待……文章来源地址https://www.toymoban.com/news/detail-729629.html

到了这里,关于小程序实现微信登录Java后端(一)--前端实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序练手实战:前端+后端(Java)

    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。 springboot后端架构构建 小

    2024年02月10日
    浏览(47)
  • 前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》(附完整前后端项目demo)

    微信小程序官方登录流程图: 参考微信小程序登录官网文档 1、前端技术栈 1.1、uniapp 使用uniapp构建一套代码多端使用的前端框架项目 1.2、前端封装工具 dateUtil.js: 功能: 1. 时间日期格式化 2. 传入日期是否和当前日期的比较 完整代码: requestUtil.js: 功能: 1. 定义公共的

    2024年02月14日
    浏览(54)
  • 前端(微信小程序)后端(IDEA-java)的交互通信——基于javaweb

    一、准备 软件:idea+微信开发者工具 语言:java+小程序语言 工具:JDK+Tomcat 二、创建项目 一、新建一个java-web项目 这里是已经部署好了tomcat的,如果木有部署过tomcat看步骤三 自定义一个项目路径,命名最好是按照驼峰命名法,规范命名,方便项目管理,不按照这个也木有关

    2024年02月09日
    浏览(59)
  • 微信小程序登录流程(包含前端、后端代码)

    在微信小程序的开发过程中,如果想要保留 用户 的 数据 (比如: 操作记录 、 购物车信息 等等)就必须要 用户 登陆。为什么呢?比如说,数据库中有一条 数据 你如何知道这条数据属于谁?属于那个用户呢?这就需要用户登录来获取 用户 的 唯一标识 从而确定这条数据是属

    2024年02月03日
    浏览(52)
  • 微信小程序登录+获取手机号码(前端+后端)

    上面这张是微信小程序官方原图,登录流程如上图所示,下面一步步进行以及说一下碰到的坑。 1.wx.login()获取code         调用微信小程序官方提供的方法获取code提供给后端用以换取session_key、openid。         注意:code只能使用一次就会失效,且有效期为5分钟 2.后端收到

    2024年02月12日
    浏览(55)
  • Java实现微信小程序登录(服务端)

            微信小程序的登录,这里只涉及到后端代码,所以默认你是申请了一个小程序并且有了appid和secret。不管怎么说,还是放上官方的文档链接: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html https://links.jianshu.com/go?to=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminipr

    2024年02月01日
    浏览(35)
  • Java学习:小程序微信登录开发实现

    此次开发的实现是基于B站黑马课程的学习;只涉及后端的实现,前端代码不会。。   微信官方小程序登录开发文档链接: 小程序登录 | 微信开放文档|小程序登录 | 微信开放文档 小程序实现微信登录,完成具体业务的实现参考下图:         登录的实现需要三个端口实现

    2024年04月23日
    浏览(36)
  • java实现小程序获取微信登录,用户信息,手机号,头像

    在上面的代码中,首先定义了应用的AppID和AppSecret。然后,实现了获取微信用户access_token的方法getAccessToken()和获取微信用户信息的方法getUserInfo()。其中,getAccessToken()方法需要传入微信小程序登录时获取的code,会返回一个包含access_token和openid的Map;getUserInfo()方法需要传入用户

    2024年02月12日
    浏览(44)
  • 【微信小程序】实现微信小程序登录(附源码)后端,微信小程序获取手机号

    登录简介 第一步:获取token 第二步:通过token拿用户信息 第三步:调用接口获取手机号 HttpClientUtil: WeChatUtil: controller层: service层: serviceImpl层: 登录简介        新版本微信小程序登录 是前端获取用户信息,不再是后端获取信息进行保存。所以后端要做的主要流程就是

    2024年04月23日
    浏览(59)
  • (详细版)java实现小程序获取微信登录,用户信息,手机号,头像

    ps:springboot结合mybatisPlus、mysql实现,简单易懂,一件粘贴使用,详细往下看↓          1.注册微信开发平台账号,并创建小程序,获取小程序的AppID和AppSecret。 2.在小程序中引导用户点击按钮触发微信登录,获取到code。 3.将code发送到后端,后端通过code获取用户的openid和

    2024年02月01日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包