2022年微信小程序授权登录的最新实现方案(代码片段)

coderYYY coderYYY     2023-03-28     599

关键词:

微信授权登录

我们的项目开发有时候用到用户的一些信息,比如头像,昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息,它的使用非常简单。

wx.getUserProfile方法获取用户信息

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

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

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

<!-- userInfo如果为空证明没有登录 -->
<button wx-if="!userInfo" bindtap="login">获取头像昵称</button>
<view wx:else class="userInfo">
    <image src="userInfo.avatarUrl"></image>
    <text>userInfo.nickName</text>
</view>
.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);
            
        )
    

)



退出登录

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


与本地缓存wx.setStorageSync结合使用

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

完整代码

<!-- userInfo如果为空证明没有登录 -->
<button wx-if="!userInfo" bindtap="login">获取头像昵称</button>
<view wx:else class="userInfo">
    <image src="userInfo.avatarUrl"></image>
    <text>userInfo.nickName</text>
    <button type="warn" bindtap="loginOut">退出登录</button>
    
</view>
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真的是说改就改,之前就已经改过好几次了

调整原因:

获取用户头像昵称,可以使用「头像昵称填写能力」(基础库 2.21.2 版本开始支持,覆盖iOS与安卓微信 8.0.16 以上版本)

一份热乎的2022年微信小程序使用经验,快收下!

点击上方 前端下午茶,关注公众号回复加群,加入技术交流群交流群作者:程序媛最可爱原文:https://juejin.cn/post/7081452878690254884上个月写了一个公司的微信小程序项目,趁热打铁,分享一篇开发教程,... 查看详情

微信小程序入门之授权登录(代码片段)

微信小程序一.实现微信小程序授权登录微信小程序每次获得用户的信息时需要授权登录,下面的代码可以实现以下功能Page(data:nickName:'',dianji()console.log("点击了按按钮")wx.getUserProfile(desc:'获取用户的信息',//获取用... 查看详情

微信小程序用户授权以及判断登录是否过期的方法(代码片段)

实现效果场景在打开小程序时判断用户是否过期(如果未过期则重新登录),然后获取用户信息,进而在前台显示;主要实现两个功能:判断登录是否过期,如果过期则就重新登录,如果没过期就提示未过期&... 查看详情

微信小程序可以实现自动登录吗?

...在,不存在保存,存在就是老用户,自动登录参考技术A微信小程序类似后台语言,只能在页面绑定对象,不能动态添加,如果要添加可以先隐藏再显示,列表动态加载,可以先绑定列表,改变绑定的数据集它自动会改变 查看详情

微信小程序怎么授权登录

从你的描述来看,微信小程序想要授权登录的话,建议打开该小程序,然后点击登录,然后选择微信授权登录。参考技术A回答①解除授权,②重新授权。请在微信公众平台登录您的微信小程序帐号,在微信小程序后台,将小程序中... 查看详情

小程序授权登录最新解决方案(代码片段)

小程序授权登录最新解决方案一、在WXML中设置单击事件,也可以直接放在第一个页面的ONLOAND函数中,用户进入小程序后自动弹出二、在JS中设置Button的触发代码三、演示一、在WXML中设置单击事件,也可以直接放在第... 查看详情

微信小程序授权登录详解(附完整源码)

一、前言由于微信官方修改了getUserInfo接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过button去触发。官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01二、实现思路自己写一个微信... 查看详情

微信小程序登录对接django后端实现jwt方式验证登录(代码片段)

...料和头像,点击修改资料可以修改部分资料。流程1.使用微信小程序登录和获取用户信息Api接口2.把Api获取的用户资料和code发送给django后端3.通过微信接口把code换取成openid4.后端将openid作为用户名和密码5.后端通过JSONwebtoken方式登... 查看详情

微信小程序授权登录三种实现方式(代码片段)

...0c;将code传给服务端2、服务端使用code+appid+appsecret向微信换取(调用auth.code2Session接口)用户唯一标识openid和会话密钥session_key3、服务端自定义登录状态token(与openid、session_key关联)返回客户端4、客户端将登... 查看详情

为啥微信小程序登陆的时候一直是请稍后,网络没问题就是登陆不上去?

有些微信小程序,因为太多人同时登录会导致网络堵塞,所以会一直登录不上去,等到人少一点的时候再登录就可以登上去。参考技术A网络没有问题,就是登录不上去,那你看一下是否是登录的人太多,或者是你的手机太卡。 ... 查看详情

如何注销微信小程序的授权?

用户访问微信小程序时,都需要微信授权登录,当我们已经授权登录之后,想要清除小程序登录信息,怎么解决,此时需要解绑授权登录,下面木鱼小铺小编就和大家分享一下微信小程序怎么解绑授权,清除小程序登录信息?步... 查看详情

微信小程序登陆不上去怎么回事?

以微信7.0.18为例,微信登不上小程序的原因:1、误将微信公众授权到微信小程序。2、当前网络信号不好。3、小程序本身出现了故障问题。4、手机系统问题。参考技术A微信小程序的账号有别于公众号,因此在扫描授权的时候,... 查看详情

微信小程序开发工具是否有授权的

是的,微信小程序开发工具在首次使用时需要进行授权。授权过程是为了确保开发者身份的合法性,同时也是为了保护用户数据的安全。在授权成功后,开发者可以在小程序开发工具中进行小程序的开发、调试、打包等一系列操... 查看详情

微信小程序-用户信息及登录(代码片段)

一、获取用户信息的方法wx.getUserProfile(Objectobject)获取用户信息。页面产生点击事件(例如button上bindtap的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回userInfo。该接口用于替换wx.getUserInfo。实... 查看详情

微信小程序-用户信息及登录(代码片段)

一、获取用户信息的方法wx.getUserProfile(Objectobject)获取用户信息。页面产生点击事件(例如button上bindtap的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回userInfo。该接口用于替换wx.getUserInfo。实... 查看详情

微信小程序的登录和授权注意事项

参考技术A 最近负责了一个微信小程序项目,在微信小程序的登录和授权上遇到了一些问题。项目结束后把遇到的问题整理了一下,希望能对大家有所帮助~ 关于游客模式,官方的说法是为了给用户提供更好的使用体验... 查看详情

2021年微信小程序大盘数据:日活超过4.5亿

...曾鸣披露了2021年小程序的大盘数据。数据显示,2021年微信小程序日活超过4.5亿,日均使用次数同比2020年增长了32%,小程序的支付用户增长了80%,并且客单价相比2020大幅提升。具体来看,2021年累计超过7亿用... 查看详情

微信小程序获取用户信息流程(代码片段)

获取用户信息与其他授权不太一样,其他授权会自动弹出对话框,请求获取用户授权,但获取用户信息不回,需要引导用户点击授权按钮同意授权获取用户基本信息1、前端页面要有授权登录按钮<buttonwx:if="canIUse"open-type="getUserI... 查看详情