微信小程序&公众号&支付宝小程序的登录授权、支付、分享、人脸识别&人脸核身

最新推荐文章于 2024-04-03 09:39:01 发布

ftToday

最新推荐文章于 2024-04-03 09:39:01 发布

阅读量2.9k

点赞数 4

分类专栏：前端文章标签：微信小程序微信支付宝分享支付宝微信人脸登录微信支付

本文链接：https://blog.csdn.net/longlc123/article/details/120010962

版权

前端专栏收录该内容

125 篇文章 3 订阅

订阅专栏

一、微信小程序

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: '',//title
        imageUrl: "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, // url
            imgUrl, // 图片
        } = shareOptions
        wx.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/') { // 通过环境变量修改homeUrl
    homeUrl = "https://t-xxxxxx/#/"
} else {
    homeUrl = "https://xxxxxxx/#/"
}
export const initwxConfig = (configoptions = {}, shareOptions = {}) => {
    const {
        appId, // 必填，公众号的唯一标
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature, // 必填，签名
    } = configoptions
    wx.config({
        debug: false,
        appId,
        timestamp,
        nonceStr,
        signature,
        jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"],
    })
    wx.ready(function () {
        const {
            title, // 大标题
            desc, //小标题
            link, // url
            imgUrl, // 图片
        } = shareOptions
        wx.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";//后端接口返回的配置
//methods
   wxShareInit() {
      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_base
      success: (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. 人脸识别

总结

大致流程

ftToday

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
微信小程序&公众号&支付宝小程序的登录授权、支付、分享、人脸识别&人脸核身

文章目录一、微信小程序1. 获取信息用户信息2.支付3.分享4. 腾讯云小程序人脸核身二、微信公众号1.获取信息用户信息2.支付3. 分享4. 人脸识别三、支付宝小程序1. 获取信息用户信息2.支付（此能力暂不支持个人账户）3. 分享4. 人脸识别四、H5(支付宝相关的大部分功能个人用户很多需要企业用户)1. 获取信息用户信息2.支付3. 分享4. 人脸识别总结一、微信小程序1. 获取信息用户信息小程序登陆流程需要微信前端调用wx.login接口获取code。然后再调用wx.getUser
复制链接

扫一扫