蚂蚁支付宝小程序开发从零开始[含demo]

太过爱你忘了你带给我的痛 2022-09-03 09:24 229阅读 0赞

### 目录 ###

*  一、创建小程序
 *  二、接入小程序
 *  三、调试小程序
 *  四、错误与解决

**本篇主要记录支付宝小程序开发的整个步骤，从前端到后端，图文并茂，清晰易懂，从配置到开发，你想要的的都有。完整流程，后续追加过程问题的解决**

**最终效果是：获取支付宝登录用户的userId，用它完成相关的业务处理  
主要对接技术包括：**

> 获取授权码  
> 证书配置  
> 页面请求编程  
> 获取userid

# 一、创建小程序 #

**1、创建小程序**  
登录支付宝 [https://www.alipay.com/][https_www.alipay.com] > 产品中心 > 支付宝预授权（没开通的开通）> 自行研发接入 > 创建小程序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 1]  
**2、记录下小程序的Id**  
![在这里插入图片描述][07ec558859154383924a46bfc01804ff.png]

**3、开发设置**  
这步的目的是为了能接入开发  
在小程序的控制台找到【开发设置】，完成 \[设置加签和应用网关\] 和 \[设置域名白名单\]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 2]  
接口加签建议用证书的方式。配合【支付宝开发平台助手】生成证书，并在这个页面上传生成即可。  
[密钥接入文档][Link 1]  
**设置完成，把这三个证书下载下来备用，同时支付宝开发平台助手生成的公钥，私钥也保存好，开发时用到**

# 二、接入小程序 #

**1、前端接入-安装创建**  
下载安装开发者工具：[https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html][https_render.alipay.com_p_f_fd-jwq8nu2a_pages_home_index.html]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 3]  
**安装完后打开，新建小程序项目**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 4]  
完成后，首页是这样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 5]

**2、前端接入-编程**  
目的：获取授权码，然后获取授权用户id，方便业务后续调用。  
修改2个文件：

> page/API/get-auth-code/get-auth-code.axml  
> page/API/get-auth-code/get-auth-code.js

get-auth-code.axml 新增myrequest节点

<view class="page">
      <view class="page-section">
        <view>请不要一进入小程序就弹框授权，建议先了解小程序的服务内容</view>
        <button type="primary" onTap="getAuthCode">
          获取授权码
        </button>
        <button type="primary" onTap="myrequest">
          我的请求
        </button>
      </view>
    </view>

get-auth-code.js 加上响应请求

Page({ 
      onLoad() {  },
      data: { },
      getAuthCode: () => { 
        my.getAuthCode({ 
          scopes: 'auth_user',
          success: ({ authCode }) => { 
            console.log(`authCode:`, authCode);
            my.alert({ 
               content: authCode,
            });
          },
        });
      },
    
      myrequest: () => { 
        my.getAuthCode({ 
          scopes: 'auth_user',
          success: ({ authCode }) => { 
            console.log(`authCode:`, authCode);
            my.request({ 
              url: 'http://192.168.3.2:8080/myapp/aliapi/login/login.do', //服务器接口地址
              method: 'Post',
              data: { 
                code: authCode //上面getAuthCode 成功获取到的code, 传入后台接口
              },
              header: { 
                'content-type': 'application/json' //默认值
              },
              success: function (res) { 
                console.log(res)
                 my.alert({ 
                    content: res,
              });
              }
            })
          },
        });
      },
    });

完成后编译，效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 6]  
接下来去完成 http://192.168.3.2:8080/myapp/aliapi/login/login.do 接口编码  
  
  
**3、后端接入**

@Override
        public String login(LoginDto loginDto, HttpServletResponse response) { 
        
            String appid = "小程序id";	// 之前步骤提到的
            String appPrivateKey = "私钥";  // 之前步骤提到的
            
            CertAlipayRequest certAlipayRequest = new CertAlipayRequest();
            certAlipayRequest.setServerUrl("https://openapi.alipay.com/gateway.do");
            certAlipayRequest.setAppId(appid);
            certAlipayRequest.setPrivateKey(appPrivateKey);
            certAlipayRequest.setFormat("json");
            certAlipayRequest.setCharset("utf-8");
            certAlipayRequest.setSignType("RSA2");
    
            ClassLoader loader = Thread.currentThread().getContextClassLoader();
            certAlipayRequest.setCertPath(loader.getResource("").getPath() + "appCertPublicKey.crt");//应用公钥证书
            certAlipayRequest.setAlipayPublicCertPath(loader.getResource("").getPath() + "alipayCertPublicKey_RSA2.crt");//支付宝公钥证书
            certAlipayRequest.setRootCertPath(loader.getResource("").getPath() + "alipayRootCert.crt");//支付宝根证书
    
            try { 
                AlipayClient alipayClient = new DefaultAlipayClient(certAlipayRequest);
                AlipaySystemOauthTokenRequest request = new AlipaySystemOauthTokenRequest();
                request.setGrantType(grantType);
                request.setCode(loginDto.getCode());
                AlipaySystemOauthTokenResponse alipaySystemOauthTokenResponse = alipayClient.certificateExecute(request);
                if (alipaySystemOauthTokenResponse.isSuccess()) { 
                    LogUtils.info("调用成功, Response result={}", alipaySystemOauthTokenResponse.getBody());
                    // 生成UUID
                    // String tokenId = UUID.randomUUID().toString().replaceAll("-", "");
                    // 设置返回tokenid (用户id组成)
                    // response.setHeader(TOKEN, JwtUtil.sign(alipaySystemOauthTokenResponse.getUserId(), tokenId));
                    return alipaySystemOauthTokenResponse.getUserId();
                } else { 
                    LogUtils.info("调用失败, {}", alipaySystemOauthTokenResponse.getSubMsg());
                }
            } catch (AlipayApiException e) { 
                e.printStackTrace();
            }
        }

官方开发指南文档地址：[https://opendocs.alipay.com/mini/developer][https_opendocs.alipay.com_mini_developer]

# 三、调试小程序 #

**主要是看接口是否调通**

**1、在开发者工具上查看请求信息**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 7]

**2、查看前端日志打印**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 8]

**3、当然，出了问题，后端的调试更重要，这里就不举例了。**

主要问题集中在密钥不正确，参数不全

# 四、错误与解决 #

[移步这里][Link 2]

[https_www.alipay.com]: https://www.alipay.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70]: /images/20220829/a4225b1b16e24773932fdbcc71f47206.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 1]: /images/20220829/7657c8bb1d664ffbb73631ad5af056d8.png
[07ec558859154383924a46bfc01804ff.png]: /images/20220829/0fc5a55ae3784a008105a612d6ea62b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 2]: /images/20220829/e90fa1b3fcbd4659b564ee815bb4df59.png
[Link 1]: https://opendocs.alipay.com/open/291/105971#Krqvg
[https_render.alipay.com_p_f_fd-jwq8nu2a_pages_home_index.html]: https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 3]: /images/20220829/91af3fc5f09c4c0bad386a7fdf060f7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 4]: /images/20220829/c76bec718edd4ebda71c8b6afe8604f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 5]: /images/20220829/7d2af4b626bc4aeabe639694b7914398.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 6]: /images/20220829/cec0aec5ca2f426aa01c2fca7d9c9d9c.png
[https_opendocs.alipay.com_mini_developer]: https://opendocs.alipay.com/mini/developer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 7]: /images/20220829/728eddc7a52140a2a431edad133f2f47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW4xMDc4NzY_size_16_color_FFFFFF_t_70 8]: /images/20220829/5eb98e44a8a844cb9dcf37428e660db5.png
[Link 2]: https://blog.csdn.net/zhan107876/article/details/119522838