ホームページ > 記事 > ウェブフロントエンド > Node.jsを使用してWeChatユーザー認証を取得する方法（コード添付）
Node.jsを使用してWeChatユーザー認証を取得する方法（コード添付）
- 不言転載
- 2019-03-18 11:27:282795ブラウズ
この記事の内容は、node.js を使用して WeChat のユーザー認証を取得する方法 (コード付き) に関するもので、一定の参考値があります。必要な友人が参考にしていただければ幸いです。助けます。
この記事では主に、WeChat で自分のページを開き、ユーザーの WeChat 情報を取得するためにユーザーの承認を要求するウィンドウをポップアップする方法について説明します。
まず最初に、カスタム共有情報を完了するまでのプロセスについて説明します。
基本的なハードウェア サービス:
パブリック ネットワーク:
ドメイン名を購入して登録します。Alibaba Cloud から購入しました。登録プロセスには 10 営業日以上かかります。
IP を購入し、上記のドメイン名を設定して IP に解決します。この時間は無視できます。
独自のページ プロジェクトを保存するための独自のサーバーを用意します:
私は今でも Alibaba Cloud からサーバーを購入しています。これが最も高価で、使用する権利に数百元かかります。一年。
そして、このサーバーは本質的にはコンピューターであり、構成があります。私は現在、自分で使い方を学んでいるところですが、構成はほぼ最低のものです。さらに、購入したパッケージにはパブリック ネットワーク IP が付属しています。上記のIPを購入するためのお金も節約できます。
結論から言うと、最終的に購入したのは、フロントエンド プロジェクトとバックエンド プロジェクトを配置するために使用する、ドメイン名とパブリック IP アドレスを持つサーバーだけです。
Alibaba Cloud ECS: https://cn.aliyun.com/product/ecs
WeChat パブリック プラットフォーム、開発者認定
WeChat パブリック プラットフォームを開く https:// mp.weixin.qq.com/、電子メールを使用して登録します。1 つの電子メールで登録できるのは 1 つの WeChat パブリック プラットフォーム アカウントのみであり、1 つのアカウントは 1 つのアカウント カテゴリのみを選択でき、変更できないことに注意してください。ここでは注意してサブスクリプションを選択する必要がありますここのアカウント。
オプションのパーソナルタイプ、エンタープライズタイプなど このうちパーソナルタイプは共通のカスタマイズ機能がありませんが、エンタープライズタイプには合いません。 。 。最終的に個人タイプを選択したのは、自分のアカウントに権限がなくても、WeChat パブリックアカウントに完全に機能するテストアカウントがあり、学習やテストに使用できるので、それでも問題ありません。
情報を入力し、WeChat をバインドし、登録を完了してログインします。
開発を実行するには、ここでバックエンド プロジェクトとフロントエンド プロジェクトに対応する構成を構成し、バックエンド プロジェクトとフロントエンド プロジェクトが自分のものであることを WeChat に確認させる必要があります。サービスを提供する前に。
サーバーサイドおよびバックエンドプロジェクトの構成:
まず、サブスクリプションアカウントには比較的機能が少ないため、学習中の場合は、サブスクリプションアカウントを使用することをお勧めします。開発者ツールで使用することを選択します=> パブリック プラットフォーム テスト アカウントは学習用に開発されているため、フル機能の WeChat サービスを使用でき、構成は比較的小規模です。
次の設定手順はすべて、自分のアカウントを使用するために必要です
Development=> 基本設定=> 公式アカウントの開発情報、ここに開発者 ID (AppID) を書き留めて有効化しますサービスにアクセスし、開発中に必要となる開発者パスワード (AppSecret) を書き留めます。
IP ホワイトリストを設定します。ここに書かれているのは自分のサーバーの IP アドレスです。機能がオンラインになった後、このサーバーを使用して WeChat サービス エリアから自分のサービスの access_token を取得する必要があります。開発者 ID とパスワード
このバックグラウンド プロジェクトがあなたのものであることを WeChat に判断させるために、次のバックグラウンド プロジェクトを実行します。検証方法は、WeChat が get リクエストを開始し、正しい戻り値が返されることです。この設定が行われると、が有効な場合、呼び出し:
url: http://wx.my.com/forWx
などのインターフェイス アドレス: 完全にカスタマイズされた文字列 (パスワードに相当)。この文字列がアセンブリに参加する必要があります。
EncodingAESKey: ランダムに生成された
メッセージの暗号化と復号化の方法: オプション、ここではプレーン テキスト モードを使用します
フロントエンド プロジェクトの構成:
設定=> パブリックアカウント設定=> 機能設定=> JS インターフェースセキュリティドメイン名 ここに、wx.qq.com や wx.qq など、WeChat SDK 機能を使用する Web サイトのドメイン名を追加します。 com/user、エントリは 3 つまで書き込めますが、検証が必要です。
> 検証方法は、このドメイン名に対応するサーバー上に配置されたWebプロジェクトのアクセスルートディレクトリに、WeChatが提供するtxtファイルを配置し、メインファイル(ほとんどの場合)と組み合わせる必要があります。デフォルトは同じレベルの「index.html」です。送信されると、WeChat はファイルにアクセスしてファイルを取得し、このドメイン名があなたのものであることを確認します。
構成が完了したら、開発を開始できます。
次に、コード段階に入ります。
バックエンド プロジェクトとフロントエンド プロジェクトの私自身の証明
まず第一に、上記はサービスがそれ自身の部分であることを証明します。インターフェイスを実装する必要があります。私は http:/ を使用します。 /wx.my.com/ forWx を例として、設定を有効にするには、WeChat を呼び出すために /forWx を実装する必要があります。コードは次のとおりです:
ノードの基本的な環境構築は省略されています。ここにはインターフェイスの内部メソッドのみが書かれています。キーはパラメータ暗号化アセンブリ
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')
}
})
Completed、上記はサーバーが私のものであることを証明するためのもので、後でフロントエンド プロジェクトが私のものです。簡単すぎるので省略します。ファイルをダウンロードして自分のサーバーに置くだけです。フロントエンド プロジェクトは、index.html と同じレベルにすることができます。
上記の操作は必要です。 WeChat 公開ページを開発する場合の手順とすべての基礎。
首先顺着功能使用流程，顺一下实现此功能的方法：
用户在微信打开页面后，立即或者通过方法触发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)
}
})
整体功能实现的步骤和具体代码如上，请酌情参考。
以上がNode.jsを使用してWeChatユーザー認証を取得する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。