微信公众号开发,获取openid,授权登录 WeChat-official-account-openid

news2024/11/19 19:34:34

微信公众号开发
功能:自动登录,获取个人信息,上传图片
超多麻烦的情况,怎样获取openid呢?
以下我给大家提供源码,文本,视频资料
保证让你看了就明白哈

look效果

1.拉起用户授权
在这里插入图片描述

2.后台获取到的openid
在这里插入图片描述

3.前端展示用户信息
在这里插入图片描述


视频教程

不懂的可以先看看这个视频:
https://www.bilibili.com/video/BV1XL411T73G/?vd_source=125d808bbbad2b8400f221b816a0f674

核心代码展示

/**
// 获取用户信息,三部曲
// 感谢网友的文章 https://blog.csdn.net/qq_39506978/article/details/109410343
// 参考微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#3
app.get("/login.html", (req, res) => {
  console.log(Date.now()+':login.html页面响应--用户,有信息 :', req.body, req.query);
  // 如果是获取用户信息的回调,就重定向 
  if(req.query && req.query.code){
    let code = req.query.code
    res.redirect(`/${staticUrl}?code=`+code)
  }
})

// 通过后台,获取用户信息1
app.get("/getUserInfo", (req,res)=>{
  let code = req.query.code
  // 通过code,获取access_token
  let url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wxConfig.appId}&secret=${wxConfig.appsecret}&code=${code}&grant_type=authorization_code`
    
  request(url, async function (error, response, body) {
    if (!error) {
      console.log('openId_成功_用户信息:error, response, body', typeof body)
      
      // 通过access_token,最后获取用户信息
      let userInfo = await getUserInfo(JSON.parse(body))
      console.log('userInfo',userInfo);
      res.send(userInfo)
    } else {
      console.log('error:', error)
      res.send(JSON.parse(error))
    }
  });
})

如何运行:

环境准备

你需要安装nodejs环境,
直接去nodejs官网https://nodejs.org/en/
在这里插入图片描述

下载项目源码到本地

https://gitee.com/618859/WeChat-official-account-openid.git

安装项目依赖

在本项目根目录运行以下命令
一定要进入到:项目根目录,否则无法正确安装依赖

npm install

安装request模块

npm install request

启动后台:方法1

node app.js

启动后台:方法2:

可以安装了nodemon

npm i nodemon -g

或者如果你安装了nodemon的话

nodemon app.js

最后访问

在微信开发者工具中访问你内网穿透的地址
在这里插入图片描述

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

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

相关文章

微服务雪崩问题解决 Sentinel

雪崩问题以及解决方案 限流设置 达到阈值的效果 隔离和降级 熔断 授权规则 设置规则持久化 雪崩问题以及解决方案雪崩微服务调用链路中的某个服务出现故障,引起链路上其他服务都不可用,这就是雪崩解决方案超时处理,设定超时时间,请…

【软件工程期末复习内容】

前言 时不可以苟遇,道不可以虚行。 一、软件工程的概念 软件是计算机系统运行的 指令、数据 和 相关文档 的集合,即软件等于程序、数据、加上文档。程序:是事先按照预定功能性能等要求设计和编写的指令序列;数据:是使…

Python编程 while循环

作者简介:一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.循环控制 1.循环控制介绍 2.while循环表达式 3.while循环表达式 4.b…

Python实现ALO蚁狮优化算法优化支持向量机回归模型(SVR算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蚁狮优化(Ant Lion Optimizer,ALO)算法是Mirjalili于2015提出的一种新型元启发式群智能算法…

47-linux-vim-安装以及权限等-缺少

47-linux-vim-安装以及权限等: vi编辑器简介 vim是一个全屏幕纯文本编辑器,是vi编辑器的增强版,我们主要讲解的是vim编辑器。可以利用别名让输入vi命令的时候,实际上执行vim编辑器,例如: [rootlocalhost ~]# alias v…

HTTP协议介绍

了解HTTP HTTP是什么呢?它是超文本传输协议,HTTP是缩写,它的全英文名是HyperText Transfer Protocol。 那么什么是超文本呢? 超文本指的是HTML,css,JavaScript和图片等,HTTP的出现是为了接收和…

一位全栈工程师转岗项目经理的初体验与总结

从上周开始,公司这边把我从全栈工程师的岗位调到了项目经理的岗位,开始尝试管理岗位,感觉换了一个岗位像是换了一份工作一样,又在次充满了干劲。开始新的项目,招纳新的项目成员,虽然都是在做软件开发的事情…

【手把手】分布式定时任务调度解析之Quartz

1、任务调度背景 在业务系统中有很多这样的场景: 1、账单日或者还款日上午 10 点,给每个信用卡客户发送账单通知,还款通知。如何判断客户的账单日、还款日,完成通知的发送? 2、银行业务系统,夜间要完成跑批…

CCF CSP认证——201312

文章目录201312-1 出现次数最多的数201312-2 ISBN号码201312-3 最大的矩形201312-4 有趣的数201312-5 I’m stuck!201312-1 出现次数最多的数 题目链接 数据量较小,且数据范围也比较小。可以直接暴力,通过设置数组记录下标数据出现的次数,最…

C/C++关键字

C/C关键字【1】extern "C"【2】asm【3】关键字auto【4】break语句【5】catch 语句【6】关键字class【7】关键字const【8】#if【9】#pragma once【10】#pragma pack(1)【11】#pragma pack(4)【12】explicit【】 continue语句【13】关键字enum【14】friend【15】goto语…

【springboot进阶】基于starter项目构建(二)构建starter项目-web

目录 一、创建 web-spring-boot-starter 项目 二、添加 pom 文件依赖 三、构建配置 1. rest模板配置 RestTemplateConfig 2. 统一异常处理 BackendGlobalExceptionHandler 3. 统一返回数据结构 4. jwt鉴权处理 5. 请求日志切面处理 WebLogAspect 6. 邮件配置 BackendM…

mysql数据同步到elasticsearch数据解决方案

mysql数据同步到elasticsearch数据解决方案 问题场景 1.分库分表后多关联或者多条件查找效率低下,例如2b场景的查询,导出等需要多条件查询,继续用分库分表话效率低下。 2.数据量太多需要转移非关系型数据库elasticsearch存储 3.其他数据转…

AI 实战篇 |基于 AI开放平台实现 【植物识别】 功能,成为行走的百科全书

🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 &…

代码随想录刷题记录day40 爬楼梯+零钱兑换+完全平方数·

代码随想录刷题记录day40 爬楼梯零钱兑换完全平方数 参考:代码随想录 70. 爬楼梯 思想 当作完全背包问题,物品是1,2,可以无限次取用,背包的容量是n 1.dp[j]表示容量为j的背包,装满有dp[j]次 2.dp[j]dp…

【图像处理】opencv | 图像的二值化操作| cv2.threshold() | cv2.adaptiveThreshold()

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、cv2.threshold()阈值操作函数1.1、初见1.2、阈值不同时的效果二、cv2.adaptiveThreshold()自适应阈值操作函数2.1、初见2.2、固定blocksize,改变C值大小的实…

104-127-linux-vim-shell基础

104-linux-shell: 1.shell基础 分类:linux使用Bash,可通过vi /etc/shells查看linux支持的shell类型。 1、echo [rootlocalhost ~]#echo [选项] [输出内容] 选项:-e:支持反斜线控制的字符转换(具体百度吧)-n:取消输出后行末的换行符号&…

Python实现ALO蚁狮优化算法优化支持向量机分类模型(SVC算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蚁狮优化(Ant Lion Optimizer,ALO)算法是Mirjalili于2015提出的一种新型元启发式群智能算法…

185.基于Django的富文本编辑器安装与使用

1.DjangoUeditor 1.1 概述 富文本编辑器,在web开发中必不可少,但是django没有自带富文本编辑器,因此我们需要使用第三方库,这里使用DjangoUeditor DjangoUditor是百度开源的在线HTML编辑器,功能非常强大,像…

VUEElement简单介绍。

目录 一、VUE 1、基本介绍 2、Vue 指令 3、生命周期 二、Element 1、基本介绍 2、Element 布局 一、VUE 1、基本介绍 ▶ 概述 Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。 我们之前也学习过后端的框架 Mybatis ,My…

Linux下C/C++实现类似netstat命令(列出TCP和UDP连接)

网络连接一般包括最基本的五元组信息(源地址、目标地址、源端口、目标端口、协议号)再加上所属进程信息pid, exe, cmdline等。其中这两项数据大多可直接读取linux /proc目录下的网络状态连接文件/proc/net/tcp、/proc/net/udp), 进程状态目录(/proc/pid/xx)。 Linux 下的/proc…