微信小程序公众号支付宝小程序的登录授权、支付、分享、人脸识别人脸核身
2024-04-13 16:36:30
文章目录
- 一、微信小程序
- 1. 获取信息用户信息
- 2.支付
- 3.分享
- 4. 腾讯云小程序人脸核身
- 二、微信公众号
- 1.获取信息用户信息
- 2.支付
- 3. 分享（普通分享）
- 4.分享（vue单页面 配置分享）
- 5. 人脸识别
- 三、支付宝小程序
- 1. 获取信息用户信息
- 2.支付（此能力暂不支持个人账户）
- 3. 分享
- 4. 人脸识别
- 四、H5(支付宝相关的大部分功能个人用户 很多需要企业用户)
- 1. 获取信息用户信息
- 2.支付
- 3. 分享
- 4. 人脸识别
- 总结
一、微信小程序
1. 获取信息用户信息
小程序登陆流程
- 需要微信前端调用wx.login接口获取code。 然后再调用wx.getUserProfile接口获取用户的信息。
- 前端调用服务器接口，将获取到的code，以及encryptedData，和iv一起发送到后端。
- 服务器在解密encryptedData之前，需要调用微信接口获取sessionkey. 有了encryptedData才能解密。
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> (已废弃)//此处调用登录 之后不需要再使用 open-type="getUserInfo" wx.login({success(response) {if (response.code) {wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {//发起网络请求let data = {js_code: response.code,iv: res.iv,encryptedData: res.encryptedData,}//..调用后台接口GetWxInfoAPI(data).then((result) => {//...})}})} else {console.log('登录失败！' + res.errMsg)}}})
2.支付
微信支付
//例：
wx.requestPayment({timeStamp: '',nonceStr: '',package: '',signType: 'MD5',paySign: '',success (res) { },fail (res) { }
})
3.分享
微信分享
//微信小程序分享onShareAppMessage: function (res) {let url = `pages/index/index?chiefUsername=${wx.getStorageSync("userData").UserName}` //分享的路径if (res.from == 'button' || res.from == 'menu') {return {path: url,//进入的路径title: '',//titleimageUrl: "https://xxxxxx.com/images/shareImg.jpg",//img}}}
4. 腾讯云小程序人脸核身
腾讯云小程序人脸核身
二、微信公众号
1.获取信息用户信息
/******* 微信公众号 登录验证，需要用户自己授权* redirect_uri 用户授权后的回调链接 只能是域名方式* state 为了我们自己做校验用的，这个数当授权成功后微信会给我们传回来，使用随机数就可以*/
function weiChatLogin(redirect_uri,state){//回调链接一定要惊醒urlencode编码redirect_uri=encodeURIComponent(redirect_uri); window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXX&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state="+state+"#wechat_redirect";}
2.支付
微信公众号支付
//掉起微信支付onBridgeReady(data) {const that = this;WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": data.appId, //公众号名称，由商户传入"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数"nonceStr": data.nonceStr, //随机串"package": data.package,"signType": data.signType, //微信签名方式："paySign": data.paySign //微信签名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。console.log('支付成功')that.$toast.success({message: '支付成功！',duration: 1000});that.love = false;that.init()} else if (res.err_msg == "get_brand_wcpay_request:cancel") {console.log('支付过程中用户取消')that.$toast.fail({message: '支付过程中用户取消！',duration: 1000});} else if (res.err_msg == "get_brand_wcpay_request:fail") {console.log('支付失败')that.$toast.fail({message: '支付失败！',duration: 1000});}});},
3. 分享（普通分享）
- 获取引入微信实例
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> //引入微信sdk
- 配置wx实例
//分享 //微信分享函数var signature = {};//此处通过自己的后台接口获取参数$.ajax({url: 'XXXX',timeout: 10000, // 超时时间 10 秒type: 'get',data: {url: window.location.href},async: false,cache: false,dataType: 'json',success: function (data) {console.log(data)if (data.code == 200) {console.log(data)signature = data.data;}},error: function (data) {}});//配置微信实例wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: signature.appid, // 必填，公众号的唯一标识timestamp: signature.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>nonceStr: signature.noncestr,// 必填，生成签名的随机串<?= $data['noncestr']?>signature: signature.signature,// 必填，签名<?= $data['signature']?>jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']// 必填，需要使用的JS接口列表});wx.ready(function () {const {title, // 大标题desc, //小标题 link, // urlimgUrl, // 图片} = shareOptionswx.onMenuShareAppMessage({title: title, // 分享标题desc: desc, //描述link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl, // 分享图标success: function () { // 设置成功console.log("自定义“分享给朋友");},});wx.onMenuShareTimeline({title, // 分享标题desc, //描述link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl, // 分享图标, // 分享图标success: function () {console.log("自定义“分享给朋友圈");},});});
4.分享（vue单页面 配置分享）
- 在需要分享的页面路由 配置
{path: '/xxx', //name: 'xxx',meta: {shareInfor: {title: '自定义标题',imgUrl: '自定义图标',desc: '自定义描述',link: '自定义link'}},component: () =>import('@/views/xxx')},
- wxShare.js
//vue npm i weixin-js-sdk
//初始化微信配置信息;
import wx from "weixin-js-sdk";
var homeUrl = ''
if (process.env.VUE_APP_URL !== 'https://xxxxx/') { // 通过环境变量修改homeUrlhomeUrl = "https://t-xxxxxx/#/"
} else {homeUrl = "https://xxxxxxx/#/"
}
export const initwxConfig = (configoptions = {}, shareOptions = {}) => {const {appId, // 必填，公众号的唯一标timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature, // 必填，签名} = configoptionswx.config({debug: false,appId,timestamp,nonceStr,signature,jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"],})wx.ready(function () {const {title, // 大标题desc, //小标题link, // urlimgUrl, // 图片} = shareOptionswx.onMenuShareAppMessage({title: title ? title : '默认通用标题', // 分享标题desc: desc ? desc : '默认描述', //描述link: link ? link : homeUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl ? imgUrl : 'http://xxxxxxx 默认分享图标链接', // 分享图标success: function () { // 设置成功console.log("自定义“分享给朋友");},});wx.onMenuShareTimeline({title: title ? title : '默认通用标题', // 分享标题desc: desc ? desc : '默认描述', //描述link: link ? link : homeUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl ? imgUrl : 'http://img.zk-mall.net/prod/logo.png?x-oss-process=style/b3', // 分享图标, // 分享图标success: function () {console.log("自定义“分享给朋友圈");},});});// console.log(configoptions, shareOptions, "分享配置")wx.error(function () {console.log("通过error接口0000处理失败验证"); // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});
}- 在单页面中使用
import { initwxConfig } from "@/common/js/wxShare";//引入 initwxConfig
import { GetWeixinShareInfoAPI } from "@/api/other";//后端接口返回的配置
//methodswxShareInit() {if (window.localStorage.getItem("isWeiXin") == "true") {if (meta && meta.shareInfor) {//后端接口 为了获取配置参数GetWeixinShareInfoAPI({ url: `${window.location.href}` }, "get").then((res) => {let configoptions = res.data; //配置参数let shareOptions = meta.shareInfor; //分享参数 此处可以重新定义 shareInfor//let shareOptions= {//title: "重新定义的标题",//imgUrl: "重新定义的图标",//desc: "重新定义的描述",//link: "重新定义的分享链接 例如 可以加一下参数进去", //分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致//};initwxConfig(configoptions, shareOptions); //初始化微信分享});} else {initwxConfig({}, {}); //初始化微信分享}}}//mouted 或者在请求完数据之后 配置this.wxShareInit()
5. 人脸识别
- 人脸识别H5接入文档
三、支付宝小程序
1. 获取信息用户信息
支付宝小程序获取用户授权
前后端具体实现步骤
- 在小程序端获取 auth_code，目的是获取用户授权码
- 把第一步获取的授权码 auth_code 传到咱们自己的后台，也就是说后台需要编写一个接口，方便小程序端的传入
var me = this;my.getAuthCode({scopes: 'auth_user', // 主动授权（弹框）：auth_user，静默授权（不弹框）：auth_basesuccess: (res) => {if (res.authCode) {// console.log(app.serverUrl + '/login/' + res.authCode);// 调用自己的服务端接口，让服务端进行后端的授权认证my.httpRequest({url: app.serverUrl + '/login/' + res.authCode,method: 'POST',header:{'content-type': 'application/json'},dataType: 'json',success: (res) => {// 授权成功并且服务器端登录成功console.log(res);me.setData({userInfo: res.data.data});}});}},});
- 后台拿到这个 auth_code 之后，需要调用支付宝的授权平台，从而获取用户的唯一 token 以及 支付宝的userid，都是唯一的，调用的接口为 [alipay.system.oauth.token]
- 获取到userid后，判断一下这个userid是否在我们自己的数据库中存在，如果存在，直接获取信息，并且直接返回用户对象到前台；如果不存在，则需要从支付宝授权平台再一次去获取支付宝用户的信息。
- 调用 [alipay.user.info.share]，获取用户信息，这个用户对象里包含了大量的用户真实信息
2.支付（此能力暂不支持个人账户）
支付宝小程序支付功能接入
3. 分享
支付宝分享官方文档
// API-DEMO page/API/share/share.js
Page({onShareAppMessage() {return {title: '分享 View 组件',desc: 'View 组件很通用',path: 'page/component/view/view',};},
});
//手动分享
//hmtl
<view><button type="primary" open-type="share">推荐给朋友</button>
</view>
4. 人脸识别
支付宝小程序之人脸识别
目前暂时调用无效
四、H5(支付宝相关的大部分功能个人用户 很多需要企业用户)
1. 获取信息用户信息
2.支付
支付宝H5支付
3. 分享
- 选择系统通信录中某个联系人的电话。
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>//引入阿里jsapi<button id="J_btn" class="btn btn-default">选择联系人电话</button>
<script>var btn = document.querySelector('#J_btn');btn.addEventListener('click', function(){ap.choosePhoneContact(function(res){ap.alert('姓名：' + res.name + '\n号码：' + res.mobile);});});
</script>
- 打开支付宝通讯录，选择一个或者多个支付宝联系人。
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> //引入阿里jsapi<style>.output{ display:block; max-width: 100%; overflow: auto}</style>
<button id="J_btn" class="btn btn-default">选择支付宝联系人</button>
<pre id="J_output" class="output"></pre>
<script>var btn = document.querySelector('#J_btn');var output = document.querySelector('#J_output');btn.addEventListener('click', function(){ap.chooseAlipayContact(2, function(res){output.innerHTML = JSON.stringify(res, undefined, ' ');});});
</script>
4. 人脸识别
总结
大致流程
微信小程序公众号支付宝小程序的登录授权、支付、分享、人脸识别人脸核身相关推荐
- 微信小程序微信公众号支付宝小程序H5（获取信息用户信息，支付，分享，人脸识别）
文章目录 一.微信小程序 1. 获取信息用户信息 2.支付 3.分享 4. 腾讯云小程序人脸核身 二.微信公众号 1.获取信息用户信息 2.支付 3. 分享(普通分享) 4.分享(vue单页面 配置分 ...
- 【微信小程序控制硬件 第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
- 限时团购，6.9折：《微信开发深度解析：公众号、小程序高效开发秘籍》推荐序
全书由目 Senparc.Weixin SDK 作者苏震巍历时 2 年完成,涵盖了开发微信公众号及小程序需要用的的各项后端开发技能.技巧.避坑提示,以及 Senparc.Weixin SDK 微信公众 ...
- 小程序 php wecahtpay,PHP 微信公众号，小程序获取支付参数。微信支付
PHP 微信公众号,小程序获取支付参数.微信支付 发布时间:2018-09-26 11:19, 浏览次数:278 , 标签: PHP 首先下载微信官方demo放入项目中 地址:https://gith ...
- Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 参考文章: (1)Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 (2)https:// ...
- h5商城模板_“公众号＋小程序”才是做微信商城的正确方式
如果你问做商城是用公众号好还是小程序好,而回答你只做其中一个的,那么你可以不理他了! 我的答案是:公众号 + 小程序!必须一起做 小程序是一个趋势. 虽然小程序在微信里有着很多独立入口,但是有好些重要 ...
- 微信公众号开发系统入门教程之公众号与小程序、APP的区别
一.概述 APP.公众号.小程序,这是现在最流行且实用的三类系统.最近准备给我们公司开发一个微信公众号,我昨天对微信公众号做了一个细致的了解,现在我就来和大家说一说他们的区别联系. 先说一下公众号与A ...
- 开源全平台版知识付费系统源码 支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
- 微信公众号与小程序数据互通
背景 最近做了一个有意思的功能<官网内容订阅>,用户在官网扫码后可以订阅官网栏目,订阅栏目后发送模版消息提醒用户订阅成功,模版消息关联了小程序,然后做了一个小程序来管理用户订阅的栏目,小程 ...
最新文章
- Spring Cloud第七篇：高可用的配置中心
- Windows server 2008 r2企业版安装步骤
- 【Boost】boost库中bind的用法
- maya室内模型_C4d和3dmax、maya相比有什么优势？
- linux ftp ssl客户端,Linux下ftp+ssl实现ftps-Go语言中文社区
- vscode中控制台不能输入_vscode调试时如何在控制台输入
- 中科大计算机竞赛夺冠,中科大斩获全国唯一特等奖，力压清华捧得华为毕昇杯...
- Python 爬虫“学前班”！学会免踩坑！
- Powerdesigner设置表字段注释与name相同
- 2022-2028全球电动汽车电池冷却器行业调研及趋势分析报告
- ESB（企业服务总线）
- 微信小程序云数据库的分页提取，解决提取大量数据的耗时问题
- 安卓刷机及刷机包制作教程
- 程序员转行,干什么比较好
- 如何利用PDF转换器将WPS转换成word
- 中国通信行业进入5G时代，巨大发展空间值得期待！
- Convertio —— 支持 300 种文件格式的在线转换神器
- 标梵分享微信官方账号运营推广思路
- 00005__VSCode__xml格式化代码插件
- 饱和蒸汽比容计算、 温压补偿系数计算