微信小程登录功能和获取手机号

微信小程序 + node

前端：

步骤一：要使用 button 按钮 open-type 属性值设置为 “getPhoneNumber” 并绑定 bindgetphonenumber 事件，目的为得到 encryptedData 和 iv 字段。或者调用 wx.getUserProfile(Object object) 也可以得到 encryptedData 和 iv 字段。

步骤二：使用 wx.login(Object object) 目的为得到 code 字段。

步骤三：发请求 wx.request(Object object) 把 code 、encryptedData 和 iv 字段传到后端。

后端：

步骤一：向腾讯服务器发请求 ( 详情请查看官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html ) ，服务器 ====》登录 ====》auth.code2Session 文档 , 目的是为了得到 session_key 字段。
本地服务器和微信服务器之间的
1.请求接口： https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
2.请求类型： GET
3.请求参数： js_code（前端传过来的 code）、appid（自己的小程序 appId）、secret（自己的小程序 appSecret）、grant_type（授权类型，此处只需填写 authorization_code）
4.如何获取： appid 、 appSecret 登录到 " 微信公众平台 ====》左边导航栏（点击开发） ====》点击开发管理 ====》开发设置（就可以看到 appid 、 appSecret）"

步骤二：解密电话号码从腾讯服务端换取的 session_key 和前端传过来的 encryptedData、iv 就可以解密出电话号码。

案例一

小程序代码

<!--wxml-->
<view><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号码</button><button bindtap="onLogin">登录</button>
</view>

//js
Page({data: {code: '',iv: '',encryptedData: '',user_phone: '',user_image: '',user_sex: '',user_name: ''},onLoad: function(options) {//获取 code wx.login({//注意一下: 如果使用箭头函数 this 指向 Page 页面 ，不是箭头函数 this 指向 微信对象。//不是箭头函数 需要在外面保存 this success:(res)=>{this.setData({code: res.code})}})},getPhoneNumber(event){ // 获取 iv 、encryptedData 字段this.setData({iv: event.detail.iv,encryptedData: e.detail.encryptedData})},onLogin(){//用户授权可以拿到 用户的基本信息 和 iv 、encryptedData (注意：这里获取的iv 、encryptedData 不能解密出手机号，得使用button按钮授权的。)wx.getUserProfile({desc: '获取用户的基本信息',success: (res)=>{//调用请求函数this.request(res)},fail: (err)=>{console.log(err)}})},request(data){//发请求wx.request({url: 'http:127.0.0.1: 9000/wxapplet' // 请求后端接口地址, 填写自己的服务器method: 'post', // 请求类型data: { // 提交的数据wx_code: this.data.code,wx_iv: this.data.iv,wx_encryptedData: this.data.encryptedData},success:(res)=>{this.setData({user_phone: res.phone,user_image: data.userInfo.avatarUrl,user_sex: data.userInfo.gender,user_name: data.userInfo.nickName})}})}
})

后端 node

//index.js 主页
//使用到 express 、body-parser 、 request 、crypto 、cors 库 ，通过命令安装： npm install 库名
const express = require('express');
const request = require('request');
const bodyParser = require('body-parser');
const cors = require('cors'); // 非必要，用来解决跨域的
const WXBizDataCrypt = require('./WXBizDataCrypt') //引入解密文件let app = express();
app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.json());//前端要访问的接口 请求类型：post ，请求接口： http://127.0.0.1:9000/wxapplet
app.post('/wxapplet',function(req,res){let { wx_code , wx_iv , wx_encryptedData } = req.bodylet appid = '' // 填写自己的小程序 appid 我就不填了let appSecret = '' // 填写自己的小程序 appSecret 我就不填了let data = {method: 'get',url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${appSecret}&js_code=${wx_code}&grant_type='authorization_code'`}//发请求到微信服务器端request(data,(error,  response, body)=>{let session_key = body.session_key//解密var wxBizDataCrypt = new WXBizDataCrypt(appId, session_key);var data = wxBizDataCrypt.decryptData(wx_encryptedData , wx_iv);//返回给前端res.json(data);})
})app.listen(9000, function () {console.log('http://127.0.0.1:9000');
});

// WXBizDataCrypt.js 解码密
const crypto = require('crypto')function WXBizDataCrypt(appId, sessionKey) {this.appId = appIdthis.sessionKey = sessionKey
}WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {// base64 decodevar sessionKey = new Buffer(this.sessionKey, 'base64')encryptedData = new Buffer(encryptedData, 'base64')iv = new Buffer(iv, 'base64')try {// 解密var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)// 设置自动 padding 为 true，删除填充补位decipher.setAutoPadding(true)var decoded = decipher.update(encryptedData, 'binary', 'utf8')decoded += decipher.final('utf8')decoded = JSON.parse(decoded)} catch (err) {throw new Error('Illegal Buffer')}if (decoded.watermark.appid !== this.appId) {throw new Error('Illegal Buffer')}return decoded
}module.exports = WXBizDataCrypt

微信小程登录功能和获取手机号相关推荐

微信小程序登录及授权获取手机号
一.遇到的问题 1.获取手机号授权时报错:getPhoneNumber:fail no permission 原因是公众号没有进行企业认证 2.流程 1)登录拿session并保存 var that ...
获取微信小程序登录code和获取手机号code
// index.ts // 获取应用实例 const app = getApp<IAppOption>()Page({data: {motto: 'Hello World',userIn ...
微信小程序登录授权与授权手机号
文章目录前言微信小程序登录授权与授权手机号一.登录授权 1. 发送 res.code 到后台换取 openId, sessionKey 二.授权手机号官方规定因为需要用户主动触发才能发起获取 ...
Java实现微信小程序登录注册：获取OpenId和手机号
登录流程时序: 说明调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器. 调用 auth.code2Session 接口,换取用户唯一标识 OpenID . 用户在微信 ...
微信小程序登录功能的前端设计与实现
导语 | 登录/注册这模块就像个冰山,我们通常以为它就是「输入账号密码,就完成登录了」,但实际下面还有各种需要考虑的问题.作为应用的基础能力,登录/注册的设计需要有足够的健壮性,避免出现全站性阻塞.同 ...
SpringBoot实现微信小程序登录功能
SpringBoot实现微信小程序登录微信小程序登录流程登录流程图前端代码后端代码微信小程序登录流程微信小程序官方文档:微信小程序官方文档第一次学习微信小程序的登录,以前也好奇微信小程序 ...
Java后台实现网站微信扫码登录功能，获取用户openid，及微信用户信息（小程序码方案），关联微信小程序（个人主体小程序也可以）
目录前言操作流程 1.注册微信小程序 2.通过后台获取小程序码注意事项时序图理解方案实现步骤前言很多业务场景之下我们需要实现微信扫码登录检测登录状态的需求,或需要同步网站与小程序的用户信 ...
微信中html5获取手机号,微信小程序通过用户授权获取手机号
这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序有一个获 ...
微信小程序登录功能实现（通过用户名和密码）
通常我们在登录微信小程序的时候都是通过授权登录,各种博文上已经有了很多案例,这里记录一下自己实际开发过程中,通过用户名和密码请求登录的流程: 1.获取用户在用户名输入框输入的信息 wxml: < ...
全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图这一节介绍,登录回调以及喜欢列表的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...

微信小程登录功能和获取手机号

微信小程序 + node

案例一

微信小程登录功能和获取手机号相关推荐

最新文章

热门文章