微信小程序目前最新的授权登录接口-2021年10月份

微信小程序目前最新的授权登录接口-2021年10月份

效果图:

小程序授权登录效果图
说明:首先我们需要在app.js里用云函数获取到openid,然后在用户点击登录的时候用获取到的openid去用户表里查询是否有该用户,如果没有就把用户信息写入数据库里的用户表,再登录;如果有就直接登录;

直接上代码!

mypage.wxml代码:
<!--pages/mypage/mypage.wxml-->
<!-- 背景图 -->
<view class="bg-box">
	<image src="../image/mypagebg.png"></image>
</view>

<!-- 未登录 -->
<view wx:if="{{!UserLogin}}" class="login_box" bindtap="getUserProfile">
	<view class="userlogin">
		<view>点击登录</view>
		<view style="font-size: 12px; color:grey;margin-top: 5px;">需要先完成授权登录才能使用服务哟(*v*)</view>
	</view>
</view>

<!-- 已登录 -->
<view wx:else class="login_box">
	<view class="userAvatar_box" bindtap="secretEntrance">
		<image src="{{userInfo.avatarUrl}}"></image>
	</view>
	<view class="userlogin">
		<view style="font-weight:bold;">欢迎:{{userInfo.nickName}}</view>
		<view><text style="font-size: 10px; color: gray;">微信用户</text></view>
		<view><text style="font-size: 10px; color: red;">Lv:</text><text style="font-size: 10px; color: orange;">{{Lv}}</text></view>
	</view>
</view>

<!-- 服务 -->
<view class="service_box">
	<view class="service_title">服务</view>
	<view class="service_row" bindtap="goMycollection">
		<view class="service_icon">
			<image src="../image/mycollection.png"></image>
		</view>
		<view class="service_text">我的收藏</view>
	</view>

	<view class="service_row">
		<view class="service_icon ">
			<image src="../image/kefu.png"></image>
		</view>
		<view class="service_text">
			<button open-type='contact' style="color:black;height:35px;line-height:35px;font-weight: lighter;padding:0;width:100%;border:none;background:#fff;font-size:14px;text-align:left;">在线客服</button>
		</view>
	</view>

	<view  class="service_row" bindtap="exit">
        <view class="service_icon">
            <image src="../image/exit.png"></image>
        </view>
        <view class="service_text">退出登录</view>
    </view>
</view>

mypage.js代码:
// pages/mypage/mypage.js
var app = getApp();
const db = wx.cloud.database()
const {
    formatTime
} = require("../../utils/util.js")
Page({

    /**
     * 页面的初始数据
     */
    data: {
        UserLogin: false,
        userInfo: null,
        Lv: '1'
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        app.isLogin() // 全局变量
        this.setData({
            UserLogin: app.globalData.UserLogin,
            userInfo: app.globalData.userInfo
        })
    },
    
    //获取用户信息
    getUserProfile() {
        let openId = app.globalData.openid
        //console.log('全局的openid', openId)
        wx.getUserProfile({
            desc: '用于完善会员资料', //声明获取用户信息的用途
            success: (res) => {
                //console.log('点击获取用户信息成功', res.userInfo)
                let userInfo = res.userInfo
                db.collection('UserList').where({
                    '_openid': openId
                }).get({
                    success: res => {
                        console.log('根据全局openid查询用户表成功', res.data)
                        if (res.errMsg == "collection.get:ok" && res.data.length == 0) { //length等于0,证明没有该用户,走写入数据库
                            //console.log('走if-1,开始写入数据库')
                            db.collection('UserList') // 把用户信息写入数据库的用户表
                                .add({
                                    data: {
                                        avatarUrl: userInfo.avatarUrl,
                                        nickName: userInfo.nickName,
                                        mamager: false,
                                        vip: false,
                                        Lv: 1,
                                        registerTime: formatTime(new Date())
                                    },
                                    success: res => {
                                        //console.log('写入成功', res.errMsg)
                                        if (res.errMsg == "collection.add:ok") {
                                            wx.setStorageSync('UserInfo', userInfo) //保存用户信息保存到本地缓存
                                            this.setData({
                                                userInfo: userInfo,
                                                UserLogin: true,
                                                Lv: "1"
                                            })
                                            wx.showToast({
                                                title: '恭喜,登录成功',
                                                icon: "success",
                                                duration: 1000,
                                            })
                                        } else {
                                            // 提示网络错误
                                            wx.showToast({
                                                title: '登录失败,请检查网络后重试!',
                                                icon: 'none',
                                                duration: 1000,
                                            })
                                        }
                                    },
                                    fail: err => {
                                        console.log('用户信息写入失败', err)
                                        // 提示网络错误
                                        wx.showToast({
                                            title: '登录失败,请检查网络后重试!',
                                            icon: 'none',
                                            duration: 1000,
                                        })
                                    }
                                })
                        } else {
                            //console.log('走else-1,数据库里已存有用户信息,直接登录,不用写入数据库')
                            wx.setStorageSync('UserInfo', userInfo) //保存用户信息保存到本地缓存
                            this.setData({
                                userInfo: userInfo,
                                UserLogin: true,
                                Lv: res.data[0].Lv
                            })
                            //更新全局状态
                            app.globalData({
                                userInfo: userInfo,
                                UserLogin: true,
                            })
                        }
                    },
                    fail: err => {
                        console.log('根据全局openid查询用户表失败', err)
                        // 提示网络错误
                        wx.showToast({
                            title: '网络错误!获取授权信息失败',
                            icon: 'none',
                            duration: 1000,
                        })
                    }
                })
            },
            fail: err => {
                console.log('用户信息获取失败', err)
                // 提示网络错误
                wx.showToast({
                    title: '网络错误!获取授权信息失败',
                    icon: 'none',
                    duration: 1000,
                })
            }
        })
    },
    // 跳转到我的收藏
    goMycollection() {
        let UserLogin = this.data.UserLogin
        if (UserLogin) {
            wx.navigateTo({
              url: '../collection/collection',
            })
        } else {
            // 提示登录
            wx.showToast({
                title: '你还未登录,请先登录!',
                icon: 'none',
                duration: 1000,
            })
        }
    },

    // 清除数据退出
    exit() {
        let UserLogin = this.data.UserLogin
        if (UserLogin) {
            wx.showToast({
                title: '退出成功',
                icon:'success',
                duration: 1000,
            })
            this.setData({
                UserLogin: false,
            })
            wx.removeStorageSync('UserInfo')
        } else {
            // 提示登录
            wx.showToast({
                title: '你还未登录,请先登录!',
                icon: 'none',
                duration: 1000,
            })
        }
    },
})
util.js
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

app.js代码:
//app.js
App({
  onLaunch: function () {
    // 初始化云开发环境
    if (!wx.cloud) {
      //console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: 'cloud1-3gklfre2aef67472',//云环境ID
        traceUser: true,
      })
    }
    this.getOpenid();
  },
  globalData: {
    userInfo: null,
    UserLogin: false,
    openid:null,
  },

  // 获取用户openid
  getOpenid: function () {
    var app = this;
    var openId = wx.getStorageSync('openId');
    if (openId) {
      //console.log('本地获取openid:', openId);
      app.globalData.openid = openId;
      app.isLogin();
    } else {
      wx.cloud.callFunction({
        name: 'getOpenid',
        success(res) {
          //console.log('云函数获取openid成功', res.result.openid)
          var openId = res.result.openid;
          wx.setStorageSync('openId', openId)
          app.globalData.openid = openId;
          app.isLogin();
        },
        fail(res) {
          console.log('云函数获取openid失败', res)
        }
      })
    }
  },

  //检测是否登录函数,未登录则提示登录
  isLogin() {
    //console.log('app.isLogin方法被执行了')
    var userInfo = wx.getStorageSync('UserInfo') // 获取缓存的用户信息
    if (userInfo.nickName && userInfo.avatarUrl) {
      this.globalData.UserLogin = true
      this.globalData.userInfo = userInfo
    } else {
      this.globalData.UserLogin = false
    }
  },

})
mypage.wxss代码:
/* pages/mypage/mypage.wxss */

/* 背景图 */
.bg-box {
	width: 100%;
	height: 300rpx;
	z-index: 1;
}

.bg-box image {
	z-index: 1;
	width: 100%;
	height: 100%;
}

/* 登录 */
.login_box {
	height: 200rpx;
	margin: 10rpx 18rpx;
	border-radius: 16rpx;
	background-color: #fff;
	box-shadow: 20rpx 20rpx 10rpx rgba(39, 48, 57, 0.05);
}

.userlogin {
	height: 100%;
	margin-left: 40rpx;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.userAvatar_box {
	width: 150rpx;
	height: 150rpx;
	margin-top: 40rpx;
	margin-left: 20rpx;
	border-radius: 10rpx;
	overflow: hidden;
	float: left;
}

.userAvatar_box image {
	width: 100%;
	height: 100%;
}

/* 服务 */
.service_box {
	position: relative;
	margin: 10rpx 18rpx;
	border-radius: 16rpx;
	background-color: #fff;
	box-shadow: 20rpx 20rpx 10rpx rgba(39, 48, 57, 0.05);
}

.service_title {
	height: 60rpx;
	line-height: 60rpx;
	padding-left: 10rpx;
	font-size: 16px;
	font-weight: bold;
}

.service_row {
	height: 70rpx;
	margin-top: 16rpx;
	border-bottom: 2rpx #f0f0f0 solid;
}

.service_icon {
	width: 50rpx;
	height: 50rpx;
	margin-left: 20rpx;
	margin-top: 10rpx;
	float: left;
}

.service_icon image {
	width: 50rpx;
	height: 50rpx;
}

.service_text {
	font-size: 14px;
	height: 70rpx;
	line-height: 70rpx;
	margin-left: 100rpx;
}

微信小程序授权登录视频教程
如果对你有用,别忘了一键三连呀

评论 3 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

好天真的龙

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值