2018-07-16  2,223 views 3

ASP.NET WebApi作服务端开发小程序实现微信授权用户登录实例(一)

小程序实现微信登录大约是以下流程:

①获取微信用户授权 获取到微信授权反馈的code →  ②根据反馈的code获取用户的基本信息 session_key、openId和unionId  ③根据获取到的openId或unionId查询用户表中是否已经存在对应的openId或unionId

名词解释:

openId或unionId:微信登录授权接口中,openId或unionId都可以认为是一个微信用户的唯一ID,只不过unionid同一用户不同应用唯一的,openId则只是针对某一个应用或者web app,unionId更具有唯一性,只不过很多时候我们获取到的unionId都是null。

一、用户表的设计

此处设计标仅用作教程,非实际使用,并不规范

1)仅仅针对微信小程序设计用户表

直接设计一个AccountBasic表即可,数据结构如下:

列名 数据类型 长度 允许空 默认值 说明
Account_Id bigint 20 自增ID
OpenId varchar 64 微信OpenId
NickName varchar 32 昵称 获取微信授权的昵称或重命名
Avatar varchar 256 头像
Gender int 11 1 性别
DataFlag int 11 1 数据状态 0-无效 1-有效
CreateTime datetime CURRENT_TIMESTAMP 创建时间
IsDel int 11 0 是否删除

2)多平台使用(PC、小程序、微网站等)

设计表Account(账号基础信息表)、AccountAuth(账号验证表)、AccountProfile(账号资料表)

表名:Account

列名 数据类型 长度 允许空 默认值 说明
Account_Id bigint 20 内部编码
AccountType_Id bigint 20 0 账号类型
NickName varchar 32 昵称 自动生成或微信昵称
Avatar varchar 256 头像
DataFlag int 11 1 数据状态
CreateTime datetime CURRENT_TIMESTAMP 创建时间
IsDel int 11 0 是否删除
MailBind int 11 0 邮箱是否绑定
PhoneBind int 11 0 手机是否绑定

表名:AccountAuth

列名 数据类型 长度 允许空 默认值 说明
AccountAuth_Id bigint 20 内部编码
Account_Id bigint 20 1 关联账号ID
AuthType varchar 32 验证类型
Identifier varchar 64 对应账号/标识符
Credential varchar 128 密码或Token 凭证
PaymentPassword varchar 255 支付密码
TimeStamp bigint 20 0 时间戳
DataFlag int 11 1 数据状态
CreateTime datetime CURRENT_TIMESTAMP 创建时间
IsDel int 11 0 是否删除

表名:AccountProfile

列名 数据类型 长度 默认值 说明
AccountProfile_Id bigint 20 内部编码
Account_Id bigint 20 1 关联账号ID
RealName varchar 32 真是姓名
NickName varchar 32 昵称
Phone varchar 16 手机号
Email varchar 64 邮箱
Gender int 11 1 性别 0 - 女 1 - 男
Birthday datetime CURRENT_TIMESTAMP 生日
Experience bigint 20 10 用户经验值
Level varchar 32 用户等级
RegisterIP varchar 32 注册IP
LoginTime datetime CURRENT_TIMESTAMP 上次登录时间
LoginIP varchar 32 上次登录IP
OnlineStatus int 11 0 在线状态 0-下线 1-在线
OnlineSeconds bigint 20 0 在线总时长
UnreadMsgNums bigint 20 0 未读消息数
DataFlag int 11 1 数据状态
CreateTime datetime CURRENT_TIMESTAMP 创建时间
IsDel int 11 0 是否删除

 

二、初次使用小程序 用户的新增

Step1:初次访问小程序,并获取用户授权

app.js 或者其他需要授权页面的JS

wx.login({
  success: res => {
  }
})

调用以上方法可以请求微信授权,授权成功的res中包含两个属性:code、errMsg 

每次请求Code会改变,如果请求成功 errMsg返回 login:ok

授权登录成功后可以继续调用如下代码获取用户的基本信息和加密信息:

// 获取用户信息
wx.getSetting({
   success: resInfo => {
      if (resInfo.authSetting['scope.userInfo']) {
        // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
        wx.getUserInfo({
           success: function (resInfo) {
              console.log(resInfo);
           }
        })
      }
   }
})

获取用户信息成功,反馈的resInfo结构如下:

{
  errMsg: "getUserInfo:ok", 
  rawData: "{用户基本信息字符串}",
  userInfo: {用户基本信息对象},
  signature: "签名",
  encryptedData: "加密敏感数据"
  iv:"iv码 用于解密"
}

我们可以获取到以上的信息。

 

Step2:根据获取到的基本信息解密加密信息

前台传请求API(见下一篇), 将微信授权返回的code(即res.code)、加密数据encryptedData、iv码(iv)这三个数据作为参数

 

Step3:如果数据库中不存在用户,则创建用户

请求微信官方API https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2} 获取到解密的信息,最主要的是获取到 openId和unionId,不过大部分时候获取到的unionId通常为null,所以通常是将openId作为我们系统中唯一确定用户的一串字符 类似GUID。

JS代码如下:

wx.login({
  success: res => {
    console.log(res.code);
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    // 获取用户信息
    wx.getSetting({
      success: resInfo => {
        if (resInfo.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: function (resInfo) {
              var app = getApp();
              wx.request({
                url: app.globalData.apiUrl + 'Account/GetWxValidate',
                data: {
                  code: res.code,
                  encryptedData: resInfo.encryptedData,
                  iv: resInfo.iv
                },
                method: 'GET',
                success: function (res) {
                  //console.log("1111")
                  //console.log(res)
                  if (res.data.Code == 0) {
                    //console.log(res.data.Data);
                    app.globalData.userInfo = res.data.Data
                    console.log(app.globalData.userInfo)
                    //wx.setStorageSync("SessionKey", app.globalData.userInfo.sessionKey)
                    wx.request({
                      url: app.globalData.apiUrl + 'Account/ExistsAccount',
                      data: {
                        identifier: res.data.Data.openId
                      },
                      method: 'GET',
                      success: function (resExists) {
                        if (resExists.data.Code == 0) {
                          if (resExists.data.Count <= 0) {
                            console.log("还未注册")
                            //开始注册
                            wx.request({
                              url: app.globalData.apiUrl + 'Account/WXRegister',
                              data: {
                                "Account_Id": 0,
                                "Identifier": res.data.Data.openId,
                                "RealName": "",
                                "NickName": res.data.Data.nickName,
                                "Avatar": res.data.Data.avatarUrl,
                                "Gender": res.data.Data.gender,
                                "Birthday": "1990-1-1",
                                "Email": "",
                                "Phone": "",
                                "DataFlag": 1,
                                "PassWord": "123456",
                                "Province": "",
                                "City": res.data.Data.city,
                                "CountyArea": res.data.Data.country,
                                "AreaInfomation_Id": 0,
                                "DetailAddress": "",
                                "Contact": "",
                                "ContactNumber": "",
                                "UpdateTime": "2018-07-09",
                                "MailBind": 0,
                                "PhoneBind": 0,
                                "AuthType": 3,
                                "RegisterIP": "192.168.1.1",
                                "CheckCode": "",
                                "CityCode": "",
                                "CityName": res.data.Data.city,
                                "Longitude": "",
                                "Latitude": "",
                                "CityLongitude": "",
                                "CityLatitude": ""
                              },
                              method: 'POST',
                              header: {
                                'content-type': 'application/x-www-form-urlencoded'
                              },
                              success: function (resRegister) {
                                if (resRegister.data.Code == 0) {
                                  console.log(resRegister)
                                  // console.log("获取到的openid为:" + res.data)
                                  // that.globalData.openid = res.data
                                  //wx.setStorageSync('openid', res.data)
                                } else {
                                  console.log(res.errMsg)
                                }
                              },
                            })
                          } else {
                            console.log("已经注册")
                          }
                        }
                      }
                    })
                  } else {
                    //console.log(res)
                  }
                },
              })
            }
          })
        }
      }
    })

  }
})

通常情况下,授权后用户已经会被添加到你自己的数据库表中,接下来每次登录的时候会console输出已经注册。

根据授权后返回的账号code、加密数据、iv码,获取微信用户的详细信息,包含解密反馈的加密信息,并插入数据库的API见下一篇。

ASP.NET WebApi作服务端开发小程序实现微信授权用户登录实例——后台API编写(二)

 

本系列其他教程见:

ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例(一)

ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例——后台API编写(二)

ASP.NET WEBAPI作服务端开发小程序实现微信授权用户登录实例——实现登录逻辑(三)

 

 

3 条留言  访客:0 条  博主:0 条   引用: 3 条

来自外部的引用: 3 条

  • ASP.NET WebApi作服务端开发小程序实现微信授权用户登录实例——后台API编写(二) | 落雨信息
  • 小程序开发使用ASP.NET Web Api做服务端快速实现用户登录功能 实例 | 落雨信息
  • ASP.NET WebApi作服务端开发小程序实现微信授权用户登录实例——实现登录逻辑(三) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: