2023最新使用微信小程序完成一键授权登录

这篇具有很好参考价值的文章主要介绍了2023最新使用微信小程序完成一键授权登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

2023最新使用微信小程序完成一键授权登录,微信小程序,小程序

前言:

使用开发工具:小程序。在我这一篇已经详细介绍了小程序的安装介绍今天我给大家带来的是微信的一键授权登录,保存用户信息,退出的功能!!!希望看完了这篇博客能够对你有帮助!!!

效果:

2023最新使用微信小程序完成一键授权登录,微信小程序,小程序

登录获取到用户信息:

思路:点击按钮获取到用户信息(调用方法wx.getUserProfile

遇到问题:头像,昵称显示是初始化的状态。

解决方法:将小程序的基础库版本调低。(版本问题)

  //获取用户信息
  getUserProfile() {
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {//类似javafx的em表达式
        console.log("获取用户信息成功", res);
        let user = res.userInfo;
        wx.setStorageSync('user', user); //保存用户信息到本地缓存。相当于session
        this.setData({
          nickName: true,
          userInfo: user,
        })
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  }

保存用户信息到缓存:

问题:如果我们每次进入页面都让用户点击授权,就有点太烦锁了,其实可以在第一次授权成功获取用户信息的时候把数据缓存在本地缓存的。

解决方法:将获取用户信息设置保存(调用方法wx.setUserProfile设置用户信息)

  // 保存缓存
  onShow(options) {
    console.log("保存缓存");
    this.getUserProfile();
    var user = wx.getStorageSync('user'); //从本地缓存去用户信息
    if (user && user.nickName) { //如果本地缓存有信息就显示本地缓存
      this.setData({
        nickName: true,
        userInfo: user,
      })
    }
  }

退出登录:

思路:将获取的用户信息自己设置为空。

主要就是要调用方法(查看官方API文档)

wx.getUserProfile获取用户信息 wx.setUserProfile设置用户信息

wx.setStorageSync存数据到本地缓存 wx.getStorageSync取缓存数据

  // 退出
  loginOut(options) {
    this.setData({
      nickName: "",
      user: "",
    })
    // 赋予用户信息为空
    wx.setStorageSync('user', null) //保存用户信息到本地缓存。相当于session
    console.log("调用退出");
  }

index.wxml代码:

<!-- html代码 -->
<!--用户授权了,就显示头像和昵称-->
<view class="header" wx:if="{{nickName}}" bindtap='change'>
	<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
	<text class="userinfo-nickname">{{userInfo.nickName}}</text>
  <button type="default" bindtap="loginOut">退出登陆</button>
</view>
<!--如果用户没有授权,显示登陆按钮  -->
<view wx:if="{{!nickName}}" class="btn-login">
	<button type="primary" bindtap="getUserProfile">授权登陆</button>
</view>

index.wxss代码:文章来源地址https://www.toymoban.com/news/detail-713011.html

page {
  /* 整个背景 */
  background: gainsboro;
}
.header {
  width: 100%;
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  align-items: center;
  background: white;
}
.btn-login {
  padding: 8%;
  background: white;
}
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
  margin-block-start: 10px;

}
.userinfo-nickname {
  margin-top: 20rpx;
  font-size: 38rpx;
}
}

到了这里,关于2023最新使用微信小程序完成一键授权登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序一键授权之前先勾选用户协议

    微信小程序授权获取手机号之前勾选我已阅读并同意协议 想要实现的效果:用户点击微信一键注册按钮,如果用户没有勾选协议,就提示请勾选用户协议,如果勾选了,就直接获取微信用户的手机号密文。 开始想的是直接在getPhoneNumber()方法中加一个判断。这种做法存在的

    2024年02月12日
    浏览(14)
  • 最新版微信小程序授权登录(自定义头像昵称)

            根据官方微信小程序开发关于登录授权API的调整,自 2022年10月25日起有关API接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。(如下图所示) ​ ​ ​ ​ button标签中将open-type=\\\"chooseAvatar\\\"是用来设置用户头像,并且获得一个临时路径。 js代

    2024年02月12日
    浏览(17)
  • 微信小程序登录适配(2023年最新)

    众所周知,微信小程序开发文档更新那不是一般的快,开发者都来不及去适配 😭 今天就来说说登录这一块到底改了哪些地方,以及怎么去适配 我们先来看看更改了哪些? 先放小程序登录文档这块更新的公告:https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56

    2024年02月11日
    浏览(29)
  • 23年9月最新微信小程序 手机号授权 (uniapp+盛派SDK) 帮你踩坑

    一、背景 微信小程序手机号授权接口,从23年8月开始实行付费验证。 文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html   新版手机号授权说明如下: 自2023年8月28日起 【手机号实时验证组件】将需要付费使用。标准单价为:每次组件调用

    2024年02月08日
    浏览(18)
  • 2023年最新微信小程序抓包教程

    01 开门见山 隔一个月发一篇文章,不过分。 首先回顾一下《微信绑定手机号数据库被脱库事件》,我也是第一时间得知了这个消息,然后跟踪了整件事情的经过。下面是这起事件的相关截图以及近日流出的一万条数据样本: 个人认为这件事也没什么,还不如关注一下之前

    2023年04月20日
    浏览(13)
  • 最新开源微信小程序一键开发平台源码 支持15大功能模块+完整前后端+搭建教程

    分享一个开源微信小程序一键开发综合平台源码,系统支持15大小程序功能模块,涉及各行各业,含完整前后端+详细搭建部署教程。   系统特色功能一览: 1、全新重构升级功能后端文件和前端文件; 2、整套源码已经集成15大主流小程序功能,涉及到各行各业 ,如:微同城

    2024年02月12日
    浏览(12)
  • uni-app微信小程序获取手机号授权登录(复制即用,js完成敏感数据对称解密,无需走服务端处理)

    目录 一、示例 二、具体实现说明 获取到的手机号 属性说明 属性名 说明 生效时机 @getphonenumber 获取用户手机号回调 open-type=\\\"getPhoneNumber\\\"  按钮写法 接口说明 接口 说明 wx.login() 获取登录凭证(code),通过凭证进而换取用户登录态信息 auth.code2Session 登录凭证校验 参数说明

    2024年02月10日
    浏览(19)
  • 微信小程序 - 2023年最新版手机号快捷登录详细教程

    最近开发公司手机快捷登录的功能,花费了不少时间,这里附上详细教程。 这里以海底捞小程序的图片为例,如有侵权请联系小编删除。 1、如果在微信开发者工具弹出下边的提示,不要慌张,用真机预览,其实是生效的。

    2024年02月09日
    浏览(24)
  • 微信小程序导入Vant Weapp ui组件库2023年最新版

    写这篇文章的原因是Vant Weapp的官方文档快速上手是有一定的问题的,没错,我就是那个试错的人,弄了一下午才发现问题所在,所以写了一篇正确的导入教程。 第一步:在项目所在目录打开控制台 第二步:查看自己电脑npm的版本,如果有会有版本号显示,没有则需要去下载

    2024年02月09日
    浏览(19)
  • 2023年最新微信小程序获取用户openid、头像昵称的填写能力和方法原生写法

    大家好,下面是我身为小白分享给小白哈, 不懂就问相互学习共同进步! 亲测自用原生代码,感谢大神指点赐教鼓励勿喷; 只需9个一键复制粘贴步骤一气呵成; 先来 本文最终主要实现效果 : 获取微信小程序用户头像昵称的填写能力和方法原生写法 一:先捋一捋思路逻辑

    2024年02月08日
    浏览(20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包