詳細な手順は次のとおりです。
-
WeChat オープン プラットフォーム上でアプリケーションを作成し、対応する AppID を取得します。
-
WeChat JS-SDK を Web サイトに導入するには、次の方法で導入できます。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- ページが読み込まれたら、WeChat JS-SDK を初期化し、AppID を使用して構成します。設定パラメータはバックグラウンド インターフェイスを通じて取得でき、フロントエンドで設定できます。
// 后台接口返回的配置参数
const wxConfig = {
appId: 'your-app-id',
timestamp: 'your-timestamp',
nonceStr: 'your-noncestr',
signature: 'your-signature',
};
// 初始化微信 JS-SDK
wx.config({
...wxConfig,
jsApiList: ['checkJsApi', 'login', 'getUserInfo'], // 需要使用的微信 API 列表
});
このうち、timestamp、 、nonceStrはsignatureバックグラウンド インターフェイスを通じて取得され、WeChat JS-SDK の署名を検証するために使用されます。
- WeChat ログイン認証をトリガーするボタンをページに追加します。
<button id="loginBtn">微信登录</button>
- ボタンのクリック イベントで、WeChat JS-SDK のメソッドを呼び出して、
wx.loginWeChat ログインを承認します。
document.querySelector('#loginBtn').addEventListener('click', function() {
wx.login({
success: function(res) {
if (res.code) {
// 使用 res.code 发起后台接口请求，获取用户的 openid 和 access_token
// 可以将 res.code 发送到后台，后台通过调用微信接口获取用户的 openid 和 access_token
// 然后可以根据 openid 进行用户登录或注册操作
} else {
console.log('登录失败：' + res.errMsg);
}
}
});
});
wx.loginメソッドのコールバック関数では、取得に成功するとバックグラウンドに送信res.codeでき、バックグラウンドはres.codeWeChat インターフェイスを呼び出すことでopenidユーザーの を取得しaccess_token、それopenidに基づいてユーザーのログインまたは登録操作を実行できます。
- ユーザーの詳細情報を取得する必要がある場合は、ログインが成功した後に
wx.getUserInfoメソッドを呼び出してユーザー情報を取得できます。
wx.getUserInfo({
success: function(res) {
const userInfo = res.userInfo;
// 可以将用户信息发送到后台进行处理
}
});
上記は、H5 開発 Web サイトに WeChat ログイン認証を実装するための詳細な手順です。なお、WeChatのログイン認証はWeChatの内部環境で行う必要があるため、非WeChat環境ではWeChatのログイン認証機能が正常に利用できない場合があります。さらに、WeChat の最新のポリシー要件によれば、ユーザーのプライバシーを保護するために、ユーザー情報の暗号化をバックグラウンド インターフェイスで実行する必要があります。