mxenabled/ios-connect-demo

Demo iOS app implementing the connect widget in a webview

MXConnect Demo iOS App

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.

How to download and use the demo app

1. Clone the repo: git clone [email protected]:mxenabled/ios-connect-demo.git.
2. Open the xcode project in xcode.
3. Get a widget URL.
4. Copy the URL and paste it into the ConnectController.swift->widgetURL variable
5. Run the application.

Getting the widget URL

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

Handling OAuth

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.

ios-connect-demo's Issues

Is there any implementation guidance for integrating SwiftUI with MX?

Do you have any reference implementation of using embedded WebView for SwiftUI based application?

Typo in log messaging: "Recived" in place of "Received"

Description of Issue:

When relaying the status updates, there is a typo. e.g.

Recieved a redirect of:  Optional(appscheme://exp.host/@community/route-in-application?status=success&member_guid=MBR-576b125f-672f-4845-8091-d0854ce69b6a)
Recived a status: success, member: MBR-576b125f-672f-4845-8091-d0854ce69b6a, errorReason: 

It says "Recived" in place of "Received"

Steps to Reproduce:

N/A

Browser or Device Tested:

ios device simulator

Environment Tested:

QA

Honeybadgers:

Network / Console Errors Screenshot:

Pictures/Videos of Issue:

When will a "readme" be forthcoming?

Hi, thanks for the project. Can you give some step by step instructions on how to get this implemented as opposed to comments embedded in the code? Is there a way I can communicate directly with you to try and get this up and running in my sandbox? Thanks,