前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 支付

对于大多数网站或者 APP 都是有着支付功能的。这一节我们将在项目中集成支付宝支付,为什么会选择支付宝呢。支付宝有一个沙箱环境,可以让我们不需要拥有真实的商家账号就可以进行支付的开发测试。本篇将带大家学习一下怎么集成支付宝并支付。

# 沙箱环境

首先访问 蚂蚁金服 ,然后用你的支付宝账号登录之后会看到如下界面:

点击 设置应用公钥

点击 查看秘钥 生成方法

点击查看密钥生成方法之后会跳转到一篇文档,里面可以下载 RSA2 密钥生成工具,请根据自己的系统下载对应的版本并打开:

如上图,密钥格式 选择 PKCS1,密钥长度 选择 RSA2,然后点击 生成密钥 按钮。生成完毕之后点击 开发助手 右侧的 复制公钥 按钮,将其内容粘贴到刚刚网页上的框中点击保存。

将支付宝公钥复制下来。

# 安装插件

蚂蚁金服开放平台 SDK 使用文档,建议大家必须要看一下。它会将必要的参数与加密信息处理好,我们只需要传入业务参数就可以了。

$ npm install alipay-sdk --save
@前端进阶之旅: 代码已经复制到剪贴板

# 配置参数

https://github.com/push-over/egg-example/blob/master/config

在这里我们需要用到支付宝开放平台开发助手生成的支付宝 应用私钥 和 支付宝公钥, 是支付宝公钥,大家不要弄混了哈。这两段配置实在是太长了,把它直接放到我们的配置文件中肯定是不合适的,我们新建一个 keys 目录,并创建两个文件。

└── config
    └── keys // 密钥存放文件夹
        ├── alipay_public_key.pem // 支付宝公钥
        └── app_priv_key.pem   // 应用私钥
@前端进阶之旅: 代码已经复制到剪贴板

接下来我们来使用这两个文件:

config.alipay = {
    appId: 
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏