第三方 登录 、支付 uni-app、小程序流程

uni-app

登录流程

  1. 获取微信appid和密钥
  2. 获取appid后,在manifest.json中配置小程序的appid

支付流程(微信支付)

  1. 微信开放平台申请支付appid(分享、登录)
  2. 填写manifest配置文件
  3. 登录拿到code
  4. code订单信息(价格)发送给后端
  5. 请求成功拿到paymen对象(timestamp时间戳、noceStr、package,paysign支付指纹)4
  6. 通过支付api requestPayment发起支付
  weixinPay() {
                console.log("发起支付");
                this.loading = true;
                uni.login({
                    success: (e) => {
                        console.log("login success", e);
                        uni.request({
                            url: `https://unidemo.dcloud.net.cn/payment/wx/mp?code=${e.code}&amount=${this.price}`,
                            success: (res) => {
                                console.log("pay request success", res);
                                if (res.statusCode !== 200) {
                                    uni.showModal({
                                        content: "支付失败,请重试!",
                                        showCancel: false
                                    });
                                    return;
                                }
                                if (res.data.ret === 0) {
                                    console.log("得到接口prepay_id", res.data.payment);
                                    let paymentData = res.data.payment;
                                    uni.requestPayment({
                                        timeStamp: paymentData.timeStamp,
                                        nonceStr: paymentData.nonceStr,
                                        package: paymentData.package,
                                        signType: 'MD5',
                                        paySign: paymentData.paySign,
                                        success: (res) => {
                                            uni.showToast({
                                                title: "感谢您的赞助!"
                                            })
                                        },
                                        fail: (res) => {
                                            uni.showModal({
                                                content: "支付失败,原因为: " + res
                                                    .errMsg,
                                                showCancel: false
                                            })
                                        },
                                        complete: () => {
                                            this.loading = false;
                                        }
                                    })
                                } else {
                                    uni.showModal({
                                        content: res.data.desc,
                                        showCancel: false
                                    })
                                }
                            },
                            fail: (e) => {
                                console.log("fail", e);
                                this.loading = false;
                                uni.showModal({
                                    content: "支付失败,原因为: " + e.errMsg,
                                    showCancel: false
                                })
                            }
                        })
                    },
                    fail: (e) => {
                        console.log("fail", e);
                        this.loading = false;
                        uni.showModal({
                            content: "支付失败,原因为: " + e.errMsg,
                            showCancel: false
                        })
                    }
                })
            },

小程序

流程

  1. wx.login 获取到code
  2. 通过 open-type="getUserInfo"获取到头像、用户名等信息
  3. 把code通过ajax发送给服务器
  4. 服务器通过appid+appsecret+code 换取openid和session_key
  5. 把openid+用户名、昵称存入服务
    器数据库中
  6. 自定义用户信息,登录状态

程序端

  • bindgetuserinfo需要用户弹框授权 拿到头像、用户名…
 
  • wx.login方法 只能拿到code信息 通过ajax把用户信息和code发送给服务器

服务器端

  • 把appid+appsecret+code 发送到微信服务器

微信服务器

  • 得到openid(用户的唯一识别id)、session_key
  • 有了openid+用户名、昵称存入服务器数据库中
    第三方 登录 、支付 uni-app、小程序流程_第1张图片

支付流程

一、 用户下单

  • 后端获取openid
  • 生成订单
  • 调用支付下单api
  • 返回一个预付订单prepay_id
  • 后端签名
  • 返回给小程序让用户确认

二、 用户确认订单

三、返回支付结果

  • 展示支付结果
  • 微信后端通知商户后台
  • 商户后台可以查询订单信息
    -第三方 登录 、支付 uni-app、小程序流程_第2张图片

你可能感兴趣的:(第三方 登录 、支付 uni-app、小程序流程)