diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f40604..40ce68f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +### 2.0.2 (July 3, 2024) + +### Changes + +- Added a fix to resolve an issue with App To App OAuth flow + ### 2.0.1 (March 28, 2024) - Resolved the "cannot find module" type error that occurred during the import of the 'connect' module. diff --git a/README.md b/README.md index 378c1f0..a492d57 100644 --- a/README.md +++ b/README.md @@ -4,195 +4,36 @@ Mastercard Open Banking Connect React Native SDK provides an easy way for developers to integrate Mastercard Open Banking Connect into their React Native application. +The Connect React Native SDK can be used with Mastercard Open Banking in the United States and Australia only. -## Compatibility - -The Connect React Native SDK supports following android and iOS version. - -* Android : Android 5.0 (Lollipop) or later & minSdkVersion 21 or later -* The Connect React Native SDK supports iOS 11 or later. - -WARNING: The redirectUrl property, supporting universal links on android, app links on iOS, and deeplinks, is available from Connect React Native SDK version 2.0.0 onward. - -## Installation - -### Dependencies - -The Connect React Native SDK has the following `peerDependencies`: - -- [react-native-inappbrowser-reborn >=3.6](https://www.npmjs.com/package/react-native-inappbrowser-reborn) -- [react-native-webview >=11](https://www.npmjs.com/package/react-native-webview) -- [react >=16.13](https://www.npmjs.com/package/react) -- [react-native >=0.63](https://www.npmjs.com/package/react-native) - - -## Step 1 - Add repository to your project - -If you application doesn't use `react-native-inappbrowser-reborn` and `react-native-webview` as dependencies. Install using following documentation -1. [react-native-inappbrowser-reborn](https://github.com/proyecto26/react-native-inappbrowser) -2. [react-native-webview](https://github.com/react-native-webview/react-native-webview) - -**Note: Recommended versions with which its tested is react-native-inappbrowser-reborn: 3.7.0 and react-native-webview: 13.6.3** - -## Step 2 - Add Connect React native sdk - -Using npm - -```bash -npm install connect-react-native-sdk -``` - -Using yarn - -```bash -yarn add connect-react-native-sdk -``` - -**Note: Connect React native sdk only react native versions above 0.64, Linking the package manually is not required anymore with [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).** - -**iOS Platform:** - CocoaPods on iOS needs this extra step - `$ cd ios && pod install && cd ..` - -## Step 3 - Update Android application settings - -The Connect React Native SDK requires internet access to connect with our servers. As such, you need to add internet permissions to the AndroidManifest.xml file. - -``` - -``` - - -### Usage - -## Supported Props - - -| Props | Description | -| ------ | ------ | -| `connectUrl` (required) | The SDK loads the Connect URL. | -| `eventHandlers` (required) | An Object implementing the ConnectEventHandlers methods. | -| `redirectUrl` (optional) | App link URL/ Deep link URL to redirect back to your mobile app after completing FI’s OAuth flow. This parameter is only required for App to App. | - -See [Generate 2.0 Connect URL APIs](https://developer.mastercard.com/open-banking-us/documentation/connect/generate-2-connect-url-apis/) for `connectUrl` generation - -```tsx -import { - Connect, - ConnectEventHandlers, -} from 'connect-react-native-sdk'; - -const MyConnectComponent = () => { - const eventHandlers: ConnectEventHandlers = { - onDone: (event: ConnectDoneEvent) => {}, - onCancel: (event: ConnectCancelEvent) => {}, - onError: (event: ConnectErrorEvent) => {}, - onRoute: (event: ConnectRouteEvent) => {}, - onUser: (event: any) => {}, - onLoad: () => {}, - }; - return ( - - ); -}; -``` - -## EventHandler Interface - -Throughout Connect’s flow, events about the state of the web application are sent as Json objects to the `eventHandlers` prop. +The functionality available with Connect varies slightly between regions. For details of how to integrate Connect using the Connect SDKs see the following: -> **_NOTE:_** The onUser event handler will not return anything unless you’re specifically targeting Connect. +* United States + - [The Connect Application](https://developer.mastercard.com/open-banking-us/documentation/connect/) + - [Integrating with Connect](https://developer.mastercard.com/open-banking-us/documentation/connect/integrating/) + - [Using the Connect React Native SDK (US)](https://developer.mastercard.com/open-banking-us/documentation/connect/integrating/react-native-sdk/) +* Australia + - [The Connect Application](https://developer.mastercard.com/open-banking-au/documentation/connect/) + - [Integrating with Connect](https://developer.mastercard.com/open-banking-au/documentation/connect/integrating-with-connect/) + - [Using the Connect React Native SDK (Australia)](https://developer.mastercard.com/open-banking-au/documentation/connect/integrating-with-connect/react-sdk/) -```ts -export interface ConnectEventHandlers { - onDone: (event: ConnectDoneEvent) => void; - onCancel: (event: ConnectCancelEvent) => void; - onError: (event: ConnectErrorEvent) => void; - onRoute?: (event: ConnectRouteEvent) => void; - onUser?: (event: any) => void; - onLoad?: () => void; -} -``` +Note that this Connect SDK is not suitable for Mastercard Open Banking Europe. -Callback Events -See [here](https://developer.mastercard.com/open-banking-us/documentation/connect/mobile-sdks/#callback-events) for details on the events via their callback interface. - -Note: The onDone, onError, onRoute, and onUser callback functions will have a JSONObject parameter that contains data about the event. Visit [Connect Events](https://developer.mastercard.com/open-banking-us/documentation/connect/connect-2-events/) for information - - - -## App To App Setup - -To provide the best app to app authentication experience for your customers, you should send a universal link URL in the redirect URL parameter when using Connect. See [App To App Authentication](https://developer.mastercard.com/open-banking-us/documentation/connect/mobile-sdks/#app-to-app-authentication) for more details. - -Before installing the Connect React Native SDK for use with app to app authentication, complete the following - -- Create your domain's redirectUrl (Universal link) (For Android and iOS) -- Configuring your redirectUrl - -### iOS - -### Create your domain's redirectUrl - -For information on how to create a [Universal Links](https://developer.apple.com/ios/universal-links/) to be used as redirectUrl in your application, see [Apple's Allowing apps and websites to link to your content](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) for details. - - ---- -**NOTE** -In order to provide the best app to app authentication customer experience, Partners should use a universal link as a redirectUrl. - -It is not recommended to create deep links (custom URL schemes) as redirectUrl since they lack the security of Universal Links through the two-way association between your app and your website. A deep link will also trigger an alert on iOS devices that can add friction to the customer experience, requesting permission to redirect back to the Partner's app. - -Any application can register custom URL schemes and there is no further validation from iOS. If multiple applications have registered the same custom URL scheme, a different application may be launched each time the URL is opened. To complete OAuth flows, it is important that your application is opened and not any arbitrary application that has registered the same URL scheme. - ---- - - -### Android -### Create your domain's redirectUrl -For information on how to create a [App Links](https://developer.android.com/training/app-links#android-app-links) as redirectUrl in your application, see [adding Android App Links](https://developer.android.com/studio/write/app-link-indexing) for details. - ---- -NOTE: - -In order to provide the best app to app authentication customer experience, Partners should use a app link as a redirectUrl. - -It is not recommended to create deep links (custom URL schemes) as redirectUrl since they lack the security of App Links through the two-way association between your app and your website. - -Any application can register custom URL schemes and there is no further validation from Android. If multiple applications have registered the same custom URL scheme, a different application may be launched each time the URL is opened. To complete OAuth flows, it is important that your application is opened and not any arbitrary application that has registered the same URL scheme. - ---- - - -### Configuring your redirectUrl - - -In order to return control back to your application after a customer completes a FI's OAuth flow, you must specify a `redirectUrl` value, which will be the URL from which Connect will be re-launched for a customer to complete the Connect experience. - -Here is an example of a universal link redirectUrl within your code:  +## Compatibility -```js - -``` +The Connect React Native SDK supports following Android and iOS versions. +* Android: + - Android 5.0 (Lollipop) or later + - inSdkVersion 21 or later +* iOS: + - iOS 11 or later -For information on how to configure your server see [supporting associated domains](https://developer.apple.com/documentation/xcode/supporting-associated-domains) +The Connect React Native SDK has the following peerDependencies: +* [react-native-inappbrowser-reborn >=3.6](https://www.npmjs.com/package/react-native-inappbrowser-reborn) +* [react-native-webview >=11](https://www.npmjs.com/package/react-native-webview) +* [react >=16.13](https://www.npmjs.com/package/react) +* [react-native >=0.63](https://www.npmjs.com/package/react-native) ## Sample App -[Github](https://github.com/Mastercard/connect-react-native-sdk/tree/master/ConnectReactNativeDemoApp) contains a sample React Native project (version 0.72) that is integrated with the Connect React Native SDK. This sample project is named `ConnectReactNativeDemoApp`. Please ensure that you have the necessary setup for React Native version 0.72 to successfully run and explore this demo application. - - -## Version compatibility - -| Version | Compatibility | -| ------- | ------------- | -| 1.x | React 16+, React Native >=0.63 | -| 2.x | React 16+, React Native >=0.63 | \ No newline at end of file +[Github](https://github.com/Mastercard/connect-react-native-sdk/tree/master/ConnectReactNativeDemoApp) contains a sample React Native project that is integrated with the Connect React Native SDK. This sample project is named ConnectReactNativeDemoApp. Ensure that you have the necessary setup for React Native version 0.72 to successfully run and explore this demo application. \ No newline at end of file diff --git a/package.json b/package.json index 486d88c..05f6e7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "connect-react-native-sdk", - "version": "2.0.1", + "version": "2.0.2", "description": "React Native SDK for Mastercard Open Banking Connect", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/src/index.tsx b/src/index.tsx index 0e60ad0..65cafa3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -157,6 +157,13 @@ export class Connect extends Component { }; render() { + const injectedJavaScript = ` + (function() { + window.maOBConnectReactNative = window.maOBConnectReactNative || true; + window.ReactNativeWebView = window.ReactNativeWebView || true; + })(); + `; + return ( { (this.webViewRef = ref)} source={{ uri: this.state.connectUrl }} + javaScriptEnabled + injectedJavaScriptBeforeContentLoaded={injectedJavaScript} testID="test-webview" onMessage={(event) => this.handleEvent(event)} onLoad={() => this.startPingingConnect()}