微信扫码拉起小程序手机号授权跨端登录

开发小程序手机号授权需要到微信公众平台：

1.获取微信开发 secret，在设置 - 开发设置页中获得

2.进行微信认证

3.后端服务需要申请https域名

4.开发测试时，需要打开微信开发者工具-详情（右上角）-项目配置-域名信息配置request合法域名

微信小程序代码段

wxml: 背景图片需要自己替换

<!--index.wxml-->
<view class="container"><image class="image-bg" src="../../assest/img/bg.png"></image><image class="image-uav" src="../../assest/img/uav.png"></image><view class="title"><text class="title-content">{{title}}</text></view><button wx:if="{{!exitFlag && checked}}" class="image-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="width: 80%;"> {{btn}} </button><button wx:if="{{!exitFlag && !checked}}" class="image-btn" bindtap="getPhoneNumber" style="width: 80%;"> {{btn}} </button><view wx:if="{{!exitFlag}}" class="agreement"><view><checkbox-group class="agreement-checkbox-group" bindchange="checkboxChange"><checkbox value="agreementVal" checked="{{checked}}"></checkbox></checkbox-group><text class="agreement-content" bindtap="showModel">{{agreement}}</text></view></view><navigator wx:if="{{exitFlag}}" class="exit-btn" open-type="exit" target="miniProgram" style="width: 80%;"> {{exitBtn}} </navigator><!-- 用户协议 --><view class="model_box" hidden="{{hide}}"><view class="mb-tit">用户服务协议<icon class="mb-cancel" type="cancel" size="23" bindtap="showModel"></icon></view><view class="mb-content"><view class="mb-con">引言</view><view class="mb-con">通用xxx：</view></view></view>
</view>

ts:

const app = getApp<IAppOption>()
Page({data: {title: '你好,\n欢迎使用xx授权登录',agreement: '我已阅读并同意 xx网络平台用户协议\n及领克个人信息保护政策',btn: '微信授权获取个人信息',exitBtn: '点击退出小程序',exitFlag: false,userInfo: {},hasUserInfo: false,//开发环境// getPhoneNumberUrl: 'http://localhost:8081/wx/api/getPhoneNumber',//测试环境getPhoneNumberUrl: 'https://xxx-dev/wx/api/getPhoneNumber',//生产环境// getPhoneNumberUrl: 'https://xxx-prod/wx/api/getPhoneNumber',checked: false,hide: true,cb: 0,uid: undefined,},onLoad() {const pages: any = getCurrentPages();const currentPage: any = pages[pages.length - 1];if (currentPage.options.uid) {this.setData({uid: currentPage.options.uid})}},checkboxChange(e: any) {let val = e.detail.valueif (val.length > 0) {this.setData({checked: true,})} else {this.setData({checked: false,})}},showModel() {if (this.data.hide) {this.setData({checked: true})}this.setData({hide: !this.data.hide})},getPhoneNumber(e: any) {if (!this.data.checked) {wx.showToast({title: '请阅读并同意',icon: 'error',duration: 800})return;}let detail = e.detail;if (detail.errMsg === "getPhoneNumber:ok") {// 动态令牌let code = detail.code;let that = this;wx.request({url: this.data.getPhoneNumberUrl,method: 'POST',header: {'content-type': 'application/json' // 默认值},data: {code: code,uid: this.data.uid},success() {wx.showToast({title: '授权成功',icon: 'success',duration: 1000,complete: function () {that.setData({exitFlag: true})}})},fail() {wx.showToast({title: '授权失败',icon: 'error',duration: 1000})},})}},
})

wxss:

/**index.wxss**/.image-bg {position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;z-index: -999;
}.image-uav {position: absolute;top: 410rpx;width: 55%;height: 13%;
}.title {position: absolute;top: 680rpx;
}.title-content {color: aliceblue;font-size: 50rpx;letter-spacing: 5rpx;
}.image-btn {position: absolute;bottom: 200rpx;background-color: #339586;color: aliceblue;
}checkbox .wx-checkbox-input {border-radius: 50%;border: 2rpx solid #5e5e5f;height: 24rpx;width: 24rpx;margin-top: -33rpx;
}checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {font-size: 25rpx;font-weight: bold;
}.agreement {position: absolute;bottom: 100rpx;justify-content: center;align-content: center;text-align: center;
}.agreement-checkbox-group{position: absolute;bottom: 23rpx;left: -33rpx;
}.agreement-content {color: aliceblue;font-size: 20rpx;letter-spacing: 2rpx;
}.exit-btn {position: absolute;bottom: 200rpx;height: 70rpx;text-align: center;background-color: #339586;color: aliceblue;border-radius: 10rpx;line-height: 65rpx;font-weight: bold;
}.model_box {position: fixed;top: 50%;left: 50%;height: 75%;width: 85%;transform: translate(-50%, -50%);z-index: 1000;background: #fff;opacity: 0.9;border-radius: 15rpx;
}.mb-content {padding: 10rpx 20rpx 10rpx 25rpx;box-sizing: border-box;height: 91%;overflow: scroll;
}.mb-tit {padding: 15rpx 0rpx;box-sizing: border-box;font-size: 34rpx;text-align: center;
}.mb-cancel {position: fixed;right: 5%;
}.wx-icon-cancel {color: #5e5e5f;
}.mb-con {font-size: 22rpx;text-indent: 2rem;line-height: 1.5;
}

后端java：

@Service
public class WxApiServiceImpl implements WxApiService {private static final Logger log = LoggerFactory.getLogger(WxApiServiceImpl.class);@Autowiredprivate RedisCache redisCache;@Value("${wx.appid}")public String appid;@Value("${wx.secret}")public String secret;@Value("${wx.grantType}")public String grantType;@Value("${wx.getPhoneNumber}")public String getPhoneNumber;@Value("${wx.getQRCode}")public String getQRCode;@Value("${wx.getAccessToken}")public String getAccessToken;@Value("${wx.numberTimeOut}")public int numberTimeOut;@Overridepublic JSONObject getQRCode(WxInfo wxInfo) {try {//获取tokenString getAccessTokenParams = "grant_type=" + grantType + "&appid=" + appid +"&secret=" + secret;String accessTokenJsonStr = HttpUtils.sendPost(getAccessToken, getAccessTokenParams);JSONObject accessTokenJson = JSONObject.parseObject(accessTokenJsonStr);//获取小程序二维码String params = "access_token=" + accessTokenJson.getString("access_token");JSONObject codeBodyParams = new JSONObject();codeBodyParams.put("path", "pages/index/index?uid=" + wxInfo.getUid());codeBodyParams.put("width", "430");String code = HttpUtils.sendPostWXCode(getQRCode, params, codeBodyParams);JSONObject data = new JSONObject();data.put("code", code);return new ResponseUtil.Builder(AppConstants.SUCCESS, AppConstants.SUCCESS_MSG).data(data).build();} catch (Exception e) {log.warn(">>>>>>>>>>>>>>>>微信API调用失败！<<<<<<<<<<<<<<<<<<<", e);return new ResponseUtil.Builder(AppConstants.WX_API_ERROR, AppConstants.WX_API_ERROR_MSG).build();}}@Overridepublic JSONObject getPhoneNumber(WxInfo wxInfo) {try {//获取tokenString getAccessTokenParams = "grant_type=" + grantType + "&appid=" + appid +"&secret=" + secret;String accessTokenJsonStr = HttpUtils.sendPost(getAccessToken, getAccessTokenParams);JSONObject accessTokenJson = JSONObject.parseObject(accessTokenJsonStr);String params = "access_token=" + accessTokenJson.getString("access_token");JSONObject bodyParams = new JSONObject();bodyParams.put("code", wxInfo.getCode());//获取手机号String phoneNumberJsonStr = HttpUtils.sendPostUrlParams(getPhoneNumber, params, bodyParams);JSONObject phoneNumberJson = JSONObject.parseObject(phoneNumberJsonStr);phoneNumberJson.put("uid", wxInfo.getUid());//缓存手机号redisCache.setCacheObject(Constants.QR_DATA_KEY + wxInfo.getUid(), phoneNumberJson, numberTimeOut, TimeUnit.MINUTES);return new ResponseUtil.Builder(AppConstants.SUCCESS, AppConstants.SUCCESS_MSG).data(phoneNumberJson).build();} catch (Exception e) {log.warn(">>>>>>>>>>>>>>>>微信API调用失败！<<<<<<<<<<<<<<<<<<<", e);return new ResponseUtil.Builder(AppConstants.WX_API_ERROR, AppConstants.WX_API_ERROR_MSG).build();}}@Overridepublic JSONObject getPhoneNumberByUid(WxInfo wxInfo) {JSONObject redisCode = redisCache.getCacheObject(Constants.QR_DATA_KEY + wxInfo.getUid());if (redisCode == null) {return new ResponseUtil.Builder(AppConstants.WX_QR_DATA_ERROR, AppConstants.WX_QR_DATA_ERROR_MSG).build();}return new ResponseUtil.Builder(AppConstants.SUCCESS, AppConstants.SUCCESS_MSG).data(redisCode).build();}@Overridepublic JSONObject clearQRData(WxInfo wxInfo) {if (StringUtils.isNotEmpty(wxInfo.getUid())) {log.info(">>>>>>>>>>>>>>>>clear redis qr data ," + Constants.QR_DATA_KEY + wxInfo.getUid() + "<<<<<<<<<<<<<<<<<<<");redisCache.deleteObject(Constants.QR_DATA_KEY + wxInfo.getUid());}return new ResponseUtil.Builder(AppConstants.SUCCESS, AppConstants.SUCCESS_MSG).build();}
}

http工具类：

public class HttpUtils {private static final Logger log = LoggerFactory.getLogger(HttpUtils.class);/*** 向指定 URL 发送GET方法的请求** @param url   发送请求的 URL* @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。* @return 所代表远程资源的响应结果*/public static String sendGet(String url, String param) {return sendGet(url, param, Constants.UTF8);}/*** 向指定 URL 发送GET方法的请求** @param url         发送请求的 URL* @param param       请求参数，请求参数应该是 name1=value1&name2=value2 的形式。* @param contentType 编码类型* @return 所代表远程资源的响应结果*/public static String sendGet(String url, String param, String contentType) {StringBuilder result = new StringBuilder();BufferedReader in = null;try {String urlNameString = url + "?" + param;log.info("sendGet - {}", urlNameString);URL realUrl = new URL(urlNameString);URLConnection connection = realUrl.openConnection();connection.setRequestProperty("accept", "*/*");connection.setRequestProperty("connection", "Keep-Alive");connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");connection.connect();in = new BufferedReader(new InputStreamReader(connection.getInputStream(), contentType));String line;while ((line = in.readLine()) != null) {result.append(line);}log.info("recv - {}", result);} catch (ConnectException e) {log.error("调用HttpUtils.sendGet ConnectException, url=" + url + ",param=" + param, e);} catch (SocketTimeoutException e) {log.error("调用HttpUtils.sendGet SocketTimeoutException, url=" + url + ",param=" + param, e);} catch (IOException e) {log.error("调用HttpUtils.sendGet IOException, url=" + url + ",param=" + param, e);} catch (Exception e) {log.error("调用HttpsUtil.sendGet Exception, url=" + url + ",param=" + param, e);} finally {try {if (in != null) {in.close();}} catch (Exception ex) {log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);}}return result.toString();}/*** 向指定 URL 发送POST方法的请求** @param url   发送请求的 URL* @param param 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。* @return 所代表远程资源的响应结果*/public static String sendPost(String url, String param) {PrintWriter out = null;BufferedReader in = null;StringBuilder result = new StringBuilder();try {String urlNameString = url;log.info("sendPost - {}", urlNameString);URL realUrl = new URL(urlNameString);URLConnection conn = realUrl.openConnection();conn.setRequestProperty("accept", "*/*");conn.setRequestProperty("connection", "Keep-Alive");conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");conn.setRequestProperty("Accept-Charset", "utf-8");conn.setRequestProperty("contentType", "utf-8");conn.setDoOutput(true);conn.setDoInput(true);out = new PrintWriter(conn.getOutputStream());out.print(param);out.flush();in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "utf-8"));String line;while ((line = in.readLine()) != null) {result.append(line);}log.info("recv - {}", result);} catch (ConnectException e) {log.error("调用HttpUtils.sendPost ConnectException, url=" + url + ",param=" + param, e);} catch (SocketTimeoutException e) {log.error("调用HttpUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + param, e);} catch (IOException e) {log.error("调用HttpUtils.sendPost IOException, url=" + url + ",param=" + param, e);} catch (Exception e) {log.error("调用HttpsUtil.sendPost Exception, url=" + url + ",param=" + param, e);} finally {try {if (out != null) {out.close();}if (in != null) {in.close();}} catch (IOException ex) {log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);}}return result.toString();}public static String sendPostUrlParams(String url, String param, JSONObject bodyParams) {OutputStreamWriter out = null;BufferedReader in = null;StringBuilder result = new StringBuilder();try {String urlNameString = url + "?" + param;log.info("sendPostUrlParams - {}", urlNameString);URL realUrl = new URL(urlNameString);URLConnection conn = realUrl.openConnection();conn.setRequestProperty("accept", "*/*");conn.setRequestProperty("connection", "Keep-Alive");conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");conn.setRequestProperty("Accept-Charset", "utf-8");conn.setRequestProperty("contentType", "utf-8");conn.setDoOutput(true);conn.setDoInput(true);if (bodyParams != null && !bodyParams.isEmpty()) {out = new OutputStreamWriter(conn.getOutputStream());out.write(bodyParams.toString());out.flush();}in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "utf-8"));String line;while ((line = in.readLine()) != null) {result.append(line);}log.info("recv - {}", result);} catch (ConnectException e) {log.error("调用HttpUtils.sendPost ConnectException, url=" + url + ",param=" + param, e);} catch (SocketTimeoutException e) {log.error("调用HttpUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + param, e);} catch (IOException e) {log.error("调用HttpUtils.sendPost IOException, url=" + url + ",param=" + param, e);} catch (Exception e) {log.error("调用HttpsUtil.sendPost Exception, url=" + url + ",param=" + param, e);} finally {try {if (out != null) {out.close();}if (in != null) {in.close();}} catch (IOException ex) {log.error("调用in.close Exception, url=" + url + ",param=" + param, ex);}}return result.toString();}/*** @author: chenxiao* @description: 获取小程序二维码* @date: Create in 2023/6/9 14:31* @modified By:*/public static String sendPostWXCode(String url, String param, JSONObject bodyParams) {OutputStreamWriter out = null;String result = "";try {String urlNameString = url + "?" + param;log.info("sendPostUrlParams - {}", urlNameString);URL realUrl = new URL(urlNameString);URLConnection conn = realUrl.openConnection();conn.setRequestProperty("accept", "*/*");conn.setRequestProperty("connection", "Keep-Alive");conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");conn.setRequestProperty("Accept-Charset", "utf-8");conn.setRequestProperty("contentType", "utf-8");conn.setDoOutput(true);conn.setDoInput(true);if (bodyParams != null && !bodyParams.isEmpty()) {out = new OutputStreamWriter(conn.getOutputStream());out.write(bodyParams.toString());out.flush();}result = new String(Base64.getEncoder().encode(IOUtils.toByteArray(conn.getInputStream())), Charsets.UTF_8);log.info("recv - {}", result);} catch (ConnectException e) {log.error("调用HttpUtils.sendPost ConnectException, url=" + url + ",param=" + param, e);} catch (SocketTimeoutException e) {log.error("调用HttpUtils.sendPost SocketTimeoutException, url=" + url + ",param=" + param, e);} catch (IOException e) {log.error("调用HttpUtils.sendPost IOException, url=" + url + ",param=" + param, e);} catch (Exception e) {log.error("调用HttpsUtil.sendPost Exception, url=" + url + ",param=" + param, e);} finally {try {if (out != null) {out.close();}} catch (IOException ex) {log.error("调用io close Exception, url=" + url + ",param=" + param, ex);}}return result;}
}

application.yml：

wx:# 微信公众平台 - 设置 - 开发设置」页中获得appid: xxx# 微信公众平台 - 设置 - 开发设置」页中获得secret: xxx# getAccessToken接口需要grantType: client_credential# 获取手机号getPhoneNumber: https://api.weixin.qq.com/wxa/business/getuserphonenumber# 获取小程序二维码getQRCode: https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode# 获取小程序全局唯一后台接口调用凭据，token有效期为7200sgetAccessToken: https://api.weixin.qq.com/cgi-bin/tokennumberTimeOut: 10

按照以上代码复制到项目即可，亲测可用的哈，有问题可以联系我噢

微信扫码拉起小程序手机号授权跨端登录相关推荐

微信扫码点餐小程序springboot外卖点餐系统源码和论文
开发工具: 后端:idea 用户端:微信开发者工具数据库 :mysql5.7+ 技术:java springboot mybatis 微信原生技术角色: 管理员多商家用户 ...
微信扫码点餐小程序怎么做，一步步教你
在当今数字化时代,更多的餐厅开始使用扫码点餐系统.这种系统可以提高顾客的点餐效率,减少服务员的工作负担.如果你也想要在你的餐厅中使用扫码点餐系统,那么你来对地方了. 第一步:搭建微信小程序后台在微信 ...
微信扫码跳转小程序并传参
1. 打开微信公众平台微信公众平台扫码登录小程序的后台开发>开发管理>开发设置>扫普通链接二维码打开小程序>添加 2. 输入业务域名 3. 下载校验文件这里我用一个aa ...
600多个微信小程序源码_点餐系统的开发，java后台+微信小程序实现完整的餐厅点餐系统。微信扫码点餐小程序源码讲解...
今天来给大家讲解一个完整的微信扫码点餐项目.java后台+微信小程序实现点餐系统. 后台技术选型: JDK8 MySQL(需要5.6以上) Spring-boot Spring-data-jpa Lo ...
借助云开发10行代码生成小程序码，可以微信扫码快速进入指定小程序页
最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面.经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码.这样我们在做一些线下业务时就 ...
微信扫码点餐小程序制作简单，功能齐全
扫码点餐,对于餐饮行业来说,是必不可少的重要的一环,它可以帮助顾客点餐.顾客通过微信扫码,就可以获取到菜单,查看菜品的图片以及优惠活动,操作十分简单,而且效率比传统菜单要好很多. 对于新手来说,不会制 ...
微信扫码点餐小程序之《扫码功能的实现》2020/03/05
现在很多商家都在桌上放置了二维码直接扫码就可以点餐还能获取桌号这是怎么做到的啦,我没事就做了个点餐小程序给大家分享一下,这里就讲解一下怎么实现的扫码点餐 1.微信小程序的扫码代码 wx.scanCod ...
支付宝扫码跳转小程序并传参
支付宝扫码跳转小程序并传参 1. 打开支付宝开放平台支付宝开放平台打开支付宝开放平台,进入自己的小程序详情页面.点击小程序码>关联普通二维码>添加按钮 2. 输入业务域名这里我们选择 ...
微信支付之扫码支付与小程序支付
微信支付之扫码支付与小程序支付前言:最近的需求中,频繁出现微信支付功能的开发,于是研读了微信官方开发文档以及相关代码做了以下总结,并记录在此,以备不时之需.如有不足之处,欢迎批评指正. 微信官方开发 ...

微信扫码拉起小程序手机号授权跨端登录

微信扫码拉起小程序手机号授权跨端登录相关推荐

最新文章

热门文章