搜索

查看: 3088|回复: 11

[JavaScript] 微信小程序授权登录的最新实现方案详解(2023年)

[复制链接]
发表于 2023-5-4 11:48:11 | 显示全部楼层 |阅读模式
Editor 2023-5-4 11:48:11 3088 11 看全部
目录
  • 微信授权登录
  • wx.getUserProfile方法获取用户信息
  • 退出登录
  • 与本地缓存wx.setStorageSync结合使用
  • 总结
  • 补充:wx.getUserProfile已被回收
    微信授权登录
    我们的项目开发有时候用到用户的一些信息,比如头像,昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息,它的使用非常简单。

    wx.getUserProfile方法获取用户信息
    不推荐使用 wx.getUserInfo 获取用户信息,自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息

    2023022211291066.jpg

    2023022211291066.jpg


    推荐使用 wx.getUserProfile 获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认。
    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

    2023022211291067.jpg

    2023022211291067.jpg


    简单示例代码
    官网的示例代码写得较为复杂,这里我写了一些简单的代码,以便学习。

    获取头像昵称
       
        {{userInfo.nickName}}

    .userInfo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .userInfo image{
        width: 200rpx;
        height: 200rpx;
        border-radius: 200rpx;
    }
    Page({
        data: {
            userInfo: '', //用于存放获取的用户信息
        },
        login() {
            wx.getUserProfile({
                desc: '必须授权才能继续使用', // 必填 声明获取用户个人信息后的用途,后续会展示在弹窗中
                success:(res)=> {
                    console.log('授权成功', res);
                    this.setData({
                        userInfo:res.userInfo
                    })
                },
                fail:(err)=> {
                    console.log('授权失败', err);
                }
            })
        }
    })

    2023022211291068.png

    2023022211291068.png


    2023022211291069.png

    2023022211291069.png


    2023022211291070.png

    2023022211291070.png


    退出登录
    由于上面用的判断是否登录,是用userInfo是否为空判断的,所以我们退出登录只要把userInfo清空就行了,就是这么简单粗暴!

    2023022211291071.png

    2023022211291071.png


    2023022211291072.png

    2023022211291072.png


    2023022211291073.png

    2023022211291073.png


    与本地缓存wx.setStorageSync结合使用
    如果没有本地缓存,每次打开小程序都需要再授权一次,太麻烦了,而且本地缓存中的数据其他页面也能使用,不用重复获取。
    完整代码

    获取头像昵称
       
        {{userInfo.nickName}}
        退出登录
       

    Page({
        data: {
            userInfo: '', //用于存放获取的用户信息
        },
        onLoad(){
            let user = wx.getStorageSync('user')
            this.setData({
              userInfo: user
            })
        },
        // 授权登录
        login() {
            wx.getUserProfile({
                desc: '必须授权才能继续使用', // 必填 声明获取用户个人信息后的用途,后续会展示在弹窗中
                success:(res)=> {
                    console.log('授权成功', res);
                    wx.setStorageSync('user',res.userInfo)
                    this.setData({
                        userInfo:res.userInfo
                    })
                },
                fail:(err)=> {
                    console.log('授权失败', err);
                }
            })
        },
        // 退出登录
        loginOut(){
            this.setData({
                userInfo:''
            })
            // 清空缓存
            wx.setStorageSync('user',null)
        }
       
    })

    总结
    wx.getUserProfile用于授权登录,获取用户信息,但它返回的加密数据中不包含 openId 和 unionId 字段,只包含头像昵称,所以需要其他信息的需要结合云开发云函数使用

    补充:wx.getUserProfile已被回收
    wx真的是说改就改,之前就已经改过好几次了

    2023022211291074.jpg

    2023022211291074.jpg


    调整原因:

    2023022211291075.png

    2023022211291075.png


    获取用户头像昵称,可以使用「头像昵称填写能力」(基础库 2.21.2 版本开始支持,覆盖iOS与安卓微信 8.0.16 以上版本)
    到此这篇关于微信小程序授权登录的最新实现方案的文章就介绍到这了,更多相关微信小程序授权登录内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛
  • 回复

    使用道具 举报

    发表于 2023-6-29 11:25:02 | 显示全部楼层
    我是的十八簿 2023-6-29 11:25:02 看全部
    这个帖子不回对不起自己!我想我是一天也不能离开知鸟论坛
    回复

    使用道具 举报

    发表于 2023-6-29 12:48:56 | 显示全部楼层
    哈哈SE7 2023-6-29 12:48:56 看全部
    感谢楼主的无私分享!要想知鸟论坛好 就靠你我他
    回复

    使用道具 举报

    发表于 2023-6-30 09:05:04 | 显示全部楼层
    伊索谗言 2023-6-30 09:05:04 看全部
    楼主,大恩不言谢了!知鸟论坛是最棒的!
    回复

    使用道具 举报

    发表于 2023-6-30 19:28:00 | 显示全部楼层
    心随674 2023-6-30 19:28:00 看全部
    楼主发贴辛苦了,谢谢楼主分享!我觉得知鸟论坛是注册对了!
    回复

    使用道具 举报

    发表于 2023-6-30 19:34:18 | 显示全部楼层
    墙和鸡蛋 2023-6-30 19:34:18 看全部
    楼主,大恩不言谢了!知鸟论坛是最棒的!
    回复

    使用道具 举报

    发表于 2023-7-3 10:56:01 | 显示全部楼层
    Gordon520 2023-7-3 10:56:01 看全部
    这个帖子不回对不起自己!我想我是一天也不能离开知鸟论坛
    回复

    使用道具 举报

    发表于 2023-7-3 18:07:07 | 显示全部楼层
    普通人物怨 2023-7-3 18:07:07 看全部
    这个帖子不回对不起自己!我想我是一天也不能离开知鸟论坛
    回复

    使用道具 举报

    发表于 2023-7-3 22:11:05 | 显示全部楼层
    麻辣鸡翅 2023-7-3 22:11:05 看全部
    这东西我收了!谢谢楼主!知鸟论坛真好!
    回复

    使用道具 举报

    发表于 2023-7-4 00:16:57 | 显示全部楼层
    惜颜705 2023-7-4 00:16:57 看全部
    楼主太厉害了!楼主,I*老*虎*U!我觉得知鸟论坛真是个好地方!
    回复

    使用道具 举报

    • 您可能感兴趣
    点击右侧快捷回复 【请勿灌水】
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则 返回列表

    RSS订阅| SiteMap| 小黑屋| 知鸟论坛
    联系邮箱E-mail:zniao@foxmail.com
    快速回复 返回顶部 返回列表