This is a simple application that shows how to get started with embedding Connect into an iOS application. While the links below reference the MX Platform API, this code works with any of the APIs MX offers.
- Clone the repo:
git clone git@github.com:mxenabled/ios-connect-demo.git
. - Open the xcode project in xcode.
- Get a widget URL.
- Copy the URL and paste it into the ConnectController.swift->widgetURL variable
- Run the application.
The most important thing to remember when implementing Connect in a WebView is that the widget talks to the iOS app through navigation events, not postMessages. When you embed Connect directly in a WebView, there are three configuration options you'll need to set to make sure this communication happens properly:
is_mobile_webview: true
ui_message_webview_url_scheme: <your scheme>
ui_message_version: 4
When the widget is configured as above, it sends postMessages via navigation events in the following format:
window.location = <your scheme>://<event><metadata>
In the demo app, you will want to use appscheme
as the ui_message_webview_url_scheme
.
It is imperative that your native application intercept all navigation events. In addition to the widget events, the widget also has links to bank and/or financial institution sites. You need to intercept these and send them to the user agent instead of overriding the WebView. Failure to do so may result in your WebView being replaced by the link or URL event.
You can see an example of handing events in the ConnectController.swift->webView(:decidePolicyFor:decisionHandler:) method
.
The widget will sometimes use window.open
instead of an anchor tag or window.location
. There is a separate method for handling this scenario, but the same rules from above apply.
You can see an example of handling these events in the ConnectController.swift->webView(:createWebViewWith:for:windowFeatures:)
method
OAuth in mobile WebViews requires your app to facilitate the redirect out to the OAuth provider and to accept redirects back to your app.
See the ConnectController.swift->handleOauthRedirect(payload:)
method for an example of how to get the user to the provider.
See the Info.plist
file for an example of how to set up the URL types your app must respond to when MX links back to you.
See the SceneDelegate.swift->scene(_:openURLContexts:)
method for examples of how to handle the link back from MX.
See the OAuth in WebViews docs for more detail.