微信小程序获取用户openid

news2025/2/28 21:41:07

小程序端直接获取:

实现代码:直接简单

wx.login({
      success(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
          //这里填你自己的appid 和 wxspSecret 
            url: "https://api.weixin.qq.com/sns/jscode2session?appid=" + wxspAppid+"&secret=" + wxspSecret + "&js_code=" + res.code + "&grant_type=authorization_code" ,
            method: "POST",
            success(res){//获取成功要执行的动作},
            fail(data){//失败要执行的动作 }
          })
        } else {console.log('登录失败!' + res.errMsg)}
      }
   })

问题: 前端直接暴露appid和appsecret

最开始使用这种方式,到了小程序发布的阶段,因为直接暴露自己的appid和appsecret在前端,经过反编译小程序会直接获取到你的这些信息,并且不改的话也发布不了。。。之后就改成云函数获取了

云函数获取oppenid

方便并且没有暴露信息的风险:

步骤1:创建云函数

打开云开发控制台:
在这里插入图片描述
选择云函数,创建一个函数,函数名为get
在这里插入图片描述

步骤2:建立一个云函数,命名为刚刚的get

在这里插入图片描述
步骤3:
index.js

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  console.log("OPENID",wxContext.OPENID);
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

config.json

{
  "permissions": {
    "openapi": [
    ]
  }
}

在你需要获取的地方直接调用即可,比如在app.js中

getOpenid() {
    let that = this;
    wx.cloud.callFunction({
      name: 'get',
      complete: res => {
        //你想要完成的功能,比如存储openid到全局
        that.globalData.openid = res.result.openid;
      }
    })
  },

上线两个星期左右,云函数收费了。。。
后面还是使用后端完成openid的获取

后端获取openid

小程序端

wx.login({
      success(res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: "你的接口"+res.code,
            method: "POST",
            success(res){//成功后的逻辑处理 }
          })
        } else {
          wx.showToast({
            title: '出现错误',
            icon: 'fail',
            duration: 5000
          })
          console.log('出现错误!' + res.errMsg)
        }
      }
    })

后端(springboot)

@PostMapping("你的接口")
    public Response decodeOpenid(HttpServletResponse response, @RequestParam String code){
      
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("utf-8");

        String wxspAppid = "你的appid";
        String wxspSecret = "你的密钥";

        try {
            Map<String, String> map = new HashMap<>();
            // 授权(必填)固定
            String grant_type = "authorization_code";
            // 发送请求
            String res = HttpRequest.post("https://api.weixin.qq.com/sns/jscode2session")
                    .form("appid",wxspAppid)
                    .form("secret",wxspSecret)
                    .form("js_code",code)
                    .form("grant_type",grant_type)
                    .execute().body();

            // 解析相应内容(转换成json对象)
            JSONObject json = JSONObject.parseObject(res);
            log.info("解析code请求结果:"+json.toString());
            //获取openid
            String openid = json.getString("openid");
            log.info("openid:"+openid);
            return Response.success(openid);
        } catch (Exception e) {
            e.printStackTrace();
            return Response.fail("openId生成失败");
        }
    }

需要导入hutools工具包和slf4j的依赖

ps: 微信小程序如果要发布的话是需要进行域名购买和备案的,以及后端https的配置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405011.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2022年微信小程序授权登录的最新实现方案

微信授权登录 我们的项目开发有时候用到用户的一些信息&#xff0c;比如头像&#xff0c;昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息&#xff0c;它的使用非常简单。 wx.getUserProfile方法获取用户信息 不推荐使用 wx.getUserInfo 获取用户信…

vue2.0运行导入的项目出现node:events:491 throw er; // Unhandled ‘error‘ event错误提示解决办法

只为记录自己遇到的错误。 错误提示&#xff1a; App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. node:events:491 throw er…

微信小程序支付完整流程(前端)

微信小程序中&#xff0c;常见付款给商家的场景&#xff0c;下面列出企业小程序中&#xff0c;从0起步完整微信支付流程。 一&#xff0c;注册微信支付商户号&#xff08;由上级或法人注册&#xff09; 接入微信支付 - 微信商户平台 此商户号&#xff0c;需要由主管及更上级领导…

快速上手vue的登录界面(最新版)

文章目录一、创建vue项目二、引入依赖三、改造下项目四、写入Login视图总结这是一个非常非常适合新手的vue登录界面&#xff0c;总体来说美观大气&#xff0c;axios那部分没有发&#xff0c;有需要的大家可以自己进行二次开发&#xff0c;继续编写。 用到了技术栈有 vue/cli 5.…

vue3 | 数据可视化实现数字滚动特效

前言 vue3不支持vue-count-to插件&#xff0c;无法使用vue-count-to实现数字动效&#xff0c;数字自动分割&#xff0c;vue-count-to主要针对vue2使用&#xff0c;vue3按照会报错&#xff1a; TypeError: Cannot read properties of undefined (reading _c) 的错误信息。这个时…

idea如何导入jar包

通过添加Libraries的方式引入&#xff1a; 1、首先在根目录下创建一个 libs 的目录 2、打开 File -> Project Structure 3、单击 Libraries -> "" -> "Java" -> 选择我们导入的项目主目录&#xff0c;点击OK 4、注意&#xff1a;在弹出的方框…

Vite 完整版详解

目录 序论&#xff1a; vite架子分析 1、 打包构建&#xff1a; 2、环境变量 3、模式 4、兼容老浏览器 5、typescript相关 6、基本配置 核心配置全集 推荐两个插件插件Volar 、 Vue 3 Snippets 序论&#xff1a; 开发环境&#xff1a;ESMHMR:来实现模块的热更新;类…

前端项目性能优化方案有哪些

目录 一、 加载优化&#xff08;减少http请求数&#xff09; 二、图片优化 三、使用CDN 四、开启Gzip&#xff08;代码压缩&#xff09; 六、减少不必要的Cookie 七、脚本优化 八、前端代码结构的优化 九、SEO优化 一、 加载优化&#xff08;减少http请求数&#xff09…

vue中axios的二次封装——vue 封装axios详细步骤

一、为什么要封装axios api统一管理&#xff0c;不管接口有多少&#xff0c;所有的接口都可以非常清晰&#xff0c;容易维护。 通常我们的项目会越做越大&#xff0c;页面也会越来越多&#xff0c;如果页面非常的少&#xff0c;直接用axios也没有什么大的影响&#xff0c;那页面…

vue3的setup的使用和原理解析

1.前言 最近在做vue3相关的项目&#xff0c;用到了组合式api&#xff0c;对于vue3的语法的改进也是大为赞赏&#xff0c;用起来十分方便。对于已经熟悉vue2写法的同学也说&#xff0c;上手还是需要一定的学习成本&#xff0c;有可能目前停留在会写会用的阶段&#xff0c;但是s…

Swagger-的使用(详细教程)

文章目录前言一、简介二、基本使用1. 导入相关依赖2. 编写配置文件2.1 配置基本信息2.2 配置接口信息2.3 配置分组信息3. 控制 Swagger 的开启4. 常用注解使用ApiModelApiModelPropertyApiOperationApiParam5. 接口调用三、进阶使用1. 添加请求头四、项目下载前言 作为后端开放…

37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

文章目录JSON处理JSON.stringifystringify的限制排除和替换映射函数格式化使用的空格数量自定义toJSON方法JSON.parse使用reviver总结JSON处理 JSON&#xff08;JavaScript Object Notation&#xff09;是JavaScript表达值和对象的通用数据格式&#xff0c;其本质就是符合一定…

2023前端面试题及答案整理(JavaScript)

JS类型 string&#xff0c;number&#xff0c;boolean&#xff0c;undefined&#xff0c;null&#xff0c;symbol&#xff08;es6&#xff09;&#xff0c;BigInt&#xff08;es10&#xff09;&#xff0c;object 值类型和引用类型的区别 两种类型的区别是&#xff1a;存储位…

Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)

1. 类型总结 指定格式 YYYY-MM-DD HH:MM:SS时间戳中国标准时间 Sat Jan 30 2022 08:26:26 GMT0800 (中国标准时间) new Date()获得系统当前时间就会是这种形式 2. 类型之间的转换 时间戳转换为 yyyy-mm-dd或yyyy-MM-dd HH-mm-ss function timestampToTime(timestamp) {var …

【vue】 配置代理

文章目录参考文档跨域问题引入配置代理解决跨域问题&#xff1a;方法一&#xff1a;方法二&#xff1a;使用方法二最终的文件&#xff1a;总结参考文档 尚硅谷视频&#xff1a;https://www.bilibili.com/video/BV1Zy4y1K7SH?p95 axios官网教程&#xff1a;https://axios-htt…

uniapp分包,小程序分包处理,详解(图解),手把手从0开始

一、为什么要分包 因小程序有体积和资源加载限制&#xff0c;优化小程序的下载和启动速度。 二、主包和分包 所谓的主包&#xff0c;即放置默认启动页面/TabBar 页面&#xff0c;以及一些所有分包都需用到公共资源/JS 脚本&#xff1b;而分包则是根据pages.json的配置进行划…

微信小程序详细教程(建议收藏)

一.小程序的开发准备 1. 小程序的安装与创建 第一步 打开小程序官网第二步 找到开发管理&#xff0c;找到开发设置&#xff0c;下面有一个AppID&#xff0c;复制即可&#xff0c;后面开发小程序需要用 新建项目 &#xff0c;需要先下载微信开发工具下载网址&#xff0c;安装完…

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪

九个前端神奇库&#xff0c;让你的前端项目瞬间美化&#xff0c;甲方看了都落泪 九个前端神奇库 文章目录九个前端神奇库&#xff0c;让你的前端项目瞬间美化&#xff0c;甲方看了都落泪1. Lottie-web/Bodymovin2. Parallax.js3. Magic Grid4. webslides5. SVG.js6. rellax7. …

【Vue面试专题】50+道经典Vue面试题详解!

目录前言相关学习资源01-Vue组件之间通信方式有哪些02-v-if和v-for哪个优先级更高&#xff1f;03-能说一说双向绑定使用和原理吗&#xff1f;04-Vue中如何扩展一个组件05-子组件可以直接改变父组件的数据么&#xff0c;说明原因06-Vue要做权限管理该怎么做&#xff1f;控制到按…

hexo主题应用

可以在hexo主题官网自己选择,官网网址:主题,选择哪个全凭自己的喜好。 我选择的一个主题是stun,官网效果图 安装主题stun git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun安装依赖 git clone -b dist https://github.com/liuyib/hexo-theme-stun…