首页 > 编程语言 >微信小程序(9)获取微信openId

微信小程序(9)获取微信openId

时间:2023-08-20 19:13:35浏览次数:37  
标签:openId code console log 微信 获取 let res

1. 获取openId

1. 登录过程

参考官网: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

2. 核心代码

  1. 客户端

按钮点击事件,调用wx.login() 获取到code 之后进行登录。

 handleGetOpenId: function() {
    wx.login({
      success: async function(res) {
        console.log(res);
        let code = res.code;
        let resDate = await request('/getOpenId', {code});
        console.log(resDate)
      }
    })
  }
  1. 服务器端代码-node exress 代码

​ server.js 增加如下请求:

  /**
   * 获取注册获取用户唯一标识
   */
  app.use('/getOpenId', async (req, res, next) => {
    // 获取请求的code 参数
    let code = req.query.code;
    let appId= 'xxx';
    let appSecret = 'xxx';
    let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`;
    let result = await fly.get(url);
    console.log(url)
    console.log(result)
    // 获取响应data 数据里面的openId
    let openId = JSON.parse(result.data).openid;
    // 拿到openId, 和其他信息进行关联之后传送到客户端
    let user = {
      username: 'zs',
      age: 15,
      openId
    }
    
    
    var token = jwt.sign(user, 'cus-secret');
    console.log(token)
    var decodedToken = jwt.verify(token, 'cus-secret');
    console.log(decodedToken)
    res.send(openId);
  })

2. 涉及到的知识点

1. js 请求库-fly

https://github.com/wendux/fly

Fly.js 是一个基于 promise 的,轻量且强大的Javascript http 网络库,它有如下特点:
提供统一的 Promise API。
浏览器环境下,轻量且非常轻量 。
支持多种JavaScript 运行环境
支持请求/响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine,可轻松适配各种运行环境。
浏览器端支持全局Ajax拦截 。
H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片。

​ 可以用于node 服务端和网易云请求,也可以用于微信小程序客户端和服务器端交互。

​ fly 支持不同的环境是将不通的API封装到不同的包,支持多端的适配。

1. 下载
npm install flyio
2. node 环境中使用
var Fly=require("flyio/src/node")
var fly=new Fly;
...
/**
   * 获取注册获取用户唯一标识
   */
app.use('/getOpenId', async (req, res, next) => {
  // 获取请求的code 参数
  let code = req.query.code;
  let appId= 'xxx';
  let appSecret = 'xxx';
  let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${appSecret}&grant_type=authorization_code`;
  let result = await fly.get(url);
  console.log(result);
  res.send("test ~~~")
})

2. jsonwebtoken-加密

参考:https://github.com/auth0/node-jsonwebtoken

简单理解:服务器端用秘钥加密,客户端收到数据后用相同的秘钥解密。

简单加密解密:

1. 安装
npm install jsonwebtoken

2. 使用
var jwt = require('jsonwebtoken');

var token = jwt.sign(user, 'cus-secret');
console.log(token)
var decodedToken = jwt.verify(token, 'cus-secret');
console.log(decodedToken)

3. appId 和 appSecret

需要在开发管理-》开发设置进行设置。

3. 分包

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

标签:openId,code,console,log,微信,获取,let,res
From: https://www.cnblogs.com/qlqwjy/p/17644409.html

相关文章

  • 微信小程序(8)搜索页以及历史记录管理
    1.效果1.逻辑界面初始化调接口获取两部分数据:1.搜索框默认的搜索placeholder:下面自由自在...2.热搜榜数据:前20条热搜数据3.获取本地存的历史搜索记录historyList搜索框输入文字事件:1.调用接口根据关键字搜索音乐2.判断搜索记录是否有对应关键字,如果有就将......
  • 微信小程序
    1、input标签小程序的input标签新增了可以改变placeholder样式的属性<viewclass="about-page"><inputtype="text"placeholder="请输入账号"placeholder-style="color:red"placeholder-class=""/></view>.about-page{p......
  • 地图线条素材的获取网站合集
      本文介绍获取定制地图中路网、水体等线条素材底图的免费方法。  拥有一份类似于下图的定制黑白或彩色线条装饰地图,可以说是一件非常赏心悦目的事情;而这类定制装饰地图往往都具有比较高的价格,总是让我们望而却步。这时,我们可以尝试自己获取相关地图素材,DIY一份属于自己的定制......
  • Uni-App获取用户已安装应用列表
    //获取用户已装应用列表plus.android.importClass("java.util.ArrayList");plus.android.importClass("android.content.pm.PackageInfo");plus.android.importClass("android.content.pm.PackageManager");constApplicationInfo=plus.android.im......
  • Delphi获取文件创建时间、文件最后修改时间
    procedureTForm1.Button1Click(Sender:TObject);//获取文件创建时间varFileName:string;ti:Integer;dt:TDateTime;beginFileName:='D:\test\Test.txt';ti:=FileAge(FileName);ShowMessage(IntToStr(ti));//返回:1030115371,需要转换dt:=F......
  • 【wxauto】新版PC端微信报错:LookupError: Find Control Timeout(10s): {Name: ‘输入
    微信版本:3.9.5.81调用后报错“LookupError:FindControlTimeout(10s):{Name:'输入',ControlType:EditControl}”按照Issues#107说的修改后是不报错,但是没有效果,不能自动发送消息 解决方案:在wxauto.py的文件中找到WeChat的类,并添加下述方法defChangeWindo......
  • uniapp APP微信登录、支付、分享以及支付宝支付 实战踩坑记录
    1、微信支付和支付宝支付  先上代码、封装好了的组件   html部分    <template> <viewclass="rows"> <!------------------------------充值的弹框开始------------------------------> <uni-popupclass="common-popup"ref="popupChongZhi":i......
  • 微信小程序:排行榜页面模板
    1前言在开发一款背单词的微信小程序时,为了加强用户的体验感,刺激用户积极学习,小程序中需要有排行榜的模块。通过打卡天数来排名,让用户有攀比学习的心里。具体的页面截图如下:2模板代码wxml<viewclass="container"><viewclass="rank-item"style="position:relative;le......
  • 微信小程序项目:粤语教学平台-粤言粤语
    视频介绍1项目简介1.1创意来源根据中共中央办公厅、国务院办公厅印发的《关于实施中华优秀传统文化传承发展工程的意见》,我小组计划开发一款推广中国部分地区传统文化的可广泛推广的软件。为紧贴国家计划在2025年前全面复兴传统文化的重大国策,我小组计划从语言出发,以语言为......
  • 使用接口管理微信收藏夹
    获取收藏信息小提示:获取收藏相关信息注意:该接口作用不大请求URL:http://域名地址/api/favor/getinfo请求方式:POST请求头:Content-Type:application/jsonX-GEWE-TOKEN:后台获取参数:参数名称数据类型必填说明appid是string设备idsync_key是string返回数据:参数名数据类型说明retnumber0:......