编程 Javascript

node.js实现微信开发之获取用户授权

Posted in Javascript onMarch 18, 2019

本篇主要讲述，如何在微信中打开自家页面后，弹窗请求用户授权，以便拿到用户的微信信息。

首先说一下，完成自定义分享信息的，从无到有的流程：

基础硬件服务：

需要一个公网可以访问的有效域名：

购买域名，并备案，我是在阿里云购买的，备案需要十几个工作日。
购买ip，然后设置上面的域名，解析到该ip，这个时间可以快到忽略。

拥有自己的服务器，来存放自己页面项目：

我还是在阿里云购买购买服务器，这个花费最大，几百元一年的使用权。
而且这个服务器，本质就是一台电脑，是电脑就有配置，我目前只是自己学习使用，配置几乎是最低的，而且购买的套餐自带公网ip，这么一来我连上面购买ip的钱也省了。
综上所述，最终我只购买了域名和一个套餐自带公网ip的服务器，服务器用来放置前端项目和后台项目。

阿里云ECS：https://cn.aliyun.com/product/ecs

微信公众平台，开发者认证

打开微信公众平台 https://mp.weixin.qq.com/，使用邮箱注册，注意，一个邮箱只能注册一个微信公众平台账号，一个账号只能选择一种账号分类且不能更改，这里一定要慎重，这里选择订阅号。

可选个人类型、企业类型等等，其中，个人类型是不没有分享定制功能的，但企业类型我又不符合。。。最终我还是选择的个人类型，因为即使我的账号没有权限，但微信公众号里面，提供一个功能全开的测试账号，使用测试账号可以进行学习和测试，还是没问题的。

填写信息，绑定微信，注册完成，登录进去。

为了进行开发，需要在这里和你的后台项目和前端项目进行对应的配置，让微信确认后台项目和前台项目都是你的之后，才会提供服务。

有关服务器端和后台项目的配置：

首先需要说明，由于订阅号的功能比较少，如果只是进行学习，建议在开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发，这样可以使用全功能的微信服务，配置也比较少。
下面的配置步骤均是使用自己的账号需要进行的配置

开发 => 基本配置 => 公众号开发信息，在这里记下开发者ID(AppID)，接着开通服务，记下开发者密码(AppSecret)，开发中会需要输入。
设置IP白名单，这里写的是自己的服务器IP地址，因为功能上线后，需要使用这台服务器，通过开发者ID和密码来向微信服务区获取自己服务的access_token
进行下面的后台项目，目的是让微信确定这个后台项目是你的，检验方法是微信发起一个get请求，你返回正确的返回值，启用此配置时调用：
1. url：接口地址，比如http://wx.my.com/forWx
2. Token：完全自定义的一个字符串，相当于个暗号，你的返回值需要这个字符串参与拼装。
3. EncodingAESKey：随机生成即可
4. 消息加解密方式：自选，这里我使用的是明文模式

有关前端项目的配置：

设置 => 公众号设置 => 功能设置 => JS接口安全域名在此处添加你的要使用微信sdk功能的网站的域名，比如wx.qq.com或者wx.qq.com/user，最多可写三个，且需要验证。

> 验证的方式，就是将一个微信提供的txt文件，放在此域名对应的放置于服务器中的web项目的访问根目录中，需要和主文件（大部分默认为```index.html```）放在同一级，当提交的时候，微信会进行访问，来获取文件，确认此域名是你的。

配置完成后，就可以进行开发了。

下面进入代码阶段。

证明后台项目和前端项目时我自己的

首先，上面证明服务是自己的部分，我们需要实现一个接口，我用http://wx.my.com/forWx打的比方，那么为了启用配置，我需要实现/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" rel="external nofollow" >
 <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="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous"></script>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>
<body>
 <div id="index">
 <div class="box">
  <div class="initOauth2" type="snsapi_base">获取微信授权(静默)</div>
  <div class="initOauth2" 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 = 'http://wxtestapi.junlli.com'

 // 获取 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 .initOauth2').on('click', function() {
 wxInitOauth2($(this).attr('type'))
 })
 // 初始化 微信授权
 wxInitOauth2 = type => {
 let url = window.location.origin + window.location.pathname
 console.log('url', url)
 $.ajax({
  url: BASE_URL + '/getOauth2',
  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 = `https://api.weixin.qq.com/sns/oauth2/access_token?${qs.stringify(params)}`
 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 = `https://api.weixin.qq.com/sns/userinfo?${qs.stringify(params)}`
 return new Promise((resolve, reject) => {
 request(url, function (err, res, body) {
  if (res) {
  resolve(JSON.parse(body))
  } else {
  reject(err);
  }
 });
 })
}

// 获取微信授权 --- code
server.post('/getOauth2', (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 = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}${state ? '&state=' + state : ''}#wechat_redirect`
 res.send({ url });
 } catch (error) {
 res.send(error)
 }
})


// 获取用户个人信息
server.post('/getUserInfo', (req, res) => {
 try {
 let params = req.body
 let code = params.code
 // 先用 code 换取 openId 和 access_token
 getOpenIdAndAccessToken(code).then(obj => {
  // 用 openId 和 access_token 获取个人信息
  getUserInfo(obj).then(data => {
  res.send(data)
  }).catch(error => res.send(error))
 }).catch(error => res(error))
 } catch (error) {
 res.send(error)
 }
})

整体功能实现的步骤和具体代码如上，请酌情参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

node.js实现微信开发之获取用户授权

- Author -

千鸟语

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype PeriodicalExecuter对象学习

Jul 19 Javascript

js Math 对象的方法

Sep 01 Javascript

IE8下Jquery获取select选中的值post到后台报错问题

Jul 02 Javascript

jquery选择器需要注意的问题

Nov 26 Javascript

javascript动态添加checkbox复选框的方法

Dec 23 Javascript

chrome浏览器如何断点调试异步加载的JS

Sep 05 Javascript

mpvue中使用flyjs全局拦截的实现代码

Sep 13 Javascript

iview同时验证多个表单问题总结

Sep 29 Javascript

Vue 动态组件components和v-once指令的实现

Aug 30 Javascript

Vue实现渲染数据后控制滚动条位置(推荐)

Dec 09 Javascript

vue cli 3.0通用打包配置代码,不分一二级目录

Sep 02 Javascript

JavaScript实现优先级队列

Dec 06 Javascript

学习node.js 断言的使用详解

Mar 18 #Javascript

React 使用Hooks简化受控组件的状态绑定

Mar 18 #Javascript

JavaScript显式数据类型转换详解

Mar 18 #Javascript

浅谈js中的bind

Mar 18 #Javascript

node微信开发之获取access_token+自定义菜单

Mar 17 #Javascript

JavaScript中this用法学习笔记

Mar 17 #Javascript

通过JavaScript下载文件到本地的方法（单文件）

Mar 17 #Javascript