微信小程序手机号授权登录
文章目录
- 小程序端
- 服务端
- 注意事项
微信小程序,手机号授权登录需求。
大体流程是这样的:
- 小程序端使用
getPhoneNumber
向微信平台获取授权 - 通过微信授权后,小程序端接收微信授权后的回调
- 小程序携带微信的回调请求自己的服务端
- 服务端请求微信获取手机号并将手机号回调给小程序端
小程序端
具体步骤和代码如下:
第一步:
<button class="login-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"><text>登录/注册</text>
</button>
必须是通过 button 组件
,open-type="getPhoneNumber"
,让用户自己手动点击按钮才能获取手机号。
第二步:
用户点击按钮同意获取手机号
第三步:
用户允许后,通过回调方法拿到获取手机号的Code:
回调方法:
getPhoneNumber(e) {console.log(e)const _this = thiswx.showLoading({title: '',})if (e.detail.errMsg == "getPhoneNumber:ok") {// 这里携带参数请求自己的服务器来获取手机号// Code ...}
}
打印回调参数 e :
...
currentTarget:
dataset: {}
id: ""
offsetLeft: 86
offsetTop: 34
__proto__: Object
detail:
cloudID: "69_7GVM-VkjQvoxxxoU5lW33XmDqsmxxxPazG6c5Rcfld-xxx"
code: "f446fxxx58250428xxxx017ffbdceb2b8xxx6c22948d6xxx3de52a"
encryptedData: "hY6Y+s9cxxx7t4rUWJcoQ3rf6PTnRr7/jSiK/iajrUkhZ6xxxYJ/nDLH5hIRDUwRrT0/FPxxxDVQdGO+3MBZQS8Pe1l9FPc6xxxQDLM2tR8CoyMLvGQ/ryt3mGJExxx1+kwnw+zqMsCBrV0KK6jcnlqWVhds8YjkRS30nroA=="
errMsg: "getPhoneNumber:ok"
iv: "C0mxz6xxx7qFxxxxPg=="
...
新版接口会将 cloudID
, code
, encryptedData
, iv
等参数一并返回。
在新本中,code 是要给后台用来获取手机号的,在旧版获取手机号的接口里,不会返回 code,如果你使用旧版本,就将 encryptedData
和 iv
传给服务端,服务端解密 encryptedData 来获取手机号。
新版本中,直接将 code 给服务端,服务端通过 code 和其他参数从微信平台先获取 accessToken,获取到之后,再使用token请求获取手机号的接口,获取完之后将明文手机号返回给小程序端。
建议使用新版获取手机号的方法。
服务端
服务端需要调用两个接口:
- getAccessToken: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
这三个参数中appid和secret是需要从小程序端通过接口上传的。用户点击”允许“获取手机号的回调里,通过请求服务端的接口,将这些参数上传给服务端,服务端携带这些参数去获取access_token,下一步调用 getPhoneNumber 这个接口需要使用 token才能获取。
- getPhoneNumber: https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
服务端使用客户端上传上来的code和自己从上一步获取到的token,就可以请求微信来获取手机号了,获取到手机号之后将手机号返回给小程序端即可。
注意事项
需要注意:
3. 提前去调用 wx.login
进行登录并获取 code
授权码
4. 注意 wx.login 返回的 code 和 获取手机号回调的 code,并非同一个code,一个是微信授权码,一个是用需要给服务端用来获取accessToken的授权码code
5. 服务端getAccessToken接口里传的参数 grant_type 的值是 client_credential
,而不是 authorization_code
。
微信小程序手机号授权登录相关推荐
- 微信小程序手机号+授权登录
wxml页面 <view class="input-container"><view class="input-button-container row ...
- 微信小程序之授权登录
微信小程序之授权登录 之前微信授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗.由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通 ...
- 微信登录 后台 java_Java 后端 (Spring boot)+微信小程序的授权登录
微信小程序的授权登录 第一.Java后端代码如下 登录的接口的参数是微信小程序前端必须要传的参数微信小程序登录.授权的用户基本信息 wx.getUserInfo 特别注意 appid 和secret. ...
- 微信小程序之授权登录(附完整源码)
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
- 微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...
- 微信小程序之授权登录--项目需要
1.由于项目需要,需要实现自己的微信小程序 用微信授权登录. 2.参考此项目https://blog.csdn.net/weidong_y/article/details/79636386 3.其中的 ...
- 企业微信小程序_授权登录接口获取用户userid
文章目录 一.前置知识 1. 阅读 企业微信小程序开发文档 2. 企业微信小程序登录流程 3. 微信小程序区别 二.前端部分 2.1. 调用登录接口 2.2. 请求后端接口 2.3. 项目源码 三.后 ...
- 微信小程序的授权登录功能
注意:首先微信小程序是不能一进入小程序就让用户授权登录的,一进入小程序就让用户授权登录,是审核不通过的: 图一的这个提示框是我自己写的:要想弹出微信的微信授权提示框,必须用一个按钮来触发,可用授权登录 ...
- 【Springboot】整合wxjava实现 微信小程序:授权登录
文章目录 一.wxjava是什么 二.使用步骤 1.引入依赖 2.配置yml 3.小程序的配置 4.后端的业务逻辑代码 controller service impl dto 5.前端的业务逻辑代码 ...
最新文章
- linux c 多态原理,看了所谓的面向对象中靠继承多态实现的所谓重用 哥笑了
- 协鑫集成进军乌克兰光伏市场 切尔诺贝利望获重生
- 记录之使用3080ti运行tensorflow-gpu=1.x版本的源码
- java整型和浮点型_Java基本的程序结构设计 整形和浮点型
- 2020年上半年内容行业版权报告
- 七点讲透分布式架构的前世今生,面试官都不知道的概念来了
- app做好后如何上线_传统企业如何做好线上线下全网营销?不知道的建议看完这篇干货...
- django再windows下测试命令总结
- 逆向project实战--Afkayas.1
- Nginx 二级子域名完美方案
- LeetCode简单题目(#27 #28 #35 #38)-2019.10.23-4道
- 201671010129 2016—2017—2 《Java程序设计》Java总结
- Java多线程(六)线程池
- Luogu4113 [HEOI2012]采花
- Face++ AI换脸
- fm信号表达式_chirp信号表达式
- 维度表创建规范_数据仓库维度建模-维度表设计
- mac book pro高清录屏教程(obs录屏+麦克风录制+soundflower电脑声录制)三合一
- STM32CubeMX和STM32CubeIDE组合,定义STM32开发新方式
- 兰博基尼Reventon单挑喷气式战斗机(图)