Ionic 4 将 Ticket/QRImage 添加到 Apple 钱包答案

【问题标题】：Ionic 4 Adding Ticket/QRImage to Apple WalletIonic 4 将 Ticket/QRImage 添加到 Apple 钱包
【发布时间】：2019-11-03 05:08:24
【问题描述】：

我在购票后生成二维码。我想将这些二维码存储到 Apple Wallet。

我用过ionic-native apple-wallet plugin，但是the documentation 没有提供足够的信息来说明如何在苹果钱包中存储二维码。

import { AppleWallet } from '@ionic-native/apple-wallet/ngx';

this.appleWallet.isAvailable()
 .then((res: boolean) => {
    Expect res to be boolean
  })
 .catch((err) => {
    Catch {{err}} here
 });

文档允许添加/移除卡片，但没有关于将二维码添加到 Apple Wallet 的文档。

【问题讨论】：

你找到运气了吗？

标签： ionic-framework ionic4 ionic-native apple-wallet

【解决方案1】：

您确实意识到，为了创建有效的 Apple Wallet Pass，您需要创建一个捆绑包，然后对其进行签名、压缩和分发？

This link to apple dev docs 将有助于对流程有基本的了解。根据this comment 的说法，请注意不要直接在应用程序中创建通行证。

我们遇到了与您类似的问题 - 我们有用于销售交通票的 Ionic 应用程序，我们希望在 iOS 上添加将票添加到钱包的功能。我所做的所有研究似乎都表明目前（2019 年 12 月）无法完成。

虽然，您可以使用一种解决方法

它涉及在系统浏览器中打开外部链接，因此可能会发现此解决方案不合适。

您需要有一个端点（您的 API 或第三方服务），该端点将返回生成并签名的 .pkpass 文件。它不必专门返回文件，而是包含带有此类标头的捆绑包的响应：

Content-Type: application/vnd.apple.pkpass
Content-Disposition: attachment;filename=your_file_name.pkpass

在您的 Ionic 应用程序中安装 In App Browser 原生插件

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

将其添加到您的 AppModule 提供程序中

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@NgModule({
  ...
  providers: [
    ...
    InAppBrowser
  ],
})
export class AppModule {}

在组件中注入InAppBrowser 并调用方法create，第二个参数（目标）为_system。此命令将使用提供的 url 打开外部本机设备浏览器。如果端点配置正确，浏览器将自动开始下载，然后呈现给用户 UI 以将票证/通行证添加到钱包。这是一个很好的 UI 示例：Link to the image

constructor(private inAppBrowser: InAppBrowser) {
}

downloadApplePass(ticket) {
  const url = `https://your.api/endpoint/${ticket.id}`;

  this.inAppBrowser.create(url, '_system');
}

【讨论】：

【解决方案2】：

您所指的插件似乎不是为此目的而设计的。

文档顶部说它适用于信用卡/借记卡：

此插件支持将您的信用卡/借记卡添加到 Apple Wallet。它还可以检查钱包或任何配对设备中是否存在信用卡/借记卡，例如苹果手表

查看 Apple Wallet 文档，它使用特定的类 PKPaymentPass 来管理卡片，而票证由不同的类处理：

https://developer.apple.com/documentation/passkit/wallet

查看您正在使用的本机插件的源代码向我表明，每次它使用 PKPass 时，它都会将其转换为 PKPaymentPass，所以这看起来不像是文档问题，而是只是不支持。

IOS代码可以看这里：

https://github.com/tomavic/cordova-apple-wallet/blob/master/src/ios/CDVAppleWallet.m

不幸的是，除非您想自己编写代码，否则您似乎不走运。

我做了一些搜索，可以找到一些关于这个主题的讨论，但它们都是无处可去的线程。

【讨论】：