微信小程序实现授权登录及退出

1.登录获取用户昵称，头像

<view class="userinfo">
  <image src="{{userInfo.avatarUrl}}"></image>
  <view>{{userInfo.nickName}}</view>
</view>
<button plain  bindtap="getUser">授权登陆</button>
<button plain bindtap="exitUser">退出</button>

  // 获取用户信息
  getUser(){
   
    //获得用户的头像和昵称
    wx.getUserProfile({
      desc: '获得用户信息'
     
    }).then((res) => {
        console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
        
        this.setData({
          userInfo:res.userInfo
        })
        
            // 添加到数据库用户列表中 yuyue-user
            wx.cloud.database().collection('yuyue-user').add({
              data:{
                // 添加一个号码，由于id和openid太长，此号码可作为唯一标识
                num: Date.now(),
                // 添加用户昵称和头像
                nickName:res.userInfo.nickName,
                avatarUrl:res.userInfo.avatarUrl
              
              }
            }).then(res=>{
                console.log(res)
                // 添加成功提示
                wx.showToast({
                  title: '登录成功！'
                })
               }).catch(err=>{
                console.log(err)
              })
           
        })
        
       
      })
  }

2.创建云函数

右击新建文件夹cloud

在根目录project.config.json中添加：

"cloudfunctionRoot": "cloud/"

右击文件夹cloud选择当前环境

右击文件夹cloud新建Node.js云函数，命名login

在新建文件夹login的index.js文件中：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    openid: wxContext.OPENID
  }
}

右击login文件夹选择上传并部署：云端安装依赖（不上传node_modules），显示上传成功提示。

3.使用云函数获取openid

根目录app.js中获取openid：

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      env: 'manmanmanman123-2gld2mewb02c0fcb'  //云开发环境id
    })
    // 获取用户的openid
    wx.cloud.callFunction({
      name:'login'
    }).then(res=>{
      console.log(res)
      console.log(res.result.openid)
      //给全局openid赋值  
      this.globalData.openid = res.result.openid
      
    })
  },
  globalData: {
    userInfo: null,
    openid:''
  }
})

4.为防止一个用户在数据库中出现多条登录记录，需要将openid作为查询条件

  // 获取用户信息
  getUser(){
   
    //获得用户的头像和昵称
    wx.getUserProfile({
      desc: '获得用户信息'
     
    }).then((res) => {
        console.log(res.userInfo.avatarUrl,res.userInfo.nickName)
        // 将内容赋值给全局的userInfo，这样可以在别的页面中使用
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo:res.userInfo
        })
        // 判断yuyue-user数据库中是否存在原用户，不存在则添加到数据库中，存在则替换
        wx.cloud.database().collection('yuyue-user').where({
          _openid:app.globalData.openid
        }).get().then(result=>{
          console.log(result)
          if(result.data.length === 0){
            // 添加到数据库用户列表中 yuyue-user
            wx.cloud.database().collection('yuyue-user').add({
              data:{
                // 添加一个号码，由于id和openid太长，此号码可作为唯一标识
                num: Date.now(),
                // 添加用户昵称和头像
                nickName:res.userInfo.nickName,
                avatarUrl:res.userInfo.avatarUrl
              
              }
            }).then(res=>{
                console.log(res)
                // 添加成功提示
                wx.showToast({
                  title: '登录成功！'
                })
               }).catch(err=>{
                console.log(err)
              })
            }else{
              this.setData({
               userInfo:result.data[0]
              })
            }
        })
        
       
      } )
  }

5.退出登录

// 退出登录
  exitUser(){
    // 全局和页面上的用户信息为空
    app.globalData.userInfo = null
    this.setData({
      userInfo: null
    })
  }

6.实现自动登陆，用户不用退出小程序后再次登录

根目录app.js中：

// app.js
App({
  onLaunch() {
    wx.cloud.init({
      env: 'manmanmanman123-2gld2mewb02c0fcb'  //云开发环境id
    })
    // 获取用户的openid
    wx.cloud.callFunction({
      name:'login'
    }).then(res=>{
      console.log(res)
      console.log(res.result.openid)
      this.globalData.openid = res.result.openid
      // 刚开始启动小程序时，通过openid来查找yuyue-user用户数据库中是否存在用户
      //有的话就不用再登陆
      wx.cloud.database().collection('yuyue-user').where({
        _openid : res.result.openid
      }).get().then(result=>{
        console.log(result)
        this.globalData.userInfo = result.data[0]
      })
    })
  },
  globalData: {
    userInfo: null,
    openid:''
  }
})

在登录界面：

onShow() {
    // 获取到全局的userInfo
    this.setData({
      userInfo:app.globalData.userInfo
    })
  }