web前端开发公众号代码 如何使用node.js实现获取微信用户授权（附代码）
2023-09-27 16:25:53 | 我爱编程网
微信怎样找到web前端技术答案
微信找到web前端技术答案的方法有微信搜索公众号、订阅号。1、微信搜索公众号：可通过关键词搜索前端技术、React、Vue等相关关键词，找到一些知名的前端技术公众号进行关注。这些公众号通常会推送最新的前端技术资讯、实用前端技巧、开发思路等内容，并且提供会员或开源项目等特殊资源。
2、订阅号：订阅一些前端技术相关的专业网站和博客，如前端开发者手册、阮一峰的网络日志等，这些网站内容丰富、专业，能够及时更新一些高质量的前端技术干货。
如何使用node.js实现获取微信用户授权（附代码）
本篇文章给大家带来的内容是关于如何使用node.js实现获取微信用户授权（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。
首先说一下，完成自定义分享信息的，从无到有的流程：
基础硬件服务：
需要一个公网可以访问的有效域名：
购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。
购买ip，然后设置上面的域名，解析到该ip，这个时间可以快到忽略。
拥有自己的服务器，来存放自己页面项目：
我还是在阿里云购买购买服务器，这个花费最大，几百元一年的使用权。
而且这个服务器，本质就是一台电脑，是电脑就有配置，我目前只是自己学习使用，配置几乎是最低的，而且购买的套餐自带公网ip，这么一来我连上面购买ip的钱也省了。
综上所述，最终我只购买了域名和一个套餐自带公网ip的服务器，服务器用来放置前端项目和后台项目。
阿里云ECS：
微信公众平台，开发者认证
打开微信公众平台
可选个人类型、企业类型等等，其中，个人类型是不没有分享定制功能的，但企业类型我又不符合。。最终我还是选择的个人类型，因为即使我的账号没有权限，但微信公众号里面，提供一个功能全开的测试账号，使用测试账号可以进行学习和测试，还是没问题的。
填写信息，绑定微信，注册完成，登录进去。
为了进行开发，需要在这里和你的后台项目和前端项目进行对应的配置，让微信确认后台项目和前台项目都是你的之后，才会提供服务。
有关服务器端和后台项目的配置：
首先需要说明，由于订阅号的功能比较少，如果只是进行学习，建议在 开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发，这样可以使用全功能的微信服务，配置也比较少。
下面的配置步骤均是使用自己的账号需要进行的配置
开发 => 基本配置 => 公众号开发信息，在这里记下开发者ID(AppID)，接着开通服务，记下开发者密码(AppSecret)，开发中会需要输入。
设置IP白名单，这里写的是自己的服务器IP地址，因为功能上线后，需要使用这台服务器，通过开发者ID和密码来向微信服务区获取自己服务的access_token
进行下面的后台项目，目的是让微信确定这个后台项目是你的，检验方法是微信发起一个get请求，你返回正确的返回值，启用此配置时调用：
url：接口地址，比如
Token：完全自定义的一个字符串，相当于个暗号，你的返回值需要这个字符串参与拼装。
EncodingAESKey：随机生成即可
消息加解密方式：自选，这里我使用的是明文模式
有关前端项目的配置：
设置 => 公众号设置 => 功能设置 => JS接口安全域名在此处添加你的要使用微信sdk功能的网站的域名，比如wx.qq.com或者wx.qq.com/user，最多可写三个，且需要验证。
> 验证的方式，就是将一个微信提供的txt文件，放在此域名对应的放置于服务器中的web项目的访问根目录中，需要和主文件（大部分默认为"index.html"）放在同一级，当提交的时候，微信会进行访问，来获取文件，确认此域名是你的。
配置完成后，就可以进行开发了。
下面进入代码阶段。
证明后台项目和前端项目时我自己的
首先，上面证明服务是自己的部分，我们需要实现一个接口，我用打的比方，那么为了启用配置，我需要实现/forWx给微信调用，下面是代码：
node的基础环境搭建省略，这里只写接口内部方法了，关键是参数加密拼装
const crypto = require('crypto') // 引入加密模块
const config = require('./config') // 引入配置文件
// 提供给微信调用
server.get('/forWx', function (req, res) {
res.header('Access-Control-Allow-Origin', '*')
// 1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
let signature = req.query.signature // 微信加密签名
let timestamp = req.query.timestamp // 时间戳
let nonce = req.query.nonce // 随机数
let echostr = req.query.echost // 随机字符串
// 2.将token、timestamp、nonce三个参数进行字典序排序，其中token就是设置在微信页面中的那个自定义字符串
let array = [config.token, timestamp, nonce]
array.sort()
// 3.将三个参数字符串拼接成一个字符串进行sha1加密
let tempStr = array.join('')
const hashCode = crypto.createHash('sha1') //创建加密类型
let resultCode = hashCode.update(tempStr, 'utf8').digest('hex')
//4.开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
if (resultCode === signature) {
res.send(echostr)
} else {
res.send('mismatch')
}
})完成，上面是证明服务器是我的，后面还需要证明前端项目是我的，这个就跳过了，因为太简单，直接下载那个文件，放到自己服务器中，前端项目的index.html同级即可
上面的操作，是只要想进行微信公页面开发，必须要有的步骤，一切的基础。
首先顺着功能使用流程，顺一下实现此功能的方法：
用户在微信打开页面后，立即或者通过方法触发ajax，把当前url和一些state（自定义的数据，因为弹窗请求用户授权，是需要跳转页面的，这个state就是会帮你带到下个页面链接中的数据）作为请求参数，请求自己的后台接口。
后台请求微信服务器，把以下作为参数，拼装到某个固定的微信指定的url后，返回给前端，参数为：
appId：自己的AppId
redirect_uri：前端给的url
scope：授权方式，是静默授权（只能获取用户openId）还是弹窗授权（能获取用户微信个人信息）
state：要带到新页面的参数
前端拿到后端拼好的这个url，直接window.location.href暴力跳转
如果静默授权，则直接用户无感，如果是弹窗授权，则新页面（微信方提供的页面）会弹窗询问用户，是否授权
用户同意授权后，微信再次跳转页面，即跳转到之前传的你的url地址中，还会把state参数给你带上，此外，还多了个code参数，即openId
新页面中，可以使用用户的openId，再加上自己的AppId和AppSecret，调用微信的接口，获取用户的access_token
最后再使用用户的openId和access_token，成功获取用户信息
下面是前端获取微信授权的...html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 页面描述 -->
<meta name="description" content=""/>
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
<title>微信</title>
<style>
html, body {
background-color: skyblue;
font-size: 16px;
height: 50%;
width: 100%;
}
#index {
padding: 10px;
}
#index .box > div {
cursor: pointer;
background-color: #fff;
display: inline-block;
padding: 5px;
margin: 10px;
}
#index .box .getUserInfo {
display: none;
}
</style>
<script src=" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="-1.4.0.js"></script>
</head>
<body>
<div id="index">
<div class="box">
<div class="initOauth3" type="snsapi_base">获取微信授权(静默)</div>
<div class="initOauth3" type="snsapi_userinfo">获取微信授权(弹框)</div>
<br>
<div class="wxSweep">扫一扫</div>
<br>
<div class="getUserInfo">获取用户信息</div>
</div>
<div class="userInfo"></div>
</div>
</body>
<script>
let BASE_URL = ''
// 获取 url 参数
const getValue = () => {
let flag = decodeURI(window.location.search.substr(1));
if (!flag) return undefined
let arr = flag.split('&')
if (arr.length <= 0) return undefined
let obj = {}
for (let i = 0; i < arr.length; i++) {
let tempArr = arr[i].split('=')
obj[tempArr[0]] = tempArr[1]
}
return obj
}
let urlParams = getValue()
let code
// 判断是否有code
if (urlParams && urlParams.code) {
code = urlParams.code
$('.getUserInfo').css('display', 'inline-block')
}
$('.getUserInfo').on('click', function() {
if (!code) return alert('请重新获取授权')
$.ajax({
url: BASE_URL + '/getUserInfo',
type: 'post',
data: {
code,
},
success: function(data) {
console.log(data)
$('.userInfo').html(JSON.stringify(data))
},
error: function(error) {
console.log(error)
alert('请重新获取授权')
}
})
})
// 获取微信授权
$('.box .initOauth3').on('click', function() {
wxInitOauth3($(this).attr('type'))
})
// 初始化 微信授权
wxInitOauth3 = type => {
let url = window.location.origin + window.location.pathname
console.log('url', url)
$.ajax({
url: BASE_URL + '/getOauth3',
type: 'post',
data: {
url,
type,
state: 'abcde'
},
success: function(data) {
// 去跳转
window.location.href = data.url
// console.log(data)
},
error: function(error) {
console.log(error)
},
})
}
</script>
</html>下面是node后台代码
const config = require('./config') // 引入配置文件
// 通过 code 获取用户的 openId 和 access_token
const getOpenIdAndAccessToken = code => {
let params = {
appid: config.appId,
secret: config.appSecret,
code,
grant_type: 'authorization_code'
}
let url = `
return new Promise((resolve, reject) => {
request(url, function (error, res, body) {
if (res) {
let bodyObj = JSON.parse(body)
resolve(bodyObj);
} else {
reject(error);
}
})
})
}
// 获取用户信息
const getUserInfo = ({ access_token, openid }) => {
let params = {
access_token,
openid,
lang: 'zh_CN'
};
let url = `
return new Promise((resolve, reject) => {
request(url, function (err, res, body) {
if (res) {
resolve(JSON.parse(body))
} else {
reject(err);
}
});
})
}
// 获取微信授权 --- code
server.post('/getOauth3', (req, res) => {
try {
let params = req.body
let redirect_uri = params.url
let state = params.state
let type = params.type
// 第一步：用户同意授权，获取code
// type:snsapi_base // 不弹出授权页面，直接跳转，只能获取用户openid
// type:snsapi_userinfo // 弹出授权页面，可通过openid拿到昵称、性别、所在地
var scope = type // 弹出授权页面，拿到code
let url = ` ? '&state=' + state : ''}#wechat_redirect`
res.send({ url });
} catch (error) {
res.send(error)
}
})
// 获取用户个人信息
server.post('/getUserInfo', (req, res) => {
try {
let params = req.body
let code =
微信公众号web开发调试不方便吗？送你2款调试工具完美解决
前言
我们公司有做微信公众号衔接的项目开发。前端小伙伴一般都是在chrome用手机模拟调试网页，但是不方便调试与微信衔接部分的功能。有些bug在chrome上没有调试出来，但是一到真机调试的时候，就出现了。
我也是大量的查阅资料并实践，发现如下2个调试工具技巧，即可完美解决以上遇到的微信项目开发令人头疼的调试问题。
1. vConsole 推荐指数：★★★★★
腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单，通过npm安装或者直接在需要的页面引入 js文件 ，然后 new VConsole() 就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题，因为我的 bug严重到一进页面就报错，脆弱的 javascript 直接原地爆炸，页面一片空白。
2. 微信web开发者工具 推荐指数：★★★★★
这是一款早期的微信web开发者工具，最新版本： (2016.05.19)0.7.0
前端小伙伴可能更熟悉的是小程序web开发者工具。但是我今天主要介绍的是该工具的 移动调试功能,这一个也许可以用fiddler抓包工具，fiddler配置起来很麻烦，没有该工具简单，应付移动端调试抓包还是搓搓有余。操作说明 请见官方文档讲得很清楚官方调试文档说明
这两款工具的实践是前辈们踩过的坑，并填了坑。你看到了就赚到了，并自己花1个小时的时间学习一下，就为自己节省了很大部分的时间。
工欲善其事必先利其器，没有好的调试工具或方法，移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法，我想各位优秀的前端大佬，帮妹子修复个小 bug 还是 so easy 的。
--完--
以上就是我爱编程网小编给大家带来的web前端开发公众号代码 如何使用node.js实现获取微信用户授权（附代码）全部内容，希望对大家有所帮助！
怎么样使用php的laravel框架快速集成微信登录1.安装php_weixin_provider在项目下运行composerrequirethirdproviders/weixin，即可完成安装。安装成功后，在项目的vendor目录下应该能看到php_weixin_provider的库文件：image2.配置微信登录的参数一共有7个参数可以配置，分别是：client_i
求微信公众号接口给客户发送信息的PHP代码你好,可以用客服消息接口或模板消息接口实现。但是需要认证公众号才能有权限。认证服务号可以发送客服接口消息[需要对应openid24小时内有互动]和模板消息，订阅号则没有模板消息权限。发送文字消息示例:$postdata ='{"touser":"o5BkRs_vRwfPqAb1ceXHfJDzmQ5o","msgtype":"tex
开发微信公众平台，sae的代码里index.php里面要弄什么内容啊？给分吧，你可以到微信公众平台官网的帮助中心下载一个案例文件wx_sample.zip,然后上传到你的SAE里去在配置你的公众平台开发者模式就可以用了。把wx_sample.php代码啃了一下，现附上自己的见解：01/**02*wechatphptest03*/0405//defineyourtoke
php微信开发获取用户信息步骤一：获取用户信息需要”通过微信认证“请确认你是否有相应权限步骤二：获取用户基本信息，必须提供ACCESS_TOKEN和openid两个参数//正常情况下，微信会返回下述JSON数据包给公众号：{ "subscribe": 1, "openid": "o6_bmjrPTlm6_2sgVt7hMZOPfL2M", "nickna
怎样去阅读一份PHP源代码这个回答建立在已经能运行程序的情况下。在这个情况下，基本上PHP框架都会有一个入口文件。如果想要了解这个框架源码是怎么运行的，内核内核怎么跑的话，个人建议先从框架的一种最简单的domo开始入手，从入口文件开始，遇到哪里看不懂的情况下就在那个地方设定断点，或者哪个不懂的PHP原生函数就百度这个函数的使用方法，一直到这个小DOMO可以跑通。之前在看workmen或者sw
微信公众号是有什么程序语言开发的需要“PHP语言程序、MySQL数据库、计算机网络通讯、及HTTP/XML/CSS/JS等基础”PHPPHP，一个嵌套的缩写名称，是英文超级文本预处理语言的缩写。PHP是一种HTML内嵌式的语言，PHP与微软的ASP颇有几分相似，都是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站编程人员广泛的运用。PH
微信web前端开发，调用设备相机和相册的接口怎么用调用相机和相册，可以使用H5的新特性，inputtype=file，代码段为<input type="file" id="imgUpload" accept="image/jpeg,image/jpg,image/png" />查阅网上的资料，你可能会查到accept="image/*"这样写的确没错，* 代表
微信公众号web开发调试不方便吗？送你2款调试工具完美解决前言我们公司有做微信公众号衔接的项目开发。前端小伙伴一般都是在chrome用手机模拟调试网页，但是不方便调试与微信衔接部分的功能。有些bug在chrome上没有调试出来，但是一到真机调试的时候，就出现了。我也是大量的查阅资料并实践，发现如下2个调试工具技巧，即可完美解决以上遇到的微信项目开发令人头疼的调试问题。
-
android开发还是web前端开发好 javaweb开发和安卓开发哪个前途好些2023-10-08 16:59:01
-
js 原生javascript实现动态引入外部js和css文件2023-06-27 20:13:22
-
Web前端主要包括哪些技术？小白求解答2023-10-20 12:30:40
-
web前端培训学费多少？2023-10-20 12:29:36
-
前端开发，能说说你的理解吗？2023-10-20 12:21:24
-
女生适合学习web前端开发吗？2023-10-20 12:12:43