微信小程序之微信登入

以下代码基于uni-app编写如果没有appid，那么uni-login是受限制的

https://open.weixin.qq.com/ 认证商户()

微信登入

不同的应用对于微信登入会做不同的处理，即微信服务器（微信官方的）返回发送的OpenId是不相同的（后面会解释OpenId是干嘛用的，它涉及到数据库）。因此也有
UnionID

UnionID 机制说明
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的

本站后端服务后一部分（已经获取到OpenId，UnionID或者请求，暂时叫身份标识VID）

当客户端已经发送带有VID的东西时，可以存入数据库表（
user表，有id, VID, name, avatarUrl等字段
）
，注意，获取到VID先查询是否存在，不存在则插入新增一条记录，否则检验name和VID是否匹配（其实可以只检查VID），检验成功则表示登入成功（这里可以使用正常的前后端登入逻辑，如token等），返回数据给客户端。

App端

AppSDK配置里的微信登入appid和appsecret需要填写，开发时暂时可以随便写，如果上线要申请微信的（微信开发者平台）

app端可以直接通过接口获取第三方接口：通过发送发送自带的login请求，再响应成功后，获取到VID，再次请求getUserInfo，响应成功获取用户微信已有信息，向本站服务器发起登入请求，携带VID（一般还有头像和名称）

export default {data() {return {};},//生命周期onLoad:function(){//app 端微信登录// 手册位置 https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo// #ifdef APP-PLUS  判断环境uni.login({success: (res) => {// res 对象格式//{"code":"***",//"authResult":{//"openid":"***",//"scope":"snsapi_userinfo",//"refresh_token":"**",//"code":"****",//"unionid":"***",//"access_token":"***",//"expires_in":7200//},//"errMsg":"login:ok"}uni.getUserInfo({success: (info) => {// info 对象格式// {"errMsg":"getUserInfo:ok",// "rawData":"...// "userInfo":{//"openId":"***",//"nickName":"***",//"gender":1,// "city":"Xi'an",// "province":"Shaanxi",// "country":"China",// "avatarUrl":"头像",// "unionId":"oU5Yyt_agt547zWyA0v0eLfFPqxo"//},"signature":""}// 与服务器交互将数据提交到服务端数据库},fail: () => {uni.showToast({title:"微信登录授权失败"});}})},fail: () => {uni.showToast({title:"微信登录授权失败"});}})// #endif}
}

小程序端

进入小程序后台管理，点击开发 => 开发设置可以看到id和serect，注意改变manifest.json配置即可，后端也是需要这些数据的，下面会讲到

<template><view><!-- #ifdef MP-WEIXIN --><button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">使用微信登录</button><!-- #endif --></view>
</template>

var _self, pageOptions, session_key, openid;
export default {data() {return {};},methods:{// #ifdef MP-WEIXINgetUserInfo : (info) => {info = info.mp.detail.userInfo;//userInfo {"nickName":"深海","gender":1,...avatarUrl":"https://7tdPvkPaJlkaLFFbLAffGVApluZdanLkDVplNlAhq1EJA/132"}// 与服务器交互将数据提交到服务端数据库uni.request({url: _self.apiServer+'member&m=login',method: 'POST',header: {'content-type' : "application/x-www-form-urlencoded"},data: {openid : openid,name   : info.nickName,face   : info.avatarUrl,},success: res => {console.log(res);res = res.data;// 登录成功 记录会员信息到本地if(res.status == 'ok'){uni.showToast({title:"登录成功"});uni.setStorageSync('SUID' , res.data.u_id + '');uni.setStorageSync('SRAND', res.data.u_random + '');uni.setStorageSync('SNAME', res.data.u_name + '');uni.setStorageSync('SFACE', res.data.u_face + '');// 跳转if(pageOptions.backtype == 1){uni.redirectTo({url:pageOptions.backpage});}else{uni.switchTab({url:pageOptions.backpage});}}else{uni.showToast({title:res.data});}},fail: (e) => {console.log(JSON.stringify(e));}});},// #endif},onLoad:function(options){_self = this;pageOptions = options;// #ifdef MP-WEIXIN// 调用 微信 login 获取 codeuni.login({success: (res) => {uni.request({url:_self.apiServer+'member&m=codeToSession&code='+res.code,success: (sessions) => {// sessions.date 数据格式// expires_in:7200// openid:"oS6of0V0rdp9nY_BuvCnQUasOHYc"// session_key:"87sE2oDD8lc+aDJj0tB6+g=="// 获取 unionIdsession_key = sessions.data.session_key;openid      = sessions.data.openid;},});}});}
}

客户端先调用uni.login获取，微信平台服务器返回的code、session_key，再向本站服务器访问提交code、session_key，后端拿到这些值进行向微信服务器接口请求带参数

$url =  "https://api.weixin.qq.com/sns/jscode2session?appid=" + APP_ID + "&secret=" + APP_SERECT +"&js_code=" + ctx.request.body['code'] +"&grant_type=authorization_code";
//Get方式 发送请求 返回数据 数据包含OpenId
$weixin = request($url)
ctx.body = {$weixin
}

后端返回OpenId后，当前端点击登入按钮，触发微信的getUserInfo事件（微信只能通过按钮实现），再用获取到的OpenId去完成后面的逻辑

UnionID

（主要是要给钱，注册企业账号）
暂时不想用它，就不搞了，但是其实差不多的:
可以在getUserInFo获取加密信息，将加密数据传给后端，后端通过对于的js解密（官方给出解密函数），解密就能获取
用户信息和VID了