首页 > 数据库> 文章详细

微信小程序实现登录授权，并将获取到的用户授权信息存储到数据库中

2021-11-13 19:58:58 阅读：276 来源： 互联网

标签：code const 程序实现 res userInfo 微信授权 data

微信小程序实现登录授权，并将获取到的用户授权信息存储到数据库中（个人学习笔记）

1.微信小程序授权登录实现原理图（如下）
2.WXML中的代码
3.JS代码
4. WXSS代码
5.后端代码（express）
最终效果：

1.微信小程序授权登录实现原理图（如下）

官方开发文档
注意：在实现授权登录时，不要使用测试号进行

2.WXML中的代码

<view class="container">
  <view class="userinfo">
    <!-- 授权前 -->
    <block wx:if="{{!hasUserInfo}}">
      <button bindtap="getUserProfile"> 获取头像昵称 </button>
    </block>
    <!-- 授权后 -->
    <block wx:else>
     <view class="users">
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
     </view>
    </block>
  </view>
</view>

3.JS代码

wx.getUserProfile使用文档

Page({
  data: {
    // 用户信息
    userInfo: {},
    // 判断显示授权前或授权后的样式
    hasUserInfo: false
  },
  onl oad() {
    // 获取存储的用户授权信息
    const userinfo =  wx.getStorageSync('userinfo') || {}
    console.log(Object.keys(userinfo));
    // 判断是否存在已经授权的用户信息
    if (Object.keys(userinfo).length == 0) {
      this.setData({
        userInfo: userinfo,
        hasUserInfo: false
      })
    } else {
      this.setData({
        userInfo: userinfo,
        hasUserInfo: true
      })
    }
  },
  getUserProfile(e) {
    let that = this
    // 获取个人信息
    wx.getUserProfile({
      desc: '用于获取用户个人信息',
      success: function (detail) {
        console.log(detail);
        wx.login({
          success: res => {
            var code = res.code; //登录凭证
            wx.request({
              url: 'http://127.0.0.1:8888/api/wxuser', //自己的服务接口地址
              method: 'post',
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              // 需要传给后端的数据
              data: {
                encryptedData: detail.encryptedData,
                iv: detail.iv,
                code: code,
                userInfo: detail.rawData

              },
              success: (res) => {
                console.log("res:", res.data)
                // 将用户授权信息存储到本地
                wx.setStorageSync('userinfo', detail.userInfo)
                // 将后端返回的token存储到本地
                wx.setStorageSync('token', res.data.token)
                that.setData({
                  userInfo: detail.userInfo,
                  hasUserInfo: true
                })
              },
              fail: function () {
                console.log('系统错误')
              }
            })
          }
        });
      },
      fail: function () {
       wx.showModal({
         content: '取消授权将会影响相关服务，您确定取消授权吗？',
         success (res) {
           if (res.confirm) {
             wx.showToast({
               title: '已取消授权',
               duration: 1500
             })
           } else if (res.cancel) {
             that.getUserProfile()
           }
         }

       })
      }
    })
  }
})

4. WXSS代码

.users {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.userinfo-avatar {
  height: 260rpx;
  width: 260rpx;
  border-radius: 50%;
}

5.后端代码（express）

config文件代码如下

// token全局配置文件
module.exports = {
    // 加密和解密的token秘钥（引号中的字符可以自定义）
    jwtSecretKey: 'advance8',
    // token有效期
    expiresIn: '8640h'
}

路由模块

const express = require('express')
const router = express.Router()

const wxuserHandle = require('../router_handle/wxuser')
router.post('/wxuser', wxuserHandle.wxuser)

module.exports = router

主要代码（如果不想多个文件，可以将wxuserHandle.wxuser这个位置内容替换为exports.wxuser的内容）

// 导入requset包
const request = require('request')
// 导入数据库操作模块
const db = require('../db/config')
// 导入生成token的包
const jwt = require('jsonwebtoken')
// 导入全局配置文件
const config = require('../config')
//config文件代码在上方
const { jwtSecretKey } = require('../config')
exports.wxuser = (req, res) => {
    let params = req.body // 接收小程序端传过来的所有数据
    let code = params.code;//获取小程序传来的code
    let encryptedData = params.encryptedData;//获取小程序传来的encryptedData
    let iv = params.iv;//获取小程序传来的iv
    let userInfo = JSON.parse(params.userInfo) //获取个人信息
    let appid = "换成自己的appid";//自己小程序后台管理的appid，可登录小程序后台查看
    let secret = "换成自己的secret";//小程序后台管理的secret，可登录小程序后台查看
    let grant_type = "authorization_code";// 授权（必填）默认值

    //请求获取openid
    let url = "https://api.weixin.qq.com/sns/jscode2session?grant_type="+grant_type+"&appid="+appid+"&secret="+secret+"&js_code="+code;
    request(url, (err, response, body) => {
        if (!err && response.statusCode == 200) {
            // 服务器返回的openid、sessionKey
            let _data = JSON.parse(body)
            _data.code = code
            _data.session_key = ''
            // 对用户信息进行加密生成字符串
            const wxToken = jwt.sign(_data, jwtSecretKey, { expiresIn: config.expiresIn })
            // 定义sql 语句，查询当前用户是否存在（openid）
            const sql = `select * from wxuser where user_id = ?`
            db.query(sql, _data.openid, (err, result) => {
                if (err) return res.cc(err) //res.cc为自定义封装，可以换成res.send
                if (result.length === 0) {
                    const sql = `insert into wxuser  set ?`
                    db.query(sql, { user_id: _data.openid, nickName: userInfo.nickName, avatar: userInfo.avatarUrl, gender: userInfo.gender }, (err, result) => {
                        if (err) return res.cc(err)
                        if (result.affectedRows !== 1) return res.cc('授权失败，请重试')
                        res.send({
                            token: 'Bearer ' + wxToken,
                            status: 200,
                            messages: 'WX 授权成功'
                        })
                    })

                }else {
                    const sql = `update wxuser set ? where user_id = ?`
                    db.query(sql, [{ user_id: _data.openid, nickName: userInfo.nickName, avatar: userInfo.avatarUrl, gender: userInfo.gender }, _data.openid], (err, result) => {
                        if (err) return res.cc(err)
                        res.send({
                            token: 'Bearer ' + wxToken,
                            status: 200,
                            messages: 'WX1 授权成功'
                        })
                    })
                    
                }
            })
        } else {
            res.cc('请求openid失败')
        }
    })

}

注意：在返回token的字符串拼接时，Bearer 后面必须有一个空格

最终效果：

数据库中的结果
授权成功后存储数据结果
小程序演示

标签：code,const,程序实现,res,userInfo,微信,授权,data
来源： https://blog.csdn.net/yancy_peng/article/details/121308428

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9