Skip to content

Commit

Permalink
Merge branch 'release/2.0.2' into 'master'
Browse files Browse the repository at this point in the history 
CONM-301: spatkar: ECS: To Analyze and Fix ECS Lite flow issue

See merge request connect/react-native-sdk!30
  • Loading branch information
Sanjili Patkar committed Jul 3, 2024
2 parents 9360d6d + f4470f5 commit cc8557e
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 184 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
207 changes: 24 additions & 183 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

```
<uses-permission android:name="android.permission.INTERNET">
```


### 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 (
<Connect
connectUrl={'#GENERATED_CONNECT_URL#'}
eventHandlers={eventHandlers}
redirectUrl={'#UNIVERSAL_LINK_FOR_APP_TO_APP_AUTHENTICATION#}
/>
);
};
```

## 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
<Connect
connectUrl={'#GENERATED_CONNECT_URL#'}
eventHandlers={eventHandlers}
redirectUrl={'https://yourdomain.com/mastercardConnect'}
/>
```
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 |
[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.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
9 changes: 9 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,13 @@ export class Connect extends Component<ConnectProps> {
};

render() {
const injectedJavaScript = `
(function() {
window.maOBConnectReactNative = window.maOBConnectReactNative || true;
window.ReactNativeWebView = window.ReactNativeWebView || true;
})();
`;

return (
<Modal
animationType={'slide'}
Expand All @@ -168,6 +175,8 @@ export class Connect extends Component<ConnectProps> {
<WebView
ref={(ref: any) => (this.webViewRef = ref)}
source={{ uri: this.state.connectUrl }}
javaScriptEnabled
injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
testID="test-webview"
onMessage={(event) => this.handleEvent(event)}
onLoad={() => this.startPingingConnect()}
Expand Down

0 comments on commit cc8557e

Please sign in to comment.