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

文/YXJ
地址：http://blog.csdn.net/sk719887916/article/details/53761107

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

做过微信登录的都知道，我们需要一个标识来记录用户的身份的唯一性，在微信中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);//创建一个dialogwx.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, CONNECTheader: {'content-type': 'application/json'}, // 设置请求的 headersuccess: function (res) {// successwx.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。（补充一点，如果你的小程序没有绑定微信公众号，是不会反悔uId的）

这样简单登录就实现了！更多微信程序相关文章请关注*游戏机* 文章。
更多阅读下篇：
微信小程序开发（二）图片上传+服务端接收
微信小程序开发(三) 微信小程序授权获取用户信息openid
https://tamic.blog.csdn.net/article/details/89284104

文/YXJ
地址：http://blog.csdn.net/sk719887916/article/details/53761107

作者：Tamic 更多原创关注开发者技术前线

微信小程序开发(一) 微信登录流程相关推荐

微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...
微信小程序开发实现微信支付
微信支付是时下最流行的交易支付方法之一,潜移默化推动着无现今社会的变革.小程序作为微信上的轻应用,同时也开放微信支付的接口,可以通过转账,扫二维码支付.要完成一次具体的订单支付需要完整的支付流程,具体 ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...
微信小程序开发(Demo),微信公众号开发
> 微信小程序微信小程序,新的流量入口. 在微信的开发工具上编译小程序的代码.微信web开发者工具. sublime 和 webstorm. 微信小程序开发工具0.7.0版本(下载链接h ...
微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
微信小程序开发之——用户登录-搭建开发者服务器(2)
一概述用Node.js搭建开发者服务器开发服务器作为登录中的三个角色(小程序/开发者服务器/微信接口)中的重要一环开发者服务器接收code,保存openid和session_key,并返回to ...
微信小程序开发教程-微信小程序入门
转自http://blog.jobbole.com/106049/ 微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心「小程序」的最终 ...
微信小程序开发教程||微信小程序小程序简介||微信小程序开始||微信小程序小程序代码构成
微信小程序小程序简介小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序技术发展史小程序并非凭空冒出来的一个概念.当微信中的 ...
微信小程序开发之微信支付
概述最近这段时间接了一个蓝牙车位锁的项目:项目中包括APP和微信小程序:其中涉及在线支付功能,这里记录下微信小程序在线支付完功能小程序在线支付流程 1.微信小程序登陆微信获取code 调用接口wx ...

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

微信小程序开发(一) 微信登录流程相关推荐

最新文章

热门文章