Heim > Artikel > Web-Frontend > So verwenden Sie node.js, um die WeChat-Benutzerautorisierung zu erhalten (Code im Anhang)
Der Inhalt dieses Artikels befasst sich mit der Verwendung von node.js, um eine WeChat-Benutzerautorisierung (mit Code) zu erhalten. Ich hoffe, dass dies der Fall ist Dir helfen.
In diesem Artikel wird hauptsächlich beschrieben, wie Sie Ihre eigene Seite in WeChat öffnen und ein Fenster öffnen, in dem Sie eine Benutzerautorisierung anfordern, um die WeChat-Informationen des Benutzers zu erhalten.
Lassen Sie uns zunächst über den Prozess von Grund auf sprechen, um benutzerdefinierte Freigabeinformationen zu vervollständigen:
Grundlegender Hardwaredienst:
Erfordert einen gültigen Domänennamen, auf den zugegriffen werden kann öffentliches Netzwerk:
Den Domainnamen kaufen und registrieren. Ich habe ihn bei Alibaba Cloud gekauft. Der Registrierungsprozess dauert mehr als zehn Werktage.
Kaufen Sie eine IP, legen Sie dann den Domänennamen oben fest und lösen Sie ihn in die IP auf. Dies kann ignoriert werden.
Haben Sie einen eigenen Server, um Ihre eigenen Seitenprojekte zu speichern:
Ich kaufe den Server immer noch von Alibaba Cloud. Dies ist der teuerste, mit ein paar hundert Yuan für das Nutzungsrecht pro Jahr.
Außerdem ist dieser Server im Wesentlichen ein Computer, und ein Computer verfügt gerade über Konfigurationen, die ich gerade selbst lerne, und die Konfiguration ist fast die niedrigste. Außerdem verfügt das Paket, das ich gekauft habe, über eine öffentliche IP Adresse, damit ich eine Verbindung herstellen kann. Das oben genannte Geld für den IP-Kauf wird ebenfalls gespart.
Zusammenfassend lässt sich sagen, dass ich am Ende nur einen Domainnamen und einen Server mit einer öffentlichen IP-Adresse gekauft habe. Der Server wird zum Platzieren von Front-End-Projekten und Back-End-Projekten verwendet.
Alibaba Cloud ECS: https://cn.aliyun.com/product/ecs
Öffentliche WeChat-Plattform, Entwicklerzertifizierung
Offene öffentliche WeChat-Plattform https:// mp .weixin.qq.com/, verwenden Sie E-Mail, um sich zu registrieren. Beachten Sie, dass mit einer E-Mail nur ein Konto für die öffentliche WeChat-Plattform registriert werden kann und dass ein Konto nur eine Kontokategorie auswählen und nicht geändert werden kann. Sie müssen hier vorsichtig sein und ein Abonnementkonto auswählen Hier.
Sie können zwischen persönlichem Typ, Unternehmenstyp usw. wählen. Unter diesen verfügt der persönliche Typ nicht über gemeinsame Anpassungsfunktionen, aber ich treffe den Unternehmenstyp nicht. . . Am Ende habe ich mich für den persönlichen Typ entschieden, denn auch wenn mein Konto keine Berechtigungen hat, gibt es im öffentlichen WeChat-Konto ein voll funktionsfähiges Testkonto. Sie können das Testkonto zum Lernen und Testen verwenden, was immer noch kein Problem ist.
Geben Sie die Informationen ein, binden Sie WeChat ein, schließen Sie die Registrierung ab und melden Sie sich an.
Um die Entwicklung durchzuführen, müssen Sie hier die entsprechende Konfiguration mit Ihrem Backend-Projekt und Frontend-Projekt konfigurieren und WeChat bestätigen lassen, dass das Backend-Projekt und das Frontend-Projekt Ihnen gehören, bevor Sie Dienste bereitstellen.
Konfiguration von serverseitigen und Backend-Projekten:
Zunächst muss erklärt werden, dass das Abonnementkonto, da es relativ wenige Funktionen hat, empfohlen wird, wenn Sie gerade erst lernen Wählen Sie die Verwendung in der Entwicklung => Entwicklertools Das Testkonto für die öffentliche Plattform wurde zum Lernen entwickelt, sodass der WeChat-Dienst mit vollem Funktionsumfang verwendet werden kann und die Konfiguration relativ klein ist.
Die folgenden Konfigurationsschritte sind alle erforderlich, um Ihr eigenes Konto zu verwenden
Entwicklung=> Basiskonfiguration=> Hier die Entwickler-ID (AppID) notieren und dann aktivieren Öffnen Sie den Dienst und notieren Sie sich das Entwicklerkennwort (AppSecret), das während der Entwicklung benötigt wird.
Legen Sie die IP-Whitelist fest. Hier wird die IP-Adresse Ihres eigenen Servers angegeben. Nachdem die Funktion online ist, müssen Sie diesen Server verwenden, um den Zugriffstoken Ihres eigenen Dienstes über den WeChat-Dienstbereich abzurufen Entwickler-ID und Passwort
Führen Sie das folgende Hintergrundprojekt aus, damit WeChat feststellen kann, dass dieses Hintergrundprojekt Ihnen gehört. Die Überprüfungsmethode besteht darin, dass WeChat eine Get-Anfrage initiiert und Sie bei dieser Konfiguration den richtigen Rückgabewert zurückgibt ist aktiviert, rufen Sie auf:
URL: Schnittstellenadresse, z. B. http://wx.my.com/forWx
Token: eine vollständig angepasste Zeichenfolge, äquivalent zu einem Passwort erfordert, dass diese Zeichenfolge an der Assembly teilnimmt.
EncodingAESKey: Zufällig generiert
Nachrichtenverschlüsselungs- und -entschlüsselungsmethode: optional, hier verwende ich den Klartextmodus
Konfiguration des Front-End-Projekts:
Einstellungen => Offizielle Kontoeinstellungen=> JS-Schnittstellensicherheitsdomänenname Fügen Sie hier den Domänennamen der Website hinzu, für die Sie die WeChat SDK-Funktion verwenden möchten, z. B. wx.qq.com/ Benutzer, Sie können bis zu drei Einträge verfassen, eine Verifizierung ist erforderlich.
> Die Überprüfungsmethode besteht darin, eine von WeChat bereitgestellte TXT-Datei im Zugriffsstammverzeichnis des Webprojekts abzulegen, das auf dem Server liegt, der diesem Domänennamen entspricht. Sie muss mit der Hauptdatei kombiniert werden (meistens). Der Standardwert ist „index.html“) auf derselben Ebene. Bei der Übermittlung greift WeChat darauf zu, um die Datei abzurufen und zu bestätigen, dass dieser Domainname Ihnen gehört.
Nachdem die Konfiguration abgeschlossen ist, kann die Entwicklung beginnen.
Betreten Sie nun die Codephase.
Beweisen Sie, dass das Backend-Projekt und das Front-End-Projekt meine eigenen sind
Das Obige beweist zunächst, dass der Dienst ein eigener Teil ist. Wir müssen eine Schnittstelle implementieren, die ich verwende http://wx.my.com/ Am Beispiel von forWx muss ich /forWx implementieren, um WeChat aufzurufen. Das Folgende ist der Code:
Die grundlegende Umgebungskonstruktion des Knotens Hier werden nur die internen Methoden der Schnittstelle geschrieben.
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')
}
})
Das Obige soll beweisen, dass der Server mir gehört. Das Endprojekt gehört mir. Ich werde dies überspringen, weil es zu einfach ist. Laden Sie die Datei einfach herunter und legen Sie sie auf Ihrem eigenen Server ab. Für das Front-End-Projekt kann sich die Datei oben befinden Operationen sind die notwendigen Schritte und die Grundlage für alles, wenn Sie öffentliche WeChat-Seiten entwickeln möchten.
首先顺着功能使用流程，顺一下实现此功能的方法：
用户在微信打开页面后，立即或者通过方法触发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="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)
}
})
整体功能实现的步骤和具体代码如上，请酌情参考。
Das obige ist der detaillierte Inhalt vonSo verwenden Sie node.js, um die WeChat-Benutzerautorisierung zu erhalten (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!