超简单实现小程序用户授权登录与退出

简介: 本文介绍了如何轻松实现小程序的用户授权登录与退出功能。通过调用微信的`wx.getUserProfile` API获取用户信息,成功后存储到本地以实现授权登录,并在WXML、CSS和JS中提供示例代码。用户信息存储使用`wx.setStorageSync`,退出登录则清除相关缓存,提升用户体验。

超简单实现小程序用户授权登录与退出

先看效果,一睹为快
image.png

1. 话不多说,上代码

1.1 wxml


<view class="header">
<button class="button" wx:if="{
   
   {!userInfo}}" bindtap="login" type="primary">授权登录</button>
<view wx:else class="root">
 <image src="{
   
   {userInfo.avatarUrl}}" class="toxiang"></image>
 <text class="nicheng">{
   
   {
   
   userInfo.nickName}}</text>
 <text class="login_out" bindtap="loginout">退出登录</text>
</view>
</view>

1.2 css

.header{
   
   
  height: 450rpx;
}
.button{
   
   
  margin-top: 150rpx;
  width: 60%;
}
.nicheng{
   
   
  color: rgb(5, 5, 5);
}
.root{
   
   
  display: flex;
  align-items: center;
  flex-direction: column;
}
.toxiang{
   
   
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}
.login_out{
   
   
  font-size: 33rpx;
  color:grey;
  margin-top: 20rpx;
}

1.3 js

Page({
   
   
  data: {
   
   
    userInfo:''
    },
    onLoad(){
   
   
     let user=wx.getStorageSync('user')
     this.setData({
   
   
      userInfo:user
    })
    },
    //授权登录
  login(){
   
   
    wx.getUserProfile({
   
   
      desc:'必须授权才能上使用',
      success:res=>{
   
   
      let user=res.userInfo
      //把用户信息缓存在本地
      wx.setStorageSync('user', user)
      this.setData({
   
   
        userInfo:user
      })
      },
      fail:res=>{
   
   
        console.log("失败",res)
      }
    })
  },
  //退出登录
  loginout(){
   
   
    this.setData({
   
   
      userInfo:''
    })
    //清理本地缓存
    wx.setStorageSync('user', null)
  },
})

2.原理解析

主要用到了微信提供的 wx.getUserProfile API接口,当页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo,用户登录以后需要把信息缓存到本地,这样当用户再次进入小程序时就不会频繁的进行登录处理,提高用户的体验。
缓存到本地,是通过使用 wx.setStorageSync把信息缓存到本地。

目录
相关文章
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
小程序 API
微信小程序——授权登录
微信小程序——授权登录
34 0
|
1月前
|
前端开发 小程序 JavaScript
电商小程序04实现登录逻辑
电商小程序04实现登录逻辑
|
1月前
|
小程序 JavaScript
小程序授权获取昵称
小程序授权获取昵称
|
1月前
|
小程序 JavaScript
小程序授权获取头像
小程序授权获取头像
|
10天前
|
小程序 前端开发 Java
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
|
22天前
|
小程序 JavaScript 数据库
小程序登录页面
该文介绍了使用小程序云开发实现登录和注册的步骤,包括界面设计和后端逻辑。界面使用了`wxss`和`wxml`编写,样式精致,包含手机号和密码输入、登录按钮、注册和忘记密码选项。在`js`中,重点处理了用户输入的账号和密码,通过云数据库查询验证用户是否存在,使用标志位`flag`判断,若账号或密码错误,显示相应提示。文章总结了利用for循环比对数据库账号的难点,并表达了作者的学习心得。
24 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
电商小程序03登录页面开发
电商小程序03登录页面开发
|
1月前
|
小程序 JavaScript
微信小程序授权登录?
微信小程序授权登录?
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
149 63

热门文章

最新文章