| uni | 您所在的位置：网站首页 › js获取手机信息 › uni |
uni
我的图书馆
查看信箱
系统消息
官方通知
设置
开始对话
有11人和你对话，查看 忽略
历史对话记录
通知设置
留言交流
请选择搜索范围 含 的文章 含 的书籍 含 的随笔路人甲Java / 待分类 / uni-app开发经验分享二十： 微信小程序 授... 转Word 全屏 打印 修改 转藏+1 分享 QQ空间 QQ好友 新浪微博 微信扫一扫 × 00:00选择朗读音色 亲切女声 稳重女声 成熟男声 选择朗读倍速 0.75倍 1倍 1.5倍 选择循环方式 单篇循环 
uni-app开发经验分享二十： 微信小程序 授权登录 获取详细信息 获取手机号
2021-08-26
路人甲Java
展开全文
授权页面
因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面，让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录
素材
页面代码示例这个接口要在后端调用(https://api.weixin.qq.com无法加入白名单) https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code申请获取以下权限 获得你的公开信息(昵称，头像、地区等) 授权登录 import { htxcx } from "@/store/api.js" import { mapMutations } from 'vuex' export default { data() { return { code:"", SessionKey: '', encryptedData:"", iv:"", OpenId: '', nickName: null, avatarUrl: null, isCanUse: uni.getStorageSync('isCanUse')//默认为true 记录当前用户是否是第一次授权使用的 } }, onLoad() { this.login() }, methods: { ...mapMutations(["setName"]), wxGetUserInfo(){ //第一授权获取用户信息===》按钮触发 let _this = this; // 获取用户信息 uni.getUserInfo({ provider: 'weixin', success: function (infoRes) { _this.encryptedData = infoRes.encryptedData _this.iv = infoRes.iv _this.nickName = infoRes.userInfo.nickName; //昵称 _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像 uni.setStorageSync('isCanUse', false);//记录是否第一次授权 false:表示不是第一次授权 _this.updateUserInfo(); },fail:function (fail){console.log("fail:",fail)} }); }, login(){ let _this = this; uni.showLoading({ title: '登录中...' }); // 1.wx获取登录用户code uni.login({ provider: 'weixin', success: function(loginRes) { _this.code = loginRes.code; if (!_this.isCanUse) { //非第一次授权获取用户信息 uni.getUserInfo({ provider: 'weixin', success: function(infoRes) { console.log('login用户信息：',infoRes); //获取用户信息后向调用信息更新方法 _this.nickName = infoRes.userInfo.nickName; //昵称 _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像 _this.updateUserInfo();//调用更新信息方法 } }); } // 将用户登录code传递到后台置换用户SessionKey、OpenId等信息 uni.hideLoading(); }, }) }, updateUserInfo(){ //向后台更新信息 this.setName(this.nickName,this.avatarUrl) let _this = this; var obj ={ appid:"wx1*********0f06", secret:"07bd3*************096", code:this.code } // 这个接口要在后端调用(https://api.weixin.qq.com无法加入白名单) // https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code // 请求微信端地址获取用户唯一标识的 htxcx(obj.appid,obj.secret,obj.code).then(res=>{ console.log("res:",res) res.data.openid // 唯一 res.data.session_key this.encryptedData this.iv uni.reLaunch({//信息更新成功后跳转到小程序首页 url: '/pages/index/index' }); },err=>{ console.log("err:",err) }) } } } .header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; } .header image { width: 200rpx; height: 200rpx; } .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; } 获取手机号 微信文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html前提条件 先要登录 onLoad() { this.login() },还是用上面的授权页面 授权登录 获取手机号 事件 getPhoneNumber(val){ console.log(val) },这个需要 真机测试 或 预览
我的项目后台解密 package jstfsn; import java.io.UnsupportedEncodingException; import java.security.Security; import java.security.spec.AlgorithmParameterSpec; import java.sql.Connection; import java.text.ParseException; import javax.crypto.BadPaddingException; import javax.crypto.Cipher; import javax.crypto.IllegalBlockSizeException; import javax.crypto.KeyGenerator; import javax.crypto.NoSuchPaddingException; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import javax.naming.NamingException; import org.apache.commons.codec.binary.Base64; import org.apache.log4j.Logger; import GCcom.CommonValue; import GCcom.DBOperation; import StxsysBass.StxsysAdmin.CheckingLineService; import com.alibaba.fastjson.JSONObject; import com.justep.baas.action.ActionContext; public class Login { /** * 查询历史线路未巡检的巡检点 * * @param params * @param context * @return * @throws NamingException */ /** * 日志 */ public static Logger logger = Logger.getLogger(CheckingLineService.class); /** * 数据库名 */ //public static String DATASOURCE = CommonValue.MYSQL_DATA_BASE_JSTFSN; /************************************************************************************ * 函数名：getWxUserInfo * 参数名：JSONObject params： 参数集 * ActionContext context ： 上下文 * * 功能：通过用户授权加密信息解密获取用户信息 * * 开发者：[email protected] 20200317 * * 修改者： * * @return * @throws ParseException * * ************************************************************************************/ public static JSONObject getWxUserInfo(JSONObject params, ActionContext context) throws NamingException { // 获取参数 String strCipher = ""; String strEncrypdata = params.getString("encrypdata"); String strIvdata = params.getString("ivdata"); String strSessionkey= params.getString("sessionkey"); byte[] byEncrypdata = Base64.decodeBase64(strEncrypdata); byte[] byIvdata = Base64.decodeBase64(strIvdata); byte[] bySessionkey = Base64.decodeBase64(strSessionkey); JSONObject jsData = new JSONObject(); AlgorithmParameterSpec ivSpec = new IvParameterSpec(byIvdata); Cipher cipher; try { SecretKeySpec keySpec = new SecretKeySpec(bySessionkey, "AES"); cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec); strCipher = new String(cipher.doFinal(byEncrypdata),"UTF-8"); jsData.put("phone", strCipher); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); jsData.put("error", e.getMessage()); } return jsData; } }可参考 https://blog.csdn.net/qq_38194393/article/details/81382108 获取详细信息 获取手机号 优化封装 页面 申请获取以下权限 获得你的公开信息(昵称，头像、地区等) 获得你微信绑定的手机号 授权登录 手机号授权 import {wxlogin, getPhone, wxUserInfo} from "@/store/wxlogin.js" import {htxcx} from "@/store/api.js" export default { data() { return { appid:"wx1b02a26b03110f06", secret:"07bd35d41e7fb6a9bff173c728d6a096", type:0, phone:"", typeArr:["承运人","管理员"], phoneParams:{ sessionkey:"", ivdata:"", encrypdata:"" }, loginStatus:false, phoneStatus:false } }, onLoad() { try{ this.init() }catch(e){ console.log("init错误信息：",e) } }, methods: { async init(){ var code = await wxlogin() // 获取sessionkey var key = await htxcx(this.appid,this.secret,code) this.phoneParams.sessionkey = key.data.session_key; }, async getPhoneNumber(e){ this.phoneParams.encrypdata = e.detail.encryptedData this.phoneParams.ivdata = e.detail.iv var phone = await getPhone(this.phoneParams) this.phone = phone.purePhoneNumber console.log("phone:",this.phone) if(this.phone){ this.phoneStatus = true this.reLaunch() } }, async wxGetUserInfo(){ var info = await wxUserInfo() this.loginStatus = true this.reLaunch() }, reLaunch(){ if(this.loginStatus && this.phoneStatus){ uni.setStorageSync("tongfang-phone",this.phone) // 后续业务代码 // uni.reLaunch({//信息更新成功后跳转到小程序首页 // url: '/pages/index/index' // }); } }, bindPickerMPChange(e){ this.type = e.target.value } } } .header { margin: 90rpx 0 50rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; } .header image { width: 200rpx; height: 200rpx; } .content { margin-left: 50rpx; margin-bottom: 50rpx; } .content text { display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom { border-radius: 80rpx; margin: 35rpx 50rpx; font-size: 35rpx; } .bottom:first-child{ margin-top: 50rpx; } .view_input{ margin: 0 50rpx; background-color: white; padding: 10px; height: 1rem; line-height: 1rem; } wxlogin.js import {getPhone as getphone} from '@/store/api.js' /* 微信登录 返回 code */ export const wxlogin = ()=> { return new Promise((resolve, reject)=>{ uni.showLoading({ title: '登录中...' }); uni.login({ provider: 'weixin', success: function(loginRes) { resolve(loginRes.code); uni.hideLoading(); }, fail(err) { reject(err) uni.hideLoading(); } }) }) } /* 获取微信用户信息 要先调用登录接口 返回用户信息 */ export const wxUserInfo = ()=>{ return new Promise((resolve, reject)=>{ uni.getUserInfo({ provider: 'weixin', success: function(res) { resolve(res); }, fail(err) { reject(err) } }); }) } /* 获取微信用户手机号 要先调用登录接口 参数:obj{ sessionkey, ivdata, encrypdata } 返回手机号相关信息 */ export const getPhone = (obj)=>{ return new Promise((resolve, reject)=>{ getphone(obj).then(res=>{ resolve(JSON.parse(res.data.data.phone)) },err=>{ reject(err) }) }) } api.js // 接口获取 sessionkey export const htxcx = (appid,secret,code)=>uniAjax("https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code") // 解密手机号 export const getPhone = (obj)=>uniAjax(BASE_URL_dev+"/getWxUserInfo",obj,"POST")转载于：https://blog.csdn.net/weixin_42448623/article/details/104928750 QQ空间 QQ好友 新浪微博 微信扫一扫 赞赏
共11人赞赏
本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
转藏到我的图书馆
献花（0）
+1
来自： 路人甲Java > 《待分类》 举报推一荐：发原创得奖金，“原创奖励计划”来了！
猜你喜欢 0条评论 发表 请遵守用户 评论公约 查看更多评论
类似文章
更多
AlertDialog详解 AlertDialog详解import android.os.Message;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;public class NotificationTest extends Activity { ... Android TTS 中文 文字转语音 使用TextToSpeech Svox | 应用... Android默认没有安装TTS数据包，无法文字转语音，而在设置里推荐的语音包是Pico TTS,并不支持中文，如果需要读中文，需要下载另外的第三方语音包，如：eSpeak，Svox，个人建议Svox，eSpeak非常生硬，而... 【转】Android AlertDialog 使用方法 Struts Hack！解决中文参数在Form Bean中的乱码问题 action net.csdn.blog.xport.struts. WebSocket之获取HttpSession HttpSession;/* * 获取HttpSession * */public class GetHttpSessionConfigurator extends Configurator { @Override public void modifyHandshake(ServerEndpointConfig sec, HandshakeRequest reques... jsp+servlet实现注册登录，不用数据库  Swing文件下载 Swing文件下载package com.iss.iaf.codemanagement;import javax.swing.JOptionPane;/** * 代码管理应用程序--项目的入口 * @author xin... 通过struts2拦截器实现权限管理 -- 进行权限验证 --> AuthFilter com.work.core.filter.AuthFilter ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 微信支付后，该微信自动注册为你的个人图书馆账号 付费成功，还是不能使用？ 复制成功！ 绑定帐号，享受特权 恭喜你成为个图VIP！ 在打印前，点击“下一步”观看2个提示 下一步 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服微信支付查找“商户单号”方法： 1.打开微信app，点击消息列表中和“微信支付”的对话 2.找到扫码支付给360doc个人图书馆的账单，点击“查看账单详情” 3.在“账单详情”页，找到“商户单号” 4.将“商户单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 支付宝查找“商户订单号”方法： 1.打开支付宝app，点击“我的”-“账单” 2.找到扫码支付给个人图书馆的账单，点击进入“账单详情”页 3.在“账单详情”页，找到“商家订单号” 4.将“商家订单号”填入下方输入框，点击“恢复VIP特权”，等待系统校验完成即可。 已经开通VIP，还是不能打印？ 请通过以下步骤，尝试恢复VIP特权 第1步在下方输入你支付的微信“商户单号”或支付宝“商家订单号” 第2步点击“恢复VIP特权”，等待系统校验完成即可 如何查找商户单号？ 恢复VIP特权正在查询... 订单号过期！ 该订单于2020/09/09 23:59:59支付，VIP有效期：2020/09/09 23:59:59至2020/09/11 23:59:59！如需使用VIP功能，建议重新开通VIP 返回上一页支付成功！ 确定已获得“发送到手机”权限！ 微信扫码，在手机上查看选中内容 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服确定复制刚才选中的内容？ 确定 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 分享文章 QQ空间 QQ好友 新浪微博 微信扫一扫 复制 打印文章 发送到手机微信扫码，在手机上查看选中内容 全屏阅读 朗读全文 × ×复制成功！ ¥.00 微信或支付宝扫码支付： 开通即同意《个图VIP服务协议》 正在支付中，请勿关闭二维码！ 自动续费¥12/月，可随时取消 开通即同意《连续订阅服务协议》|《个图VIP服务协议》 全部>> ● 电子书免费读 ● 全站无广告 ● 全屏阅读 ● 高品质朗读 ● 批量上传文档 ● 购书5折 ● 5千个文件夹 ● 专属客服 ×支付确认 1. 请在手机上打开的页面进行支付； 2. 如支付完成，请点击“支付完成”。 支付完成 取消支付 |
【本文地址】
公司简介
联系我们