本篇重要报告，如安在微信中翻开自家页面后，弹窗要求用户受权，以便拿到用户的微信信息。
起首说一下，完成自定义分享信息的，从无到有的流程：
基础硬件效劳：
须要一个公网能够接见的有用域名：
- 购置域名，并备案，我是在阿里云购置的，备案须要十几个工作日。
- 购置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要求，你返回准确的返回值，启用此设置时挪用：- url：接口地点，比如
http://wx.my.com/forWx - Token：完整自定义的一个字符串，相当于个暗号，你的返回值须要这个字符串介入拼装。
- EncodingAESKey：随机天生即可
- 音讯加解密体式格局：自选，这里我运用的是明文形式
- url：接口地点，比如
-
有关前端项目标设置：
-
设置 => 民众号设置 => 功用设置 => 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：要带到新页面的参数
- appId：本身的
- 前端拿到后端拼好的这个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="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)
}
})团体功用完成的步骤和详细代码如上，请酌情参考。
