ユーザーの個人情報を取得する WeChat アプレットを開発する方法

今回は、ユーザーの個人情報を取得するための WeChat アプレットを開発する方法を説明します。 ユーザーの個人情報を取得するための WeChat アプレットを開発するときの 注意事項 について、実際のケースを見てみましょう。

最近、WeChatミニプログラムの使い方を勉強しています。連絡してみると、落とし穴がたくさんありました。

たとえば、ブラウザでは document.getElementById を通じてページの DOM オブジェクトを取得できます。ただし、WeChat アプレットでは DOM オブジェクトを取得できません。 document.getElementById() は直接エラー getElementById not function を報告します。私も酔っています。これがサポートされていないと、多くの興味深い機能を実装できません。

本題に戻り、ユーザー情報の取得について私の考えを話させてください。

ユーザー情報を取得するには 2 つのオプションがあります。

1. 機密情報 openId を含まない json オブジェクト (ニックネーム、avatarUrl などの基本情報を含む)
2. 機密情報 openId などの基本情報が含まれます。

最初の取得ソリューション

1. まず、wx.login() インターフェースを呼び出して、ユーザー認証検証を許可します。これは、xxxxx を認証するかどうかを肉眼で観察するものです。

2. ユーザーが正常に認証されたら、wx.getUserInfo() インターフェースを呼び出してユーザー情報を取得します。

完全なコードは次のとおりです

wx.login({
 success:function(){
 wx.getUserInfo({
  success:function(res){
  var simpleUser = res.userInfo;
  console.log(simpleUser.nickName);
  }
 });
 }
});

2 番目のコードはより複雑で、userInfo を取得するためにバックグラウンドとの対話が必要ですが、このソリューションによって取得されるデータは完全です (openId を含む)。

1. wx.login() インターフェースを呼び出して、成功関数のパラメーター

にコードが含まれています。 2. encryptedData と iv を含む wx.getUserInfo() インターフェイスの成功関数を呼び出します 3. 上記のパラメーターをバックグラウンド分析に渡して userInfo を生成します

コードは次のとおりです

js

var request = require("../../utils/request.js");
wx.login({
 success:function(res_login){
  if(res_login.code)
  {
  wx.getUserInfo({
   withCredentials:true,
   success:function(res_user){
   var requestUrl = "/getUserApi/xxx.php";
   var jsonData = {
    code:res_login.code,
    encryptedData:res_user.encryptedData,
    iv:res_user.iv
    };
   request.httpsPostRequest(requestUrl,jsonData,function(res){
   console.log(res.openId);
   });
   }
  })
  }
 }
 })

バックエンド分析

/**
 * 获取粉丝信息
 * 其中的参数就是前端传递过来的
 */
public function wxUserInfo($code,$encryptedData,$iv)
{
 $apiUrl = "https://api.weixin.qq.com/sns/jscode2session?appid={$this->wxConfig['appid']}&secret={$this->wxConfig['appsecret']}&js_code={$code}&grant_type=authorization_code";
 $apiData = json_decode(curlHttp($apiUrl,true),true);
 if(!isset($apiData['session_key']))
 {
 echoJson(array(
  "code" => 102,
  "msg" => "curl error"
 ),true);
 }
 $userInfo = getUserInfo($this->wxConfig['appid'],$apiData['session_key'],$encryptedData,$iv);
 if(!$userInfo)
 {
 echoJson(array(
  "code" => 105,
  "msg" => "userInfo not"
 ));
 }
 //$userInfo = json_decode($userInfo,true);
 //载入用户服务
 //$userService = load_service("User");
 //$userService->checkUser($this->projectId,$userInfo);
 echo $userInfo; //微信响应的就是一个json数据
}

getUserInfo 関数 wxBizDataCrypt.php WeChat が公式に提供している素材パッケージです

curlHttp 関数はカスタム関数です。この関数のソース コードについては、私の記事を参照してください。curlHttp

//获取粉丝信息
function getUserInfo($appid,$sessionKey,$encryptedData,$iv){
 require_once ROOTPATH . "/extends/wxUser/wxBizDataCrypt.php";
 $data = array();
 $pc = new WXBizDataCrypt($appid, $sessionKey);
 $errCode = $pc->decryptData($encryptedData, $iv, $data );
 if ($errCode == 0) {
 return $data;
 } else {
 return false;
 }
}

私が書いた小さなツール request.js です。

var app = getApp();
//远程请求
var httpsRequest = {
 //http 请求
 https_request : function(obj){
 wx.request(obj);
 },
 //文件上传
 upload_request : function(dataSource){
 wx.uploadFile(dataSource);
 }
};
module.exports = {
 //执行异步请求get
 httpsRequest:function(obj){
 var jsonUrl = {};
 jsonUrl.url = obj.url;
 if(obj.header)jsonUrl.header=obj.header;
 if(obj.type)
  jsonUrl.method = obj.type;
 else
  jsonUrl.method="GET";
 if(obj.data)jsonUrl.data = obj.data;
 obj.dataType?(jsonUrl.dataType=obj.dataType):(jsonUrl.dataType="json");
 jsonUrl.success = obj.success;
 jsonUrl.data.projectId = app.globalData.projectId;
 httpsRequest.https_request(jsonUrl);
 },
 //get 请求
 httpsGetRequest:function(req_url,req_obj,res_func)
 {
 var jsonUrl = {
  url:app.globalData.host + req_url,
  header:{"Content-Type":"application/json"},
  dataType:"json",
  method:"get",
  success:function(res)
  {
  typeof res_func == "function" && res_func(res.data);
  }
 }
 if(req_obj)
 {
  jsonUrl.data = req_obj;
 }
 jsonUrl.data.projectId = app.globalData.projectId;
  httpRequest.https_request(jsonUrl);
 },
 //post 请求
 httpsPostRequest:function(req_url,req_obj,res_func)
 {
 var jsonUrl = {
  url:app.globalData.host + req_url,
  header:{"Content-Type":"application/x-www-form-urlencoded"},
  dataType:"json",
  method:"post",
  success:function(res)
  {
  typeof res_func == "function" && res_func(res.data);
  }
 }
 if(req_obj)
 {
  jsonUrl.data = req_obj;
 }
 jsonUrl.data.projectId = app.globalData.projectId;
  httpsRequest.https_request(jsonUrl);
 },
 //文件上传
 httpsUpload:function(uid,fileDataSource,res_func)
 {
 dataSource = {
  url:app.globalData.host + req_url,
  header:{
  "Content-Type":"multipart/form-data"
  },
  dataType:"json",
  formData : {
  "uid" : uid
  },
  filePath : fileDataSource,
  name : "fileObj",
  success:function(res){
  typeof res_func == "function" && res_func(res);
  }
 }
 httpsRequest.upload_request(dataSource);
 }
};

この記事の事例を読んだ後、あなたはそれをマスターしたと思います。方法、さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

360ブラウザ互換モードで不完全なページ表示に対処する方法

傾きと回転のアニメーション効果を実現するCSS3

インラインブロック要素のデフォルトの間隔をクリアする

以上がユーザーの個人情報を取得する WeChat アプレットを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。