从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

一、起始

微信iOS OpenSDK1.8.6版本开始,使用了iOS中的Universal Links。iOS 工程用pod一更新,使用到相关API的地方,全部报错,仔细一查看,API接口做了前面的改动,接口全部采用Universal Links的方式。看着工程到处报错飘红,要不还是用老版本SDK算了?心里犯嘀咕。细一想,后续很多其他第三方SDK可能都会采用这种方式使用,那干脆趁这次适配了吧。

于是根据微信开发者平台的SDK接入文档,网上找相关资料,但这个只有一端是无法完成这个对接工作的,需要配合服务器才能完整的对接成功。网上搜寻资料,要么就只有客户端资料,要么就只有服务器端的资料,需要几篇组合起来,才能知道一个完整的脉络。

非常有幸客户端和服务器端都还算熟悉,能把网络上片段式组合起来,完整的串联起来。也深深体会到,现在不再是造轮子创新的时代,而是能把片状散碎的各个点组合起来,组合串联式的贯通成完整体系。

二、iOS客户端配置

2.1、环境要求

iOS客户端的配置相对而言比较简单,需要把微信开发者平台文档中的环境和各个说明熟读下。简单概况下就是三点:

特别注意:我们的iOS项目以前已集成微信OpenSDK,详细的SDK集成,可以参照官网步骤,这里针对Universal Links的适配。

1、SDK版本: SDK1.8.6或以上

2、微信版本: 7.0.7或以上

3、系统版本: iOS12或以上

微信开发者平台iOS SDK接入文档:

https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

2.2、确认微信的Universal Links正常

在手机Safari微信的Universal Links链接地址,确保openSDK与微信双向使用Universal Links通信。

https://help.wechat.com/app/

下拉查看是否有打开微信入口(如下图)。若无入口,可能是由于系统拉取微信Universal Links失败,请检查手机网络状态是否正常,或更新/重装微信。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

成功获取微信Universal Links

2.3、在iOS项目配置我们自己的Universal Links

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

添加Universal Links步骤图(xcode 11.2)

详细的操作步骤:

特别注意:操作的xcode版本为 11.2,xcode版本不同,设置面板有差异,设置步骤大体相同。

1、打开iOS项目工程,左边现在工程项目;

2、右边选择项目工程的 "Targets";

3、选择 "Signing & Capablities" Tab选项卡;

4、点击 "+Capability" 添加 "Associated Domains";

5、在搜索面板中搜索 "Associated Domains",点击添加;

6、在面板中增加了"Associated Domains"设置项,点 "+",增加Universal Link域名;

7、编辑设置内容为:applinks:app.{你的域名}.com。

特别注意:这个域名与后续服务器配置的域名一一对应,且域名必须是支持SSL即https的域名。

2.4、Xcode 设置 URL scheme

如果以前集成了SDK,以前有增加 "weixin" ,新版SDK新增了 "weixinULAPI"。

详细设置步骤:

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

设置URL scheme

1、在xcode中,选择项目工程设置项,选中“TARGETS”一栏,在 “info”标签栏;

2、在“LSApplicationQueriesSchemes“配置中,添加 ”weixin“ 和 ”weixinULAPI“。

2.5、微信开发者平台,管理后台配置应用的Universal Links

登录微信开发者管理后台,切换到“管理中心”,选择“移动应用”,查看应用的详细信息 。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

管理中心查看应用详情

在应用详情 “开发信息” 中点击 “修改”

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

修改应用开发信息

在应用开发信息中,修改 “Universal Links” 信息,设置完保存。这里用到的Universal Links为刚才在xcode设置的域名:https//:app.{你的域名}.com/edgefix/

!!!:特别注意:SDK Api用到的Universal Links为服务器后台配置给定的URL,且与微信开发者平台设置的Universal Links一一对应,缺一不可。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

修改应用“Universal Links” 信息

2.6、修改项目工程报错的Api接口

常用的API接口被修改,在用到的地方适配把API调整过来。这里用到的Universal Links为刚才在xcode设置的域名:https//:app.{你的域名}.com/edgefix/

特别注意:SDK Api用到的Universal Links为服务器后台配置给定的URL,且与微信开发者平台设置的Universal Links一一对应,缺一不可。

!!!:链接地址后面的斜杠不能丢 “ / ” ,微信回调的时候用于拼接,在微信开发者管理后台的配置一一对应。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

工程代码中配置的全局Universal Links变量

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

微信开发者平台配置的Universal Links

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

向微信终端程序注册第三方应用接口

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

处理微信通过Universal Link启动App时传递的数据

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

微信回调接口,增加了回调block

2.7、处理Universal Links方式回调

“AppDelegate” 新增加回调方式,实现代理,处理Universal Links方式回调。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

处理Universal Links方式回调

回调的链接格式:

https//:app.{你的域名}.com/edgefix/{微信AppId}/{微信业务类型}?{微信回调返回的参数}

温馨提醒:如果有多个Universal Links回调,可以根据链接回调返回的参数进行更严谨的逻辑判断,以免造成不必要的逻辑Bug。

我这里可以debug,是已经完整的配置成功,先演示下返回的结果数据。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

debug模式产科微信授权回调的信息

至此客户端到此配置完毕,特别关键的服务器端。很多客户端开发人员,不知道怎么和服务器交流这个事情,很难有完整串联起来的。相处比较融洽的团队还好,遇到踢皮球式的团队,联调起来真是够折腾和费劲。

三、服务器配置

步骤概要:

1、设置域名解析,这里暂不涉及cdn相关,与前面对应的域名,最好是备案好的域名;

2、申请域名SSL证书,这个非常关键,很多同学卡在这里;

3、以Nginx为例配置域名解析;

4、测试Universal Links域名有效性。

3.1、阿里云域名解析

准备域名,Universal Links要求是https格式的链接地址,这里以阿里云为例,配置相关域名。

在阿里云面板中找到域名解析,在域名解析设置中,选择 “添加记录”,填写服务器端信息,保存域名信息。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

添加域名解析信息记录

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

添加成功后的记录显示

3.2、申请域名的SSL证书

这里以免费的SSL证书为例,阿里云的免费SSL已经有数量限制。申请证书地址:https://freessl.cn ,申请注册一个账号,就可以开始申请证书了。

在freessl中输入需要申请证书的域名,选择免费域名,选择创建免费的SSL证书。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

填写域名证书信息

填写你的证书邮箱,其他选项默认即可,点击创建。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

邮箱和证书信息

如果没有安装KeyManager,先安装KeyManager,再点击 “打开KeyManager”。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

安装或者打开KeyManager

输入你设置的KeyManager密码,CSR生成成功后,在刚刚的freessl.cn页面点击继续。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

输入你设置的KeyManager密码

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

CSR生成成功后,在刚刚的freessl.cn页面点击继续

把相应的DNS记录值,在阿里云添加DNS域名解析,记录类型为TXT,其他值按下图箭头指向的值,配置完域名解析,点击freessl.cn中的验证,等一会儿,证书即可生成成功。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

配置DNS域名解析,验证证书

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

阿里云域名证书DNS解析记录

证书生成成功,保存到KeyManager中,把证书导出即可。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

证书生成成功,保存到KeyManager中

点击导出证书,在KeyManager中导出刚刚生成域名的证书。我们这里使用Nginx,所以选择导出Nginx域名证书。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

在KeyManager中导出刚刚生成域名的证书

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

导出Nginx域名证书

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

证书已成功导出

3.3、在服务器Nginx配置域名

把刚下载域名的证书上传到服务器的Nginx目录中。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

上传证书到服务器

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

新建域名配置文件

在Nginx目录 /usr/local/nginx/html 下创建 apple-app-site-association 文件,内容为:

{ "applinks": { "apps": [], "details": [ { "appID": "TeamId.BundleId", "paths": [ "/edgefix/*" ] } ] } }

特别注意:

  • 其中AppID替换成应用的TeamId和BundleId。

appID内容为在苹果开发者平台获得 https://developer.apple.com,苹果开发者的TeamId 和 应用的BundleId。

  • 点击Identifiers 选项 -> 选择应用的项目信息

  • Paths对应微信开发者管理后台对应的URI链接,一一对应。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

苹果开发者后台

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

开发者后台获取的TeamId和BundleId

域名配置内容具体如下,下面的配置 /apple-app-site-association 对应上面的配置文件

server { listen 80; server_name app.${你的域名}.com; rewrite ^(.*)$ https://$host$1 permanent; } server { listen 443 ssl; server_name app.${你的域名}.com; ssl_certificate ssl/${你的证书}.crt; ssl_certificate_key ssl/${你的证书}.key; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_prefer_server_ciphers on; charset utf-8; access_log logs/app_com_access.log main; include proxy.conf; location /apple-app-site-association { alias /usr/local/nginx/html/apple-app-site-association; } location ~ ^/(WEB-INF)/ { deny all; } location ~ \.(php|asp|aspx) { deny all; } }

把域名配置添加到 Nginx主配置文件中 nginx.conf

http { include mime.types; default_type application/octet-stream; ...... include servers/app.${你的配置文件}.conf; }

配置好以后,在Nginx的 sbin目录下,重新reload下配置文件,生效刚刚的配置。

nginx -s reload

3.4、请求校验是否配置成功

请求访问链接 https://app.你的域名.com/apple-app-site-association 如果有如下内容返回,或者可以下载该文件,说明Nginx配置成功。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

配置文件可以访问和下载

在iOS手机安装刚才配置的应用,用自带的浏览器Safari中访问https//:app.{你的域名}.com/edgefix/,下拉显示了打开我们应用的入口,说明我们应用端配置成功。

从客户端到服务器端,适配微信iOS OpenSDK中的Universal Links

Safari浏览器打开,打开App入口

原文链接:https://blog.csdn.net/weixin_42257984/article/details/124578470?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918471416780357224455%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918471416780357224455&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-29-124578470-null-null.nonecase&utm_term=%E5%85%8D%E5%A4%87%E6%A1%88cdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/3082

(0)
上一篇 2022年7月30日
下一篇 2022年7月30日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml