在我们开发小程序的时候,需要通过授权获取用户的信息。

第一种使用wx.getUserInfo直接获取微信头像,昵称

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0:未知、1:男、2:女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})

  

第二种方式使用wx.login()

这种方式即将被放弃,目前使用比较多的是的wx.login()。因为直接使用wx.getUserInfo是不能获取更多的信息的,如微信用户的openid。 官方提示,需要发送获取到的code进行请求到微信的后端API。根据文档,只需要进行一个get请求到如下地址即可:
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_codeappid和secret在微信小程序后台可以看到,
js_code为使用wx.login登录时获取到的code参数数据,grant_type这个不用改动。

官方推荐

在login获取到code,然后发送到开发者后端,后端再通过接口去微信后端换取到openid和sessionKey之后,然后把session返回给前端,就已经完成登录行为。而login行为是静默,不必授权的,不会对用户造成骚扰。getUserInfo只是为了提供更优质的服务而存在,比如展示头像昵称,判断性别,通过unionId和其他公众号上已有的用户画像结合起来提供历史数据。所以不必在刚刚进入小程序的时候就强制要求授权。相关代码如下所示。

JS代码
var userInfo= (wx.getStorageSync('userInfo'))
if (userInfo) {
wx.getUserInfo({
success: function (res) {
that.setData({
nickName: res.userInfo.nickName,
avatarUrl: res.userInfo.avatarUrl,
})
},
fail: function () {
console.log("获取失败!")
},
complete: function () {
console.log("获取用户信息完成!")
}
})
} else {
wx.login({
success: function (res) {
console.log(res.code)
if (res.code) {
wx.getUserInfo({
withCredentials: true,
success: function (res_user) {
wx.request({
//后台接口地址
url: 'https://xxxx.com/wx/login',
data: {
code: res.code
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
userInfo: res.errMsg.userInfo
})
wx.setStorageSync('userInfo', res.data.userInfo); }
})
}, fail: function () {
wx.showModal({
title: '警告通知',
content: '您点击了拒绝授权,将无法正常显示个人信息,点击确定重新获取授权。',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
if (res.authSetting["scope.userInfo"]) {////如果用户重新同意了授权登录
wx.login({
success: function (res_login) {
if (res_login.code) {
wx.getUserInfo({
withCredentials: true,
success: function (res_user) {
wx.request({
url: 'https://xxxx.com/wx/login',
data: {
code: res_login.code
},
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function (res) {
that.setData({
userInfo: res.errMsg.userInfo })
wx.setStorageSync('userInfo', res.errMsg.userInfo);
}
})
}
})
}
}
});
}
}, fail: function (res) { }
}) }
}
})
}, complete: function (res) { }
})
}
}
}) }
},
//globalData建议放在app.js,方便统一管理
globalData: {
userInfo: null
}

  后端代码

由于我的后端是PHP写的,用的是thinkphp5框架,框架地址:https://www.kancloud.cn/manual/thinkphp5/118003

 /**
* 小程序登录
* @return array
*/
public function login() { $code = input('post.code'); //这是从前端传过来的code
$userInfo = input('post.userInfo');
$info = json_decode($userInfo, true);
$user = $info['userInfo'];
$memberModel = model('Member');
$appid = "小程序的appid"; //一定要是小程序的appid,不是微信公众号的appid
$secret = "小程序的secret";
$url = "https://api.weixin.qq.com/sns/jscode2session?appid=". $appid."&secret=".$secret."&js_code=" . $code . "&grant_type=authorization_code";
//初始化curl
$ch = curl_init($url);
//3.设置参数
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);//跳过证书验证
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
$res = curl_exec($ch);
if(curl_errno($ch)){
var_dump(curl_error($ch));
}
$resArr = json_decode($res,1);
$data = array();
curl_close($ch);
$mapData = array(); //这里我把用户的信息保存起来,方便下次调用,数据库结构我们在下面会介绍
if (!empty($resArr['openid'])) {
$res = $memberModel->checkMember($resArr['openid']);
Log::write('用户信息:' . $memberModel->getLastSql());
if ($res) {
$mapData['userInfo'] = $res;
$mapData['session_key'] = $resArr['session_key'];
return $this->resMap(200, $mapData, $mapData);
} else {
$data['nickName'] = $user['nickName'];
$data['avatarUrl'] = $user['avatarUrl'];
$data['m_province'] = $user['province'];
$data['m_city'] = $user['city'];
$data['m_gender'] = $user['gender'];
$data['m_language'] = $user['language'];
$data['signature'] = $info['signature'];
$data['iv'] = $info['iv'];
$data['m_uuid'] = showUuid();
$data['m_openid'] = $resArr['openid'];
$data['m_country'] = $resArr['country'];
$data['m_ip'] = GetIP();
$data['m_createtime'] = getDateTime(1);
$memberModel->addOne($data);
$mapData['userInfo'] = $data;
$mapData['session_key'] = $resArr['session_key'];
return $this->resMap(200, $mapData, $mapData);
}
} else {
return $this->resMap(4002, '登录失败', '登录失败');
}
} /**
* 返回提示信息
* @param $code string 错误码 4001 空值 4002 格式不正确 4003 长度 4004 提示 200正确放回 ,0失败
* @param $msg string 错误描述
* @param $data string 返回值
* @return array
*/
public function resMap($code, $msg, $data)
{
$map = array();
$map['errMsg'] = $msg;
$map['data'] = $data;
$map['errCode'] = $code;
return json($map);
}

  以上就是核心代码,希望对大家有用。在上面,我们需要保存用户的信息,因此我们需要数据库表,下面就谈到表的设计。

用户表的设计

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `system_member`
-- ----------------------------
DROP TABLE IF EXISTS `system_member`;
CREATE TABLE `system_member` (
`m_id` INT(11) NOT NULL AUTO_INCREMENT,
`nickName` VARCHAR(50) DEFAULT NULL COMMENT '用户昵称',
`avatarUrl` VARCHAR(255) DEFAULT NULL COMMENT '头像',
`m_province` VARCHAR(40) DEFAULT NULL COMMENT '省份',
`m_city` VARCHAR(50) DEFAULT NULL COMMENT '城市',
`m_name` VARCHAR(30) DEFAULT NULL COMMENT '真实姓名',
`m_gender` TINYINT(1) DEFAULT '3' COMMENT '用户性别(1、男 2、女 3、未知)',
`m_createtime` DATETIME DEFAULT NULL COMMENT '创建时间',
`m_country` VARCHAR(100) DEFAULT NULL COMMENT '国家',
`m_language` VARCHAR(50) DEFAULT NULL COMMENT '语言',
`m_openid` VARCHAR(50) DEFAULT NULL COMMENT 'openID',
`m_ip` VARCHAR(15) DEFAULT NULL COMMENT 'IP',
`m_mobile` VARCHAR(20) DEFAULT NULL COMMENT '手机号码',
`m_uuid` VARCHAR(50) DEFAULT NULL,
`m_username` VARCHAR(50) DEFAULT NULL COMMENT '用户名',
`m_pwd` VARCHAR(50) DEFAULT NULL COMMENT '密码',
`session_key` VARCHAR(255) DEFAULT NULL COMMENT '会话密钥',
`unionid` VARCHAR(255) DEFAULT NULL COMMENT '用户在开放平台的唯一标识符',
`signature` VARCHAR(255) DEFAULT NULL,
`iv` VARCHAR(255) DEFAULT NULL,
`k_id` VARCHAR(50) DEFAULT NULL,
`k_openid` VARCHAR(80) DEFAULT NULL,
PRIMARY KEY (`m_id`)
) ENGINE=INNODB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='获取用户小程序信息';

  以上就是获取用户信息的完整流程,下面我们附上一张用户登录的流程图。

如果大家有什么不明白的地方,可以加入我们的微信交流群:731568857,里面有很多技术资源。或者关注我们的微信公众号。

JS代码var userInfo= (wx.getStorageSync('userInfo'))        if (userInfo) {          wx.getUserInfo({            success: function (res) {              that.setData({                nickName: res.userInfo.nickName,                avatarUrl: res.userInfo.avatarUrl,              })            },            fail: function () {              console.log("获取失败!")            },            complete: function () {              console.log("获取用户信息完成!")            }          })        } else {          wx.login({            success: function (res) {              console.log(res.code)              if (res.code) {                wx.getUserInfo({                  withCredentials: true,                  success: function (res_user) {                    wx.request({                     //后台接口地址                      url: 'https://xxxx.com/wx/login',                      data: {                        code: res.code                      },                      method: 'GET',                      header: {                        'content-type': 'application/json'                      },                      success: function (res) {                        that.setData({                          userInfo: res.errMsg.userInfo                        })                        wx.setStorageSync('userInfo', res.data.userInfo);
                      }                    })                  }, fail: function () {                    wx.showModal({                      title: '警告通知',                      content: '您点击了拒绝授权,将无法正常显示个人信息,点击确定重新获取授权。',                      success: function (res) {                        if (res.confirm) {                          wx.openSetting({                            success: (res) => {                              if (res.authSetting["scope.userInfo"]) {////如果用户重新同意了授权登录                                wx.login({                                  success: function (res_login) {                                    if (res_login.code) {                                      wx.getUserInfo({                                        withCredentials: true,                                        success: function (res_user) {                                          wx.request({                                           url: 'https://xxxx.com/wx/login',                                            data: {                                              code: res_login.code                                             },                                            method: 'GET',                                            header: {                                              'content-type': 'application/json'                                            },                                            success: function (res) {                                              that.setData({                                                userInfo: res.errMsg.userInfo
                                              })                                              wx.setStorageSync('userInfo', res.errMsg.userInfo);                                            }                                          })                                        }                                      })                                    }                                  }                                });                              }                            }, fail: function (res) {
                            }                          })
                        }                      }                    })                  }, complete: function (res) {
                  }                })              }            }          })
        }  },//globalData建议放在app.js,方便统一管理  globalData: {       userInfo: null  }

微信授权获取用户openId等信息的更多相关文章

  1. 微信授权获取用户openid前端实现

    近来,倒霉的后台跟我说让我拿个openid做微信支付使用,寻思很简单,开始干活.   首先引导用户打开如下链接,只需要将appid修改为自己的就可以,redirect_url写你的重定向url   h ...

  2. 微信公众号网页授权获取用户openid

    最近一个项目是在微信公众号内二次开发,涉及到微信公众号支付,根据文档要求想要支付就必须要获取到用户的openid. 这是微信官方文档https://mp.weixin.qq.com/wiki?t=re ...

  3. 微信接口-获取用户openid基本信息

    一.协助获取微信用户openid功能 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri= ...

  4. 微信授权获取code/openid

    微信网页授权 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域名的说明 1.在微信公众号请求用户网页授权之前,开发者需要 ...

  5. 微信h5静默和非静默授权获取用户openId和用户信息的方法和步骤:

    原文链接:https://blog.csdn.net/qq_35430000/article/details/79299529 一.openId是什么?openId是用户在当前公众号下的唯一标识('身 ...

  6. 微信网页授权获取用户openid及用户信息

    $code = $_GET["code"];//获取code $appid=“xxxx”;//公众号appid $APPSECRET="xxx";//公众号ap ...

  7. 微信公众号订阅号以及服务号通过网页授权获取用户openid方法

    微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 官方流程 网页授权流程分为四步: 1.引导用户 ...

  8. 微信开发获取用户OpenID

    第一次开发微信版网页,对最重要的获取微信OpenId,特此记录下来 1.首先得有appid和appsecret . public class WeiXin { public static string ...

  9. MVC 微信开发获取用户OpenID

    第一次开发微信版网页,对最重要的获取微信OpenId,特此记录下来 1.首先得有appid和appsecret . public class WeiXin { public static string ...

随机推荐

  1. Windows环境下C++中关于文件结束符的问题

    参考资料:http://www.cnblogs.com/day-dayup/p/3572374.html 一.前言 在不同的OS环境下,程序中对应的文件结束符有所不一样,根据<C++ Prime ...

  2. 引擎设计跟踪(九.14.3) deferred shading 准备

    目前做的一些准备工作 1.depth prepass for forward shading. 做depth prepass的原因是为了完善渲染流程, 虽然架构上支持多个pass, 但实际上从来没有测 ...

  3. day05 模块学习

    目录 1.模块简介 2.collections模块常见方法 3.random模块 4.time模块 5.pickle模块 6.json模块 7.os模块 8.sys模块 9.正则表达式 10.re模块 ...

  4. day02 格式化字符串

    字符格式化2019-04-01 方法一 通过f + {} 格式化字符串 name = input("Name: ")age = input("Age:")sco ...

  5. 通过企业微信API接口发送消息

    最近给公司测试组内部开发一个记账小工具,当账目出现问题的时候需要发送消息通知大家,前期主要采用的QQ发送通知消息,但是有一天突然无法连接到QQ服务器,运维的同学建议采用微信的方式对接然后进行告警,所以 ...

  6. 开发系统app所遇到的问题及解决

    1. 在源码环境中编译app时(使用mmm编译需要根据app写好Android.mk文件)遇到如下问题 error: Resource at colorPrimary appears in overl ...

  7. 使用LAP数据集进行年龄训练及估计

    一.背景 原本是打算按<DEX Deep EXpectation of apparent age from a single image>进行表面年龄的训练,可由于IMDB-WIKI的数据 ...

  8. 关于UI自动化中元素定位常用方法的个人总结

    1.如果目标元素有id属性,优先使用id定位: 2.元素locator尽可能保证简洁,考虑locator中路径的变化频率,尽量减少后期更新和维护成本: 3.使用xpath时,不要一味的使用‘/’逐层进 ...

  9. IMU(LPMS-B2) ROS下使用教程

    一.基本信息 http://www.alubi.cn/lpms-b2/ 安装ros教程 http://wiki.ros.org/lpms_imu https://lp-research.com/ros ...

  10. 使用COM打开Excel文档注意事项

    本文主要讲解程序中打开Excel文档,读写Excel文档可以参照前章: C#读写Excel实践笔记 C#使用NPOI读写Excel的注意事项 如果只是单纯的打开Excel文档,建议使用: System ...