How to develop a WeChat applet to obtain users' personal information-JS Tutorial-php.cn

How to develop a WeChat applet to obtain users' personal information

php中世界最好的语言

Release： 2018-03-23 10:13:45

Original

6017 people have browsed it

This time I will show you how to develop a WeChat applet to obtain users' personal information. What are the precautions for developing a WeChat applet to obtain users' personal information? The following is a practical case, let's take a look.

Recently I am studying how to play WeChat mini programs. After contacting it, I found many pitfalls.

For example, in a browser we can get the DOM object of the page through document.getElementById. However, the DOM object cannot be obtained in the WeChat applet. document.getElementById() directly reports an error getElementById not function. I am also drunk. Without support for this many interesting features cannot be implemented.

Getting back to business, let me talk about my thoughts on obtaining user information.

There are two options for obtaining user information.

1. A json object that does not contain sensitive information openId (including basic information such as nickname, avatarUrl, etc.)
2. Contains basic information of sensitive information openId.

The first acquisition scheme

1. First call the wx.login() interface to allow user authorization verification, which is what we observe with the naked eye. Are you sure about xxxxx? Authorize this information.

2. After the user is successfully authorized, call the wx.getUserInfo() interface to obtain user information.

The complete code is as follows

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

Copy after login

The second type is more complicated and requires interaction with the background to obtain userInfo, but the data obtained by this solution is complete (including openId).

1. Call the wx.login() interface to authorize the parameter

of the success function to include code. 2. Call the wx.getUserInfo() interface success function, which contains encryptedData and iv
3. Pass the above parameters to the background for analysis and generate userInfo

The code is as follows

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);
   });
   }
  })
  }
 }
 })

Copy after login

Backend analysis

/**
 * 获取粉丝信息
 * 其中的参数就是前端传递过来的
 */
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数据
}

Copy after login

getUserInfo function where wxBizDataCrypt.php is the material package officially provided by WeChat

curlHttp function is a custom function. For the source code of this function, check out my article 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;
 }
}

Copy after login

My own small tool 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);
 }
};

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!