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


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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
小程序关于请求同步的总结
May 05 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
jquery tab标签页的制作
2010/05/10 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python多线程爬虫简单示例
2016/03/04 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python多图片合并PDF的方法
2019/01/03 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
运动会解说词200字
2014/02/06 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
村党支部换届选举方案
2014/05/02 职场文书
工商管理专业自荐信
2014/06/03 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
python中validators库的使用方法详解
2022/09/23 Python