微信小程序后端接口：登陆，检验，数据解密

微信小程序登陆接口


	
根据 appid secret 和 code 获取session_key 和 openid
	
微信小程序校验接口


	
获取前端数据rawData和signature
	
	

	
rawData和session_key通过sha1加密后与signature进行合法性校验
	
微信小程序数据解密


	
获取前端数据encryptedData和iv
	
	

	
session_key为aeskey
	
	

	
通过base64解码后，进行aes CBC模式PKCS7解密
	
微信小程序登陆流程




	
先调用wx.login()获取code，把code传到服务端，服务端根据code调用微信接口换取openid，可以把openid跟你的账户关联起来。如果数据库中没有这个openid那就算注册，返回小程序需要注册。如果有，那就返回小程序注册过，返回一个token之类的来作为登录状态。
	
	

	
小程序收到服务端返回的token缓存起来，下次进入小程序的时候就不用再调用wx.login()，而是直接调用业务接口就可以了。
	
	

	
服务器A拿到session_key后，生成一个随机数我们叫3rd_session，以3rdSessionId为key，以session_key + openid为value缓存到redis或memcached中；因为微信团队不建议直接将session_key在网络上传输，由开发者自行生成唯一键与session_key关联。其作用是： （1）将3rdSessionId返回给客户端，维护小程序登录态。

	
（2）通过3rdSessionId找到用户session_key和openid。
	
	

	
客户端拿到3rdSessionId后缓存到storage。
	
	

	
通过wx.getUserIinfo可以获取到用户敏感数据encryptedData 。
	
	

	
客户端将encryptedData、3rdSessionId和偏移量一起发送到服务器A。
	
	

	
服务器A根据3rdSessionId从缓存中获取session_key。
	
	

	
在服务器A使用AES解密encryptedData，从而实现用户敏感数据解密。
	
 

登陆后可获取的用户信息


	
openid 用户的唯一标识
	
	

	
nickname 用户昵称
	
	

	
sex 用户的性别，值为1时是男性，值为2时是女性，值为0时是未知
	
	

	
province 用户个人资料填写的省份
	
	

	
city 普通用户个人资料填写的城市
	
	

	
country 国家，如中国为CN
	
	

	
headimgurl 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。
	
	

	
privilege 用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
	
	

	
unionid 只有在用户将公众号绑定到微信开放平台帐号后，才会出现该字段。
	
代码

部分代码如下：

package auth
​
type Auth interface {
    SetOpenID2SessionKey(openID, sessionKey string) error
    GetSessionKeyByOpenID(openID string) (string, error)
    GetAllUser() (map[string]string, error)
}
​
var DefaultAuth = NewMemoryAuth()

package auth

type MemoryAuth struct {
	openID2sessionKey map[string]string
}

func NewMemoryAuth() Auth {
	return &MemoryAuth{
		openID2sessionKey: map[string]string{},
	}
}

func (ma *MemoryAuth) GetAllUser() (map[string]string, error) {
	return ma.openID2sessionKey, nil
}

func (ma *MemoryAuth) SetOpenID2SessionKey(openID, sessionKey string) error {
	ma.openID2sessionKey[openID] = sessionKey

	return nil
}
func (ma *MemoryAuth) GetSessionKeyByOpenID(openID string) (string, error) {
	return ma.openID2sessionKey[openID], nil
}

func Login(ctx *httpserver.Context, code string, conf *Config) (string, error) {
	rsp := &Code2SessionKeyRsp{}

	err := httputil.NewClient().
		SetPostParam("code", code).
		SetPostParam("client_id", conf.AppKey).
		SetPostParam("sk", conf.SecrectKey).
		SetHeader("Content-Type", "application/x-www-form-urlencoded").
		SetPath(" ").
		PostMethod().
		Do().
		RspJson(rsp, func(data interface{}) error {
			if data.(*Code2SessionKeyRsp).ErrorNo != 0 {
				return httputil.BadContent
			}

			return nil
		}).
		Error()
	if err != nil {
		ctx.Warning(err)
		return "", err
	}

	e := authdata.DefaultAuth.SetOpenID2SessionKey(rsp.OpenID, rsp.SessionKey)
	if e != nil {
		ctx.Warning(e)
		return "", e
	}

	return rsp.OpenID, nil
}

type Code2SessionKeyRsp struct {
	OpenID     string `json:"openid"`
	SessionKey string `json:"session_key"`

	Error            string `json:"error"`
	ErrorNo          int64  `json:"errno"`
	ErrorDescription string `json:"error_description"`
}

 

微信小程序登陆的方法有很多种 咱们分开说

第一种

点击登陆按钮登陆

//=============wxml部分================
<button open-type="getUserInfo" bindgetuserinfo="getuser" >获取头像</button>

//open-type 设置事件类型
//bindgetuserinfo  设置时间名


// ============js部分===============


getuser(e){
  console.log(e.detail.userInfo)
},

// 注意 两个事件名 要对应

//=============打印结果========
avatarUrl: 

"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJzkDzxIjZItoorwV0AGDCCd7ib4PMJKzQicHae7CRxz8cUrh9n1xtTAnIibRBl4Me8lyRhhWDaxSAkQ/132"

city: "Xinxiang"
country: "China"
gender: 1
language: "zh_CN"
nickName: "张没楞"
province: "Henan"

第二种

纯JS 获取 一个方法 一步到位

  wx.getUserInfo({
     complete:(res)=>{
       console.log(res)
     }
   })

 

以上两种方法 主要用于获取  头像和 昵称 无法获得 唯一Id  获得唯一Id 要用第三种

第三种

****指你自己的服务器 OpenId是需要有自己的服务器才能拿到  在服务器中 将 code 和 自己的id 和自己的密码 传给微信的服务器  微信的服务器会返回一个 openId 回来 可以将其储存到自己的服务器上用 或者返回给前端进行展示

getOpenId(){
    wx.login({
      complete:(res)=>{
        console.log(res.code)
        // 获取临时的加密Id
          wx.request({
            url: 'https://www.*****.com?code='+res.code,
                //****指你自己的服务器 OpenId是需要有自己的服务器才能拿到 
            success(res){
              console.log(res)
            }
          })
      }
    })
 },

 

 

	

引言
相信大家在刚刚接触到微信小程序的开发时，首先是从前端的界面开始，而我们最熟悉的登录界面应该就是微信，那下面我将分享一下模拟微信的登陆界面的设计与功能的实现。
方法介绍
 目录结构
首先在里面新建一个images的文件夹用于放设计过程中需要用到的图片，然后在pages里面新建一个login的文件夹用于代码的编写。
关键代码/*app.json*/
{
  "pages":[
    "pages/login/login",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
/*pages/login/login.js*/
const app = getApp()
Page({
  data: {
    phone: '',
    password: '',
    success: false,
    text: ''
  },
  // 获取输入账号 
  phoneInput: function (e) {
    this.setData({
      phone: e.detail.value
    })
  },
  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
  // 登录 
  login: function () {
    var that = this;   
    var warn = null; //
    if (that.data.phone.length == 0) {
      wx.showToast({
        title: '用户名不能为空',
        icon: 'loading',
        duration: 1000
      })
    } else if (that.data.password.length == 0) {
      wx.showToast({
        title: '密码不能为空',
        icon: 'loading',
        duration: 1000
      })
    }
  },
  // 注册 
  register: function () {
    wx.navigateTo({
      url: '/pages/register/register',
    })
  }
})
/*pages/login/login.wxml*/
      账号 
      密码 
          loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录 
          loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">注册 
/* pages/login/login.wxss */
page{ 
  height: 100%; 
 } 
 .container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  background-color: #f2f2f2
 } 
 /*登录图片*/
 .login-icon{ 
  flex: none; 
 } 
 .login-img{ 
  width: 500rpx;
  height: 400rpx;
 } 
 /*表单内容*/
 .login-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
 } 
 .inputView { 
  background-color: #fff; 
  line-height: 44px; 
 } 
 /*输入框*/
 .nameImage, .keyImage { 
  margin-left: 22px; 
  width: 14px; 
  height: 14px
 } 
 .loginLab { 
  margin: 15px 15px 15px 10px; 
  color: #545454; 
  font-size: 14px
 } 
 .inputText { 
  flex: block; 
  float: right; 
  text-align: left; 
  margin-right: 22px; 
  margin-top: 11px; 
  color: #cccccc; 
  font-size: 14px
 } 
 .line { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 
 } 
 /*按钮*/
 .loginBtnView { 
  width: 100%; 
  height: auto; 
  background-color: #f2f2f2; 
  margin-top: 0px; 
  margin-bottom: 0px; 
  padding-bottom: 0px; 
 } 
 .loginBtn { 
  width: 100%; 
  margin-top: 35px; 
 }
 .registerBtn { 
  width: 100%; 
  margin-top: 5px; 
 }
 图片方面
images里面需要放上三张图片，一个是账号前面的微信logo图片，第二个是密码前面的锁形状小图片，第三个就是微信人头小图片。
             
 效果图
结语
关于小程序的分享界面到这里就结束了，喜欢的你可以继续关注我们哦！

微信小程序登陆组件封装
// components/login/login.js
//获取应用实例
const app = getApp();
var $http = require('../../utils/http.js');
var util = require('../../utils/util.js');
Component({
/**
* 组件的属性列表
*/
properties: {

},

/**
* 组件的初始数据
*/
data: {

},

attached: function () { //检测有没有缓存到user_id
	if (wx.getStorageSync("user_id")){
		//已登录
	}else{
		this.check();
	}
},
/**
* 组件的方法列表
*/
methods: {
/***
* 
* 登录相关
*/
//显示登录或授权提示
showLoginModal: function () {
	this.setData({
	settingShow: true
	});
wx.hideTabBar();
},
//判断是否登录
check: function (cb) {
	console.log('登录')
	var that = this;
	wx.getSetting({
	success: function (res) {
		if (res.authSetting['scope.userInfo']) {

			// 已经授权，可以直接调用 getUserInfo 获取头像昵称
			console.log('已经授权');
			wx.getUserInfo({
			withCredentials: true,
			success: function (res) {
			that.setData({
			settingShow: false
		})
		wx.showTabBar();

		that.login();
	},
	fail: function () {
	that.showLoginModal();

}
});
	} else {
	that.showLoginModal();

}
},
fail: function () {
that.showLoginModal();
}
});

},
login: function () {
	var that = this;
	var token = wx.getStorageSync('token') || '';
	//调用登录接口
	wx.login({
	success: function (res) {
	if (res.code) {
	//发起网络请求
	wx.getUserInfo({
	success: function (ures) {
	wx.request({
	url: app.globalData.url + 'user/login',
	data: {
	code: res.code,
	rawData: ures.rawData,
	token: token
	},
	method: 'post',
	header: {
	"Content-Type": "application/x-www-form-urlencoded",
},
success: function (lres) {
	var response = lres.data
	if (response.code == 1) {
	that.data.userInfo = response.data.userInfo;
	// that.updateGlobalData(response.data);
	wx.setStorageSync('token', response.data.userInfo.token)
	// wx.setStorageSync('userInfo', response.data.userInfo);
	wx.setStorageSync('user_id', response.data.userInfo.user_id);
	// typeof cb == "function" && cb(response.data.userInfo);

	//刷新当前页面
	var pages = getCurrentPages();
	var prevPage = pages[pages.length - 1]; //当前页面)
	// prevPage.onLoad()
	prevPage.onPullDownRefresh(); //重新刷新页面
	} else {
	wx.setStorageSync('token', '');
	console.log("用户登录失败")
	that.showLoginModal();
}
}
});
},
fail: function (res) {
that.showLoginModal();
}
});
} else {
that.showLoginModal();
}
}
});
},
getuserinfo: function (e) {
	if (!e.detail.userInfo) {

	} else {
	this.setData({
	settingShow: false
});
	this.check();
}

},
}
})

方法已经封装好，哪个页面需要授权登陆就可以把次组件引入到对应的页面就可以了。
方法：
1.在需要引入组件页面的.json文件中定义好模板名称和路径
2.在.wxml页面中引入组件

<login></login>