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


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 相关文章推荐
js计数器代码
Nov 04 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
vue递归获取父元素的元素实例
Aug 07 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
django中瀑布流写法实例代码
2019/10/14 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
Keras 使用 Lambda层详解
2020/06/10 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
单位实习证明怎么写
2014/01/17 职场文书
党支部书记先进事迹
2014/01/17 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
三方协议书
2015/01/27 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers