微信小程序授权 获取用户信息

本文介绍小程序登录流程的优化策略,避免直接弹出授权框导致用户体验不佳。推荐使用按钮组件引导用户授权,展示小程序功能吸引用户探索。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小程序在18年4月25日做了一次更新,不再支持直接弹出授权信息框

具体代码请看这里:  >>       获取用户信息(用户信息、获取unionId、openId)请移步到这里

 

用户打开小程序时,直接弹框获取用户信息授权,可能会立马懵圈:

 

你是谁?

我在哪里?

我为什么要同意?……

 

 

相当一部分用户下意识会拒绝授权——这样不合理的登录流程既造成了用户的困扰,还流失了用户。

 

用户通过小程序可以快速获取服务,因此在访问小程序的第一个页面非常重要

 

小程序和小游戏内的用户登录,我们推荐使用以下两种方式获取用户信息:

 

▷ 按钮组件的登录方式,用户主动点击按钮可以拉起用户授权弹框,获取用户头像、昵称等信息;

 

▷ 在不获取用户信息的情况下,可展示用户头像昵称

 

也提醒大家:

 

用户在没有任何操作的情况直接弹出授权的登录方式将逐渐不再支持,受影响的有 wx.getUserInfo 接口,以及 wx.authorize 接口传入 scope="scope.userInfo" 的情况。

 

为什么平台要做接口调整?

 

小程序提供wx.login 和 wx.getUserInfo 接口,用于获取用户的 openID 和基本信息

 

推出这两个接口的初衷是希望:

 

当用户使用小程序时,只有访问到真正需要登录的页面,才需要授权并登录。

 

对于一个互联网产品而言,第一个页面决定了用户对这个产品的认知,用户会选择是否继续使用这个产品。

 

一个优秀的互联网产品,能够给用户留下一个好的第一印象,用户可以快速了解你的产品,接收到你想要传递的服务信息,从而产生相应的操作行为。

 

一个优秀的小程序会吸引用户在小程序里进行探索,完成你期望他们去做的事,比如会员注册、商品购买等。

 

试想一下如果一个品牌的商品官网,一进入要求用户登录才能查看产品信息是什么感觉呢?

 

因此良好的用户登录体验非常重要。

 

 

如何设计登录流程?

 

用户打开小程序时,看第一眼的时候,开发者需要专注以下两个目标:

 

▷ 精准快速地传达产品理念,开发者要让用户能够快速了解自己的产品和服务;

 

▷ 将用户流量进行转化,让用户能方便操作或者交易。

 

一般而言,用户打开小程序后看到的第一个页面,先不要直接弹出授权框,第一个页面可以包含以下内容:

 

▷ 展示你的小程序功能(如产品、服务、活动等) ,让用户清晰地知道小程序是做什么用的,这些内容可以是你的精选内容;

 

▷ 激发用户的探索欲,通过描述或者图片吸引用户注意力;

 

▷ 按照自己的产品目标,给用户提供清晰明确的下一步操作(查看详情、购买等)。

 

如果某些特殊小程序在使用前一定需要用户登录,或者已经进行到需要用户登录的操作时,可以将 button 组件(其中 open-type 属性指定为 getUserInfo)放置到页面中,页面上可以大致说明以下要点:

 

为什么需要我授权?

需要我什么信息?

授权后我得到什么好处呢?

 

接下来在页面上放置一个明显的登录按钮, 建议这个页面上不要有额外的点击区域,以免分散用户注意力,让用户专注于登录这件事情。

 

简单的开发建议

1

当用户打开小程序时访问第一个页面时,先通过 wx.login,获取用户 openID 。这时无需弹框授权,开发者拿到 openID 可以建立自身的帐号 ID。

2

在第一步中,拿到 openID 后,判断是新用户还是老用户。如果是老用户,可以直接登录;如果是新用户,可先在小程序首页展示你的信息服务,让用户对这个小程序有大概的了解,再引导用户进行下一步的操作。

3

当需要获取用户头像昵称的时候,对用户展示一个登录页面,这个页面只有一个最重要的操作,引导用户进行登录。

 

小程序中,在页面中加入一个 button 按钮,并将 open-type 属性设置为 getUserInfo 。

 

以小程序为例:

 

<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">微信登录</button>

 

对于功能较简单的小程序或者小游戏而言,如果不是必须要获得用户的头像昵称,建议可先通过wx.login 拿到 openID 后,使用 open-data 方式或者开放数据域的方式展示用户信息,整个过程都无需用户授权。

 

Tips:

 

1、在用户登录后,开发者需要存储用户的 unionID,而且建议只把 unionID 作为互通的用户标识,不要直接使用 unionID 作为用户 ID。因为一旦小程序迁移到其他的开放平台下,unionID 是会改变的,而 openID 是不变的。

 

2、用 button 组件的方式获得用户授权后,调用 wx.getUserInfo 就可以直接获取用户信息。这个的意义在于获取过一次之后,用户有可能改昵称头像,因此为了及时同步,最好是定期获取用户信息。

 

这里两个小提示:

 

▷ 定期使用 wx.getUserInfo 获取并更新用户的信息;

 

 如果用户授权过一次之后,又在设置中关掉了授权(或者本地删除了小程序),那这时再调用 wx.getUserInfo 也是不会成功的,需要重新获得授权

 

相关开发文档参考:

 

▷ 小程序

1、小程序wx.login

2、button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息

3、open-data 展示用户基本信息

 

▷ 小游戏

1、小游戏wx.login

2、用户信息按钮 UserInfoButton

3、开放数据域下的展示用户信息

 

### 实现 UniApp 中微信小程序授权获取用户信息的方法 在 UniApp 开发环境中,为了实现微信小程序授权并成功获取用户信息(包括手机号),需要遵循特定的工作流来确保操作顺利进行。此过程不仅涉及前端代码逻辑的设计,还涉及到后端对于接收到的数据处理方式。 #### 前置准备 确保已经在微信公众平台的小程序管理后台完成了必要的设置工作,比如配置服务器域名以及开启相应的接口权限等[^2]。这些准备工作是后续能够正常调用微信开放能力的基础。 #### 获取用户基本信息 针对新版 uni-app 微信小程序,在尝试通过 `wx.getUserProfile` API 来获取用户头像昵称等公开资料时遇到无法弹出授权框或返回数据为空的情况,这可能是由于未正确触发该方法或是用户的隐私设定所造成的[^1]。正确的做法应当是在适当的应用场景下引导用户主动点击按钮从而发起请求: ```javascript // 调用 wx.getUserProfile 接口前先检查是否已获得授权 uni.getSetting({ success(res) { if (!res.authSetting['scope.userInfo']) { // 如果没有授权,则显示提示让用户去设置页面打开相应权限 uni.showModal({ title: '提示', content: '您还未授予本应用访问您的个人信息权限,请前往设置页开启。', showCancel: false, confirmText: "立即前往", success() { uni.openSetting(); } }); } else { // 已经有授权的情况下可以直接调用 getUserProfile wx.getUserProfile({ desc: '用于完善会员资料', // 这里填写具体用途描述 success(infoRes){ console.log('用户同意提供信息:', infoRes); // 处理得到的信息... }, fail(err){ console.error('获取失败:', err); } }) } } }); ``` #### 获取用户手机号码 当目标是从用户处收集电话号码这类敏感信息时,除了上述提到的基本信息外还需要额外注意安全性合法性方面的要求。开发者应该利用官方提供的组件 `<button open-type="getPhoneNumber">` 结合服务端验证机制完成这一功能。下面是一个简单的例子展示如何捕获并发送加密后的手机号给到自己的服务器做进一步解析: ```html <button type="primary" @click="bindGetPhoneNumber" open-type="getPhoneNumber"> 点击绑定手机 </button> ``` ```javascript methods: { bindGetPhoneNumber(e) { const iv = e.detail.iv; const encryptedData = e.detail.encryptedData; // 将加密过的数据传送到后端解密 this.$http.post('/api/decryptPhone',{ iv, encryptedData }).then(response => { console.log('解密后的手机号:', response.data.phoneNumber); }).catch(error => { console.error('解密过程中出现问题:', error.message); }); } } ``` 需要注意的是,以上提及的所有交互都应严格遵守微信关于个人隐私保护的规定,并向用户提供清晰的操作指引充分的理由说明为何要获取此类信息
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值