支付宝小程序如何跳转到生活号应用授权链接

问题描述

在微信小程序上通过webview访问微信公众号授权链接，是可以正常访问的和信息授权的。
最近在开发支付宝小程序时，有个需求是在支付宝小程序打开支付宝生活号的应用授权长链，本想着可以直接跟微信小程序一样在webview访问就完事了，可是结果不如意。

问题判断

支付宝生活号的网页应用授权长链示例：

APPID：生活号应用的appid，ENCODED_URL：encode后的重定向链接

https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=auth_user&redirect_uri=ENCODED_URL&state=init

微信公众号网页授权链接示例：

APPID：公众号的appid，ENCODED_URL：encode后的重定向链接 https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=ENCODED_URL&response_type=code&scope=snsapi_base&state=init#wechat_redirect

微信小程序通过web-view访问网页授权，官方默认白名单内应该有open.weixin.qq.com此域名，且有做公众号和小程序的关联，所以才可以正常访问
支付宝小程序不能通过web-view访问网页授权，在支付宝小程序中会报openauth.alipay.com此域名的问题，因是支付宝官方的域名，也无法把校验文件放对方服务器，所以配置不了白名单。

问题排查

支付宝小程序是否存在默认的全局白名单域名
支付宝小程序是否有其他方式打开网页应用授权链接

排查过程

1. 查看支付宝小程序api文档

通过查阅文档发现，有个跳转支付宝应用或页面my.ap.openURL的api，属于是打开小程序外支付宝app内的webview。

文档链接：支付宝小程序跳转支付宝应用或页面方法

代码示例：

js 复制代码

my.ap.openURL({
  url: 'https://render.alipay.com/p/404', // 请将 url 替换为有效的页面地址
  success: (res) => {
    console.log('openURL success', res)
  },
  fail: (err) => {
    console.log('openURL success', err)
  }
});

注意点：

URL 为第三方 H5 页面或者支付宝官方给出的链接（以 https:// 或者 alipays:// 开头），且必须在 URL 白名单内。
URL 白名单包含两部分：
- 默认的全局白名单，包含以 https://render.alipay.com/p/ 开头的所有 URL。所有小程序都可直接通过 my.ap.openURL 打开此类 URL。
- 开放范围 内的小程序，可通过开放平台控制台开发设置 > openURL 配置 自助申请添加其 URL 白名单。申请通过审核以后约 10 分钟生效。
  
  尝试使用my.ap.openURL打开支付宝生活号的网页应用授权长链,但报错：跳转目标不在白名单
  因未在openURL 配置openauth.alipay.com白名单
  配置需要上传目标链接的案例截图，比较繁琐

2. 找出默认的全局白名单域名

在上面的步骤的文档中,发现render.alipay.com是其中的白名单，后经尝试，ds.alipay.com也在白名单中

猜想： 是否可以通过https://render.alipay.com或者https://ds.alipay.com/变相打开网页应用授权链接？

3.了解支付宝内程序的跳转方式

H5 页面或者其它 App 支持外跳小程 → 通过 scheme 链接方式小程序scheme链接介绍
网站打开H5支付宝登录 -> 通过 scheme 链接方式网站如何实现第三方支付宝登录
scheme 链接转换成https链接唤起 scheme转换成https链接唤起小程序

4. 通过全局白名单链接打开网页应用授权链接

通过网站如何实现第三方支付宝登录了解到支付宝客户端端内进行 H5 支付宝登录（因我们的业务是在小程序内打开，属于端内打开）有两种方式：

通过 js+api 的方式进行访问授权（很明显不是我们想要)
通过链接方式进行访问授权（符合需求的）

采用通过链接方式进行访问授权：alipays://platformapi/startapp?appId=20000067&url=encodeURIComponent(url),其中appId=20000067是固定的，url是需要授权的业务页面链接
因my.ap.openURL不支持alipays://platformapi/startapp，需要将scheme 链接转换成https链接，即把 scheme 当作参数进行 UrlEncode 编码后，拼接在 https://ds.alipay.com/?scheme= 后。

js 复制代码

const openUrl = `https://ds.alipay.com/?scheme=` 
                    + encodeURIComponent(`alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(url)}`)

my.ap.openURL打开以上链接，正常打开授权页面，再尝试另外一个全局白名单域名，也能正常打开，即

js 复制代码

const openUrl = `https://render.alipay.com/p/s/i/?scheme=` 
                    + encodeURIComponent(`alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(url)}`)

总结

社区有类似的问答：h5上直接点击连接，打开支付宝并跳转到商户应用授权页面

支付宝小程序跳H5方式

跳普通H5(白名单域名)：webview
跳网页授权链接：my.ap.openURL

支付宝小程序openURL全局白名单

使用my.ap.openURL打开网页授权链接

```https://ds.alipay.com/?scheme=` + encodeURIComponent(alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(url)})``
```https://render.alipay.com/p/s/i/?scheme=` + encodeURIComponent(alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(url)}) ``