Integrating AE Connect with Mobile Apps Using Webviews
This article will introduce you to the concept of webviews. However, it is not a tutorial to help you integrate a webview of AE Connect into your app. We recommend reading the developer documentation about the webview implementations you need to use before setting them up, so you can integrate them better with your existing app.
Webviews and Hybrid Apps
Using webviews, you can integrate Appreciation Engine into your existing iOS and Android apps. When a native app includes webviews for additional functionality, it becomes a part-native and part-web app, making it a "hybrid" app.
Webviews allow any application to take advantage of content that's made for the web. In a mobile app, the webview is the "window" through which your user can interact with webpages. In the case of Appreciation Engine, we will be using the webview to authenticate AE.
Implementing Webviews in Android and iOS Apps
While the implementation of webviews in iOS is a little bit different than on Android, the resulting functionality is the same. This article will show you how to implement Appreciation Engine in your iOS and Android apps.
Both Android and iOS make it easy to add webviews to your apps:
- Android uses a
WebViewclass. You can add the webview and any required code using Java. You can then use the
- iOS includes a
UIWebViewclass as a part of Objective-C and Swift. You can then use the
Diagram of Mobile App–Webview Integration
In the diagram below, you can see what is happening behind the scenes when a user registers or logs into an app that uses an AE webview.
[ diagrams/ae-js-webview-flowchart.png ]
Here are the steps, from start to finish:
- The mobile app loads the webview.
- The externally-hosted page gets pulled into the webview and includes the AE JS framework.
- An AE JS request is made.
- AE JS makes an authentication request to the social network specified by the user.
- The social network provides an authentication response to AE JS.
- AE JS triggers an
onLoginevent and responds to the webview with it.
onLoginhandler will capture the data returned by AE from the external service's authentication process. This data is passed back to the mobile app environment through a native bridge. (For example, the
- The mobile app handles the login process.
- The user is now logged in and can continue to use the mobile app.