手机H5如何对接支付宝登陆授权以及支付（H5网站支付）

场景需求：

通过支付宝扫描二维码进入手机H5网站,获取用户唯一标识appid来标识用户以及处理逻辑。一系列操作后，调起支付窗口完成支付宝支付

1、支付宝开放平台配置

1、登陆支付宝开放平台中心，选择“ 网页&移动应用 ”，然后创建一个应用。此时该应用的状态为开发中，需要我们添加一些功能和信息后去审核，审核通过就成了已上线。就可以开始使用了。

这里我们只需要两项功能：1、手机网站支付；2、用户信息授权
除此之外还需要配置一下开发设置，如下图：

具体配置可以参照上面官方的文档来。
我这里只配了一个接口加签方式（支付使用），加签方式有两种，一种是普通加签——需要设置支付宝公钥。另一种是证书加签方式。这个有点复杂，看个人需求，具体参照官方文档。
我这里选择普通加签方式，按照官方文档的指示，下载了一个“ 支付宝开放平台开发助手 ” 的软件用来生成相应的应用公钥和应用私钥

首先，用上面这个工具生成一对密钥，这里叫做应用私钥和应用公钥。我们要做的就是 保存 好这对密钥！！！。普通加签方式就是把这里的应用公钥上传（复制粘贴）到配置里面，然后旁边会有个生成支付宝公钥的按钮，点击生成支付宝公钥。然后把这段支付宝公钥保存下来。跟之前应用私钥和应用公钥一起。后面支付会用到。

接下来就是配置授权回调地址。：这个回调地址就是我们做用户信息授权登陆的时候用到的。这里要配置一个正规的可访问域名。支付宝会检测的。
这里简单介绍一下这个回调地址有什么用。首先我们得知道用户信息授权的流程：用户通过特定规则拼接传输数据到支付宝指定授权地址（url），支付宝校验你传输的数据，通过的话就会给你返回一个auth_code。我们再通过返回过来的auth_code去换取支付宝用户唯一标识appid。拿到这个appid。我们就完成了授权。
上面返回的auth_code就是在支付宝校验我们传输的数据后，会请求我们后台配置的授权回调地址。然后会在url后面带上auth_code
简单来说就是：我们请求支付宝，支付宝通过后会访问我们配置的授权回调地址来将auth_code返回给我们。

配置这一块就结束了。总共配置两个地方：一个加签方式（支付使用），一个授权回调地址（授权使用）。完成后我们就可以提交，等待审核了。（所有功能都必须审核通过才能使用）

用户信息授权

上面我们基本配置了授权所需要的配置，其实就只配置一个授权回调地址来获取返回的auth_code。
先上代码后讲解：

redirectForAliCode() {
   

            goodsApi.getAliSign().then(res => {
   //授权需要用到开放平台里我们创建应用的appid。不是用户appid。
                const rr = res.data;
                const redirectUrl = window.location.href;
                var result = redirectUrl.match(/=(\S*)#/)[1];
                var results = result.match(/(\d*)/)[1];
                let param = 'app_id=' + rr
                param += '&scope=auth_base'//可参考文档，因为我们只要授权，所以，这里只写auth_base
                //下面的redirect_uri值必须经过URLENCODE转义，不能明文传输
                param += '&redirect_uri=' + encodeURIComponent('http://****.com')//这里写我们后台配置的授权回调地址
                param += '&state='+results                                //一定要一模一样，否则授权会失败
                console.log('url:', 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?'+ param);
                window.location.href = 'https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?' + param;//支付宝授权指定url
            }