最新动态
uniapp开发微信小程序:用户手机号授权获取全流程详解与实战示例
2024-10-21 17:26

在这里插入图片描述

随着多端小程序研发工具的日益普及,诸如uniapp、Taro、Flutter等跨平台解决方案使得开发者能够高效地构建同时适配多个主流小程序平台(如微信、支付宝、百度、字节跳动等)的应用。尽管各平台间存在一定的差异性,但在获取用户手机号码这一核心需求上,大体遵循相似的流程和规范。

在开发微信小程序时,获取用户手机号码同样需要前端与后端协同工作。

  • 确保您的小程序已通过微信平台的开发者资质认证,具备获取用户手机号的权限。
  • 使用支持获取手机号功能的微信小程序基础库版本。
  • 用户必须主动同意授权小程序获取其手机号码。

每个小程序平台对于用户隐私保护和数据获取都有自己的规定和接口。在实施手机号获取功能时,首先要确保对目标平台的开发文档有深入了解,明确其获取手机号的接口调用方式、用户授权流程、数据传输格式等细节。例如,微信小程序使用接口,支付宝小程序则可能使用等类似方法。

在多端小程序研发工具中,通常会提供一套抽象层来适配不同平台的特性和API。利用这些抽象层,开发者可以编写一次代码,让其在各个平台上都能正确调用相应的获取手机号接口。

例如,uniapp提供了这样的组件和事件。

从基础库2.21.2开始,对换取手机号getphonenumber信息的方式进行了安全升级。(旧方式目前可以继续使用,但建议开发者使用新方式,以增强小程序安全性)另外,新方式不再需要提前调用wx.login进行登录,通过动态令牌code就能换取用户手机号信息,能避免使用session_key不一致的问题。

1.1、配置按钮组件

在需要获取手机号的页面中,添加一个组件,设置其属性为,并绑定事件处理回调

 

1.2、处理事件

 
参数类型说明codeString可通过动态令牌换取用户手机号。使用方法详情 phonenumber.getPhoneNumber 接口

getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的,不能混用。每个code有效期为5分钟,且只能消费一次。

1.3、用户授权提示

无论使用哪个小程序平台,获取用户手机号都需要用户明确授权。在设计交互时,应确保授权提示清晰、易于理解,并尊重用户体验。通常,这包括在请求授权前展示说明文字、弹窗提示用户授权的目的和影响,以及在授权失败时提供适当的错误提示和重试机制。

可以在按钮附近添加提示文案,告知用户点击后将请求获取手机号授权。可以使用默认的授权弹窗提示,也可以自定义授权弹窗提示。

将 bindgetphonenumber 事件回调中的动态令牌code传到开发者后台,在服务器端调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。后端创建一个API接口(如,用于接收前端发送的

调用方式

 

云调用

  • 出入参和HTTPS调用相同,调用方式可查看云调用说明文档
  • 接口方法为: openapi.phonenumber.getPhoneNumber

第三方调用

  • 调用方式以及出入参和HTTPS相同,仅是调用的token不同
  • 该接口所属的权限集id为:18
  • 服务商获得其中之一权限集授权后,可通过使用authorizer_access_token代商家进行调用

请求参数

属性类型必填说明access_tokenstring是接口调用凭证,该参数为 URL 参数,非 Body 参数。使用access_token或者authorizer_access_tokencodestring是手机号获取凭证openidstring否
 
 

根据解密得到的手机号和,更新或关联用户信息

 
 
 

1.1、配置按钮组件

在需要获取手机号的页面中,添加一个组件,设置其属性为,并绑定事件处理回调

 
 

在对应的Vue单文件组件(文件)中,编写方法处理回调信息

当用户授权之前,应该使得服务端session_key 和 当前session_key保持一致,不一致会导致手机号解密失败。

wx.login() 是微信小程序提供的一个 API,用于获取用户的登录凭证(code,之后可以通过这个凭证在后端服务器上换取 session_key 和 openid。

 

确保服务端session_key 和 当前session_key保持一致,再处理事件。

 

这里假设使用了或类似的HTTP库封装在中。实际项目中请替换为你的实际请求方式。

尽管前端调用方式可能因平台而异,但各平台返回的手机号数据通常都是加密的,需要后端通过特定的解密算法和平台提供的密钥(如)进行解密。因此,后端处理这部分逻辑时可以保持一致性,只需关注如何根据不同的平台标识正确地获取和使用密钥。解密后的手机号数据处理(如存储、验证、关联用户账户等)也是跨平台通用的。

2.1、接收前端数据

后端创建一个API接口(如,用于接收前端发送的、和

 

2.2、使用换取和

调用微信官方接口,使用换取和

 

2.3、解密手机号

使用和接收到的、解密手机号

 

这里假设已经引入了微信官方提供的解密工具类,并实现了相应的解密逻辑。

注意事项

  • 安全传输:前后端通信应使用HTTPS确保数据安全。
  • 合规使用:获取用户手机号后,严格遵守隐私政策,仅在用户同意范围内使用,并不得泄露给第三方。
  • 错误处理:全面考虑各种可能的错误情况,如网络异常、解密失败、用户拒绝授权等,并提供合理的用户反馈。

在使用多端小程序研发工具如uniapp开发微信小程序获取用户手机号码时,需确保已在小程序后台配置相关权限作为前置条件。前端通过调用API获取加密手机号,后端则负责解密处理。整个流程需遵守微信小程序平台的隐私政策和规定,确保用户数据的安全与合规,为用户提供透明、可控的授权体验。

在实际开发中,请始终参考最新的官方文档和示例进行编程。

在这里插入图片描述

    以上就是本篇文章【uniapp开发微信小程序:用户手机号授权获取全流程详解与实战示例】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/quote/21431.html 
     动态      相关文章      文章      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多