uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程，uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录（提供完整示例代码，一键复制开箱即用）

已于 2024-05-10 09:49:38 修改
阅读量2.6k 收藏 8
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： uniapp vue3 uniapp3小程序授权登录 微信小程序登录获取用户信息教程 获取用户昵称手机号头像信息登录 vue3版本小程序平台授权登录 uniap小程序端用户登录流程 uni完整的小程序平台登录源码
于 2023-10-26 15:02:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/134056175
版权

效果图

在uniapp微信小程序端开发中，超详细实现用户授权登录完整功能源码，用户授权后获取手机号/昵称/头像/性别等，提供完整思路流程及逻辑讲解。

uniapp Vue3和Vue2都能用，你也可以直接复制粘贴，然后改下参数放到你的项目中去就行。

在这里插入图片描述

整体思路

做功能之前，先来看一下整体流程是

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【uni-app】uniapp微信小程序授权登录（详细总结）
坚持不懈 一往无前
01-25 1万+
第一步： 获取code <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权微信</button> uni.getUserInfo({ provider: 'weixin', success: infoRes => { this.userInfo.
uniapp在小程序登录，获取用户信息，获取手机号等流程
热门推荐
tutodelinglimgho的博客
06-21 2万+
uniapp在小程序登录，获取用户信息，手机号等，如何查看自己的小程序appid与小程序密钥
在uniapp和微信公众号中使用微信授权登录-vue3-vuecli-ts
最新发布
m0_63007736的博客
03-25 637
因为需要做多端应用，所以选择使用uniapp来同时开发h5、微信小程序。这里只写有关微信网页的登录授权，非微信网页的后续会写对应的文章。技术栈：uniapp、vue3、vite编辑器：vscode。
uniapp微信一键登录微信授权
m0_45884629的博客
06-05 1万+
微信登录，uniapp微信授权登录
【微信授权登录】uniapp开发小程序，实现获取微信授权登录功能
qq_53509791的博客
07-17 4451
微信授权登录（获取用户信息）1.先获取用户信息——用户授权允许后，通过调用uni.login 可以获取到code。2.拿着获取到的code去调用——登录接口，可以获取到token。3.把token存入缓存。就可以在页面判断是否登录了。
【uniapp小程序授权登录】
LQS5858的博客
02-04 1593
uniapp，小程序，微信小程序
uniapp 小程序授权登录
qq_43432157的博客
01-13 3061
（1）小程序端调用 wx.login方法获取用户登录凭证code，将code发送给小程序后台服务器;服务器调用登录凭证校验接口（需要传参appid+appsecret+code）,进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等，将这些信息存入缓存中。 （2）点击button按钮触发获取微信手机号弹框! （3）绑定微信账号，存在相应手机号账号时自动登录；不存在时自动创建 具体代码如下： <template> <view cla
Uniapp微信授权头像
m0_54009761的博客
04-17 176
【代码】Uniapp微信授权头像。
基于vue2的uniapp 微信一键登录，获取手机号
wyz646的博客
05-06 2171
基于vue2的uniapp商城项目中的微信一键登录功能（后台是node.js写的）目前文档中该接口针对非个人开发者，所以只能用文档中提供的测试号实现一下功能。
前端uniapp-demo《实现微信小程序授权登录》
05-20
前端uniapp-demo《实现微信小程序授权登录》
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
获取手机号和IMEI.rar
11-08
获取手机号和IMEI.rar
uniapp 小程序授权登录，获取用户头像昵称等信息
01-26
uniapp 小程序授权登录，获取用户头像昵称等信息，代码已经封装好，下载就能用
智慧物业平台微信小程序 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
智慧物业平台微信小程序 | 小程序 | java | uniapp |springboot | 微信小程序 | 代码 1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 视频...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp+微信 获取微信手机号
weixin_42322441的博客
02-21 438
【代码】uniapp+微信 获取微信手机号。
uniapp 抖音小程序授权登录
qq_26711723的博客
09-07 2886
【代码】uniapp 抖音小程序授权登录。
微信小程序授权（uni-app)
weixin_45947191的博客
11-24 1273
uni-app 微信小程序账号授权
uniapp版微信小程序授权登录
03-07 276
uniapp版微信小程序授权登录。
解密微信小程序获取手机号
07-21
解密微信小程序获取手机号的过程需要以下步骤： 1. 首先，在wxml文件中，使用`button`按钮设置`open-type="getPhoneNumber"`并绑定`bindgetphonenumber`事件\[1\]\[2\]。 ```html <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> ``` 2. 在js文件中，定义`getPhoneNumber`函数，并在函数中获取手机号的加密数据\[1\]。 ```javascript Page({ getPhoneNumber(e) { console.log(e.detail.errMsg); console.log(e.detail.iv); console.log(e.detail.encryptedData); } }) ``` 3. 在第三方服务端，结合小程序的`session_key`和`app_id`，使用相应算法对加密数据进行解密，从中获取手机号\[2\]\[4\]。解密使用到的数据主要包括`appId`（开发者appid）、`session_key`、`encryptedData`（从`e.detail.encryptedData`获取）和`iv`（从`e.detail.iv`获取）。其中，为了获取`session_key`，需要使用`js_code`参数调用`wx.login`接口\[3\]。 总结起来，解密微信小程序获取手机号的过程包括用户点击获取手机号按钮，获取到加密数据后，在第三方服务端结合`session_key`和`app_id`进行解密操作，最终获取到真实手机号码\[1\]\[2\]\[3\]\[4\]。 #### 引用[.reference_title] - *1* [微信小程序获取手机号并解密详解](https://blog.csdn.net/a_115098/article/details/108491494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-7e93130b2a59999b59aa9656ab5ec596.142^v90^chatsearch,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [微信小程序实现获得用户手机号](https://blog.csdn.net/weixin_30951743/article/details/95030461)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-7e93130b2a59999b59aa9656ab5ec596.142^v90^chatsearch,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [微信小程序获取手机号并解密详解](https://blog.csdn.net/a_115098/article/details/108491494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-7e93130b2a59999b59aa9656ab5ec596.142^v90^chatsearch,239^v3^insert_chatgpt"}} ] [.reference_item] - *4* [微信小程序获取手机号并解密详解](https://blog.csdn.net/a_115098/article/details/108491494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-7e93130b2a59999b59aa9656ab5ec596.142^v90^chatsearch,239^v3^insert_chatgpt"}} ] [.reference_item] - *5* [微信小程序前端解密获取手机号](https://blog.csdn.net/qq_35946021/article/details/127995447)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-7e93130b2a59999b59aa9656ab5ec596.142^v90^chatsearch,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值