微信小程序开发(一) 微信登录流程详解


Posted in Javascript onJanuary 11, 2017

最近在研究微信小程序开发,非常有意思的一个东西。花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码。

做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项目分为小程序和 后台PHP代码两部分来讲。

微信小程序开放平台

先从我们的小程序代码开始

微信小程序开发(一) 微信登录流程详解

简单的说一下我们小程序的js代码登录流程

login ->获取code ->getUserInfo获取iv和encryptedData ->传给自己的服务器处理 ->返回给小程序结果

var API_URL = "自己的服务器地址";
Page({
 onLoad: function () {
 console.log("iv");
 wx.login({//login流程
 success: function (res) {//登录成功
 if (res.code) {
 var code = res.code;
 wx.getUserInfo({//getUserInfo流程
 success: function (res2) {//获取userinfo成功
 console.log(res2);
 var encryptedData = encodeURIComponent(res2.encryptedData);//一定要把加密串转成URI编码
  var iv = res2.iv;
  //请求自己的服务器
  Login(code,encryptedData,iv);
 }
 })

 } else {
 console.log('获取用户登录态失败!' + res.errMsg)
 }
 }
});
} 
})

code:服务器用来获取sessionKey的必要参数。

IV:加密算法的初始向量,encryptedData:加密过的字符串。

把code iv encryptedData 传递给我们的服务器

function Login(code,encryptedData,iv){ console.log('code='+code+'&encryptedData='+encryptedData+'&iv='+iv);
 //创建一个dialog
  wx.showToast({
  title: '正在登录...',
  icon: 'loading',
  duration: 10000
  });
  //请求服务器
  wx.request({
  url: API_URL,
  data: {
  code:code,
  encryptedData:encryptedData,
  iv:iv
  },
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {
  'content-type': 'application/json'
  }, // 设置请求的 header
  success: function (res) {
  // success
  wx.hideToast();
  console.log('服务器返回'+res.data);

  },
  fail: function () {
  // fail
  // wx.hideToast();
  },
  complete: function () {
  // complete
  }
  })
 }

看文档的话,应该知道,我们所需要的unionId就在encryptedData中,所以服务器需要这些信息来把unionId解析出来。

服务器处理逻辑

我php用的是laravel框架

先下载微信的解密demo

下载地址

微信小程序开发(一) 微信登录流程详解 

这里我选择的是PHP代码,把除了demo外的三个class文件,放入我们自己的项目,以后后面调用。

这里讲解一下服务器的处理流程:

通过微信的https://api.weixin.qq.com/sns/jscode2session接口获取seesionKey,然后在通过sessionKey和iv来解密encryptedData数据获取UnionID。

具体文档

/**
 * 登录
 * 
 * @return Response
 */
 public function weixinlogin( $user_id=null )
 {
  global $App_Error_Conf,$Gift_Ids,$Server_Http_Path,$Is_Local,$Test_User,$Good_Vcode,$WeiXin_Xd_Conf;
  $validator_result = input_validator(array('code','iv','encryptedData'));
  if(!empty($validator_result)){
   return response($validator_result);
  }
  $js_code = $_REQUEST['code'];
  $encryptedData = $_REQUEST['encryptedData'];
  $iv = $_REQUEST['iv'];
  $appid = $WeiXin_Xd_Conf['appid'];
  $secret = $WeiXin_Xd_Conf['secret'];
  $grant_type = $WeiXin_Xd_Conf['grant_type'];
  //从微信获取session_key
  $user_info_url = $WeiXin_Xd_Conf['code2session_url'];
  $user_info_url = sprintf("%s?appid=%s&secret=%s&js_code=%s&grant_type=%",$user_info_url,$appid,$secret,$js_code,$grant_type);
  $weixin_user_data = json_decode(get_url($user_info_url));
  $session_key = $weixin_user_data->session_key;
//解密数据
$data = '';
$wxBizDataCrypt = new WXBizDataCrypt($appid, $session_key);
$errCode=$wxBizDataCrypt>decryptData($appid,$session_key,$encryptedData, $iv, $data );

最后拿到的这个 data就是我们解密后的encryptedData里面会包含unionId。

这样简单登录就实现了!以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
JS鼠标滚动分页效果示例
Jul 05 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 #Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 #Javascript
You might like
如何利用PHP执行.SQL文件
2013/07/05 PHP
curl和libcurl的区别简介
2015/07/01 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python构造函数及解构函数介绍
2015/02/26 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
得到Class的三个过程是什么
2012/08/10 面试题
商品陈列协议书
2014/09/29 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS