1200字范文 > 微信小程序授权登录+获取手机号

微信小程序授权登录+获取手机号

时间：2020-07-03 07:13:06

相关推荐

微信小程序授权登录+获取手机号

一、官方文档背景：小程序登录的链接:微信小程序获取手机号的链接:二、微信小程序授权登录+获取手机号1、简单说明官方文档的操作：先授权登录后拿手机号2、前端代码：（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）（2）login.wxml（3）login.wxss（4）login.json（5）login.js三、以上操作后的页面展示：附提醒：

一、官方文档背景：

这个图一定要认真去看，一步一步来，不要着急

小程序登录的链接:

https://developers./miniprogram/dev/framework/open-ability/login.html.

微信小程序获取手机号的链接:

https://developers./miniprogram/dev/framework/open-ability/getPhoneNumber.html.

二、微信小程序授权登录+获取手机号

1、简单说明官方文档的操作：先授权登录后拿手机号

（1）前端调用wx.login接口拿到获取临时登录凭证code，并回传到后端

（2）后端利用auth.code2Session接口，换取用户唯一标识OpenID和会话密钥session_key

（3）前端点击按钮时触发getPhoneNumber(e)回传给后端encryptedData和iv加密数据解密算法

（4）后端利用从前端得到的session_key、加密数据解密算法和自己拿到的app_id进行解密手机号后回传给前端

2、前端代码：

（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）

//封装请求//const server = 'https://XXXX/';//正式域名必须为httpsconst server = 'http://127.0.0.1:8080/';//测试域名//本地前后端调试时可以先不检验合法域名（在微信开发者工具中的本地设置记得打钩这一选项），就可以进行访问HTTP啦const requestUrl = ({url, params,success, method = "post"}) => {wx.showLoading({title: '加载中',});// let headerPost = {'content-type': 'application/x-www-form-urlencoded'}let headerPost= {'content-Type': 'application/json'}let headerGet = {'content-Type': 'application/json'}return new Promise((resolve, reject) => {wx.request({url: server + url,method: method,data: params,header: method = 'post' ? headerPost : headerGet,success: (res) => {wx.hideLoading();if (res['statusCode'] == 200) {resolve(res)//异步成功之后执行的函数} else {wx.showToast({title: res.data.msg || '请求出错',icon: 'none',duration: 2000,mask: true})reject(res.ErrorMsg);}},fail: (res) => {wx.hideLoading();wx.showToast({title: res.data.msg || '',icon: 'none',duration: 2000,mask: true})reject('网络出错');},complete: function () {wx.hideLoading()}})})}module.exports = {requestUrl: requestUrl}

（2）login.wxml

<view wx:if="{{canIUse}}"><view class='header'><image src='/images/wx.jpg '></image></view><view class='content'><view>申请获取以下权限：</view><text>获得你的手机号</text></view><button class='bottom' type='primary' open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="getPhoneNumber">微信授权</button></view><view wx:else>请升级微信版本</view>

附：样式图片

（3）login.wxss

.header {margin: 90rpx 0 90rpx 50rpx;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;}.header image {width: 200rpx;height: 200rpx;border-radius: 100rpx;}.content {margin-left: 50rpx;margin-bottom: 90rpx;}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;}

（4）login.json

{"usingComponents": {},"navigationBarTitleText":"授权登录"}

（5）login.js

import requestUrl from '../../utils/util.js'// 获取应用实例const app = getApp()Page({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。canIUse: wx.canIUse('button.open-type.getUserInfo'),openid: null,sessionkey:null,token: null,phonenumber:null},onLoad: function (options) {//登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdif (res.code) {console.log('code', res.code)requestUrl.requestUrl({url: "wx/getOpenId",params: {code: res.code},method: 'GET',}).then((res) => {this.data.openid = res.data.data.openIdthis.data.sessionkey = res.data.data.sessionKey}).catch((errorMsg) => {console.log(errorMsg)})}}})},//获取手机号getPhoneNumber: function (e) {//点击的“拒绝”或者“允许// console.log(e.detail.errMsg)// console.log(e.detail.iv)// console.log(e.detail.encryptedData)if(e.detail.errMsg=="getPhoneNumber:ok"){//点击了“允许”按钮，requestUrl.requestUrl({url:"wx/getPhone",params: {encryptedData: e.detail.encryptedData,iv: e.detail.iv,sessionKey: this.data.sessionkey,openId: this.data.openid},method:"post",}).then((res) => {//then接收一个参数，是函数，并且会拿到我们在requestUrl中调用resolve时传的参数console.log("允许授权了")let data = {token: res.data.data.token,phonenumber: res.data.data.phone,openid: res.data.data.openId,sessionKey: res.data.data.sessionKey}if(res.data.code==200){wx.navigateTo({url: `../index/index?token=${data.token}&phone=${data.phonenumber}&openid=${data.openid}&sessionKey=${data.sessionKey}`,success: function(res) {},})}}).catch((errorMsg) => {console.log(errorMsg)})}}})