PopupBridge iOS

PopupBridge 是一个 iOS 库，它允许 WKWebView 在 ASWebAuthenticationSession 浏览器中打开弹出窗口，并将数据发送回 WKWebView 中的父页面。

PopupBridge 也可用于 Android。

请参阅常见问题解答，以了解有关 PopupBridge 的更多信息。请参阅在 WebView 中使用 PayPal，以将 PopupBridge 与 PayPal 结合使用。

• iOS 14.0+
• Xcode 15.0+
• Swift 5.9+ 或 Objective-C

要使用 CocoaPods 进行集成，请将以下行添加到您的 Podfile

pod 'PopupBridge'

要使用 Carthage 进行集成，请将 github "braintree/popup-bridge-ios" 添加到您的 Cartfile 中，并将框架添加到您的项目。

要使用 Swift Package Manager 进行集成，请选择 File > Swift Packages > Add Package Dependency，然后输入 https://github.com/braintree/popup-bridge-ios 作为存储库 URL。 选中 PopupBridge 的复选框。

如果您查看您的应用目标，您会看到 PopupBridge 已自动作为框架链接到您的应用（请参阅 General > Frameworks, Libraries, and Embedded Content）。

要运行示例应用，请克隆存储库，打开 PopupBridge.xcworkspace 并运行 Demo 应用目标。

1. 将 PopupBridge 与您的 WKWebView 集成

   class ViewController: UIViewController {
       
       var webView: WKWebView = WKWebView(frame: CGRect(x: 0, y: 0, width: 300, height: 700))
       var popupBridge: POPPopupBridge?
   
       override func viewDidLoad() {
           super.viewDidLoad()
   
           view.addSubview(webView)
           
           popupBridge = POPPopupBridge(webView: webView)
           
           // Replace https://:3099/ with the webpage you want to open in the webview
           let url = URL(string: "https://:3099/")!
           webView.load(URLRequest(url: url))
       }
   }

2. 通过编写一些 JavaScript，从网页中使用 PopupBridge

   var url = 'https://:3099/popup'; // or whatever the page is that you want to open in a popup
   
   if (window.popupBridge) {
     // Open the popup in a browser, and give it the deep link back to the app
     popupBridge.open(url + '?popupBridgeReturnUrlPrefix=' + popupBridge.getReturnUrlPrefix());
   
     // Optional: define a callback to process results of interaction with the popup
     popupBridge.onComplete = function (err, payload) {
       if (err) {
         console.error('PopupBridge onComplete Error:', err);
       } else if (!err && !payload) {
         console.log('User closed popup.');
       } else {
         alert('Your favorite color is ' + payload.queryItems.color);
       }
     };
   } else {
     var popup = window.open(url);
   
     window.addEventListener('message', function (event) {
       var color = JSON.parse(event.data).color;
   
       if (color) {
         popup.close();
         alert('Your favorite color is ' + color);
       }
     });
   }

3. 重定向回弹出窗口内的应用程序

   <h1>What is your favorite color?</h1>
   
   <a href="#red" data-color="red">Red</a>
   <a href="#green" data-color="green">Green</a>
   <a href="#blue" data-color="blue">Blue</a>
   
   <script src="jquery.js"></script>
   <script>
   $('a').on('click', function (event) {
     var color = $(this).data('color');
   
     if (location.search.indexOf('popupBridgeReturnUrlPrefix') !== -1) {
       var prefix = location.search.split('popupBridgeReturnUrlPrefix=')[1];
       // Open the deep link back to the app, and send some data
       location.href = prefix + '?color=' + color;
     } else {
       window.opener.postMessage(JSON.stringify({ color: color }), '*');
     }
   });
   </script>

WKWebView 可以通过其WKUIDelegate 打开弹出窗口，可以实现它以在新的 WKWebView 中显示弹出窗口。

但是，WKWebView 不显示地址栏或 HTTPS 锁定图标。 如果弹出窗口接收到敏感的用户信息（例如，登录凭据），则用户必须隐式地信任该网页不会将他们重定向到可能窃取其信息的恶意欺骗页面。 PopupBridge 通过使用 ASWebAuthenticationSession 解决了这个问题。

• 具有需要打开弹出窗口的 WebView 的应用程序
• 当弹出窗口需要将数据从弹出窗口发送回 WKWebView 时
• 当弹出窗口需要显示 HTTPS 锁定图标以提高用户信任度时
• 使用 OAuth 的应用程序

• PopupBridge 通过注入用户脚本到页面来连接到 WKWebView
  • 这公开了一个 JavaScript 接口（通过 window.popupBridge），供网页与 iOS 代码交互
• 网页检测页面是否有权访问 window.popupBridge； 如果是，它会创建一个 ASWebAuthenticationSession 以打开弹出窗口 URL
  • 网页还可以使用 popupBridge.onComplete 作为回调
• 如果用户点击 ASWebAuthenticationSession 上的取消按钮，则会使用错误调用 popupBridge.onComplete，并且有效负载为 null

我们是在 Braintree 的开发人员体验团队工作的工程师。

简短的回答：当移动应用程序使用 WebView 来支持结账流程时，接受 PayPal 作为付款选项。

PayPal 身份验证发生在弹出窗口中。 但是，这会导致使用网页为其应用程序中的付款提供支持的 Braintree 商户出现问题：他们无法接受 PayPal，因为 WebView 无法打开弹出窗口并将 PayPal 付款授权数据返回到父结账页面。

PopupBridge 通过允许 braintree-web 或 PayPal 的 Checkout.js 从安全的迷你浏览器打开 PayPal 弹出窗口来解决此问题。

基于 WebView 的结账流程可以使用 PopupBridge 和 Braintree JS SDK 或 PayPal 的 Checkout.js 接受 PayPal。 对于身份验证流程，PayPal 需要一个弹出窗口 - 可以使用 PopupBridge 模拟。

1. 创建一个基于 Web 的结账，它使用 Checkout.js 或 Braintree JS SDK 接受 PayPal
2. 创建一个本机移动应用程序，该应用程序在 WKWebView 中打开结账（请参阅快速入门说明）
3. 集成 PopupBridge 库
4. 收集设备数据
   • 为了帮助检测欺诈活动，请在执行 PayPal 交易之前收集设备数据。 这类似于使用我们的 本机 iOS SDK 收集设备数据，但有一些差异
     1. 您可以仅将 PayPalDataCollector 添加到您的应用程序，而不是导入整个数据收集器：pod 'Braintree/PayPalDataCollector'
     2. 根据您是进行一次性付款还是保管付款，在您的本机应用程序中实现方法。 请参阅适用于 PayPal + PopupBridge 的 iOS 代码段
5. 获得收益！

此 SDK 遵守我们的客户端 SDK 弃用策略。 有关 SDK 的潜在状态的更多信息，请查看我们的开发人员文档。

Braintree, code@getbraintree.com

PopupBridge is available under the MIT license. See the LICENSE file for more info.