Integrating OwnID with a react native app that uses SAP CDC involves four basic steps:
- Create a CDC application and modify the CDC schema
- Use the OwnID Console to create an OwnID application
- Configure your project
- Integrate OwnID with your react native app
Configuring CDC includes creating a new CDC application with appropriate permissions and adding custom fields to the CDC schema.
The CDC application used for the OwnID integration requires a Permissions Group that authorizes OwnID to perform certain actions. OwnID strongly recommends that you create a new CDC application that is dedicated to the OwnID integration.
SAP Customer Data Cloud includes a schema that stores all of your users' data. To integrate OwnID, you need to add custom fields to this CDC schema. You could create these fields one-by-one, but this is tedious and prone to error. To simplify the effort, CDC accepts an API call that automatically adds the fields to the schema, allowing you to use a REST client like Postman to accomplish the task. To add the custom fields to the schema:
- Open Postman and switch to the workspace where you want to import a collection. If you are new to Postman, you can start with the Postman documentation.
- Select the following button to import the collection that contains the required API call:
- In Postman, use the drop-down to select the OwnID-CDC Integration environment, and then select the Quick Look icon to open the variables of the environment. If you prefer, you can use the current environment and manually create each variable in the next step.
- Define the variables used by the API request (
secret). If you are using a CDC site group,
apiKeymust be the API Key of the parent site, not the child site. Note that
userKeyrefers to the CDC application key. For more information about defining variables in Postman, see Using Variables.
- Send the API request.
You can now check the CDC schema to verify that the request successfully added the custom fields. Open your site in the CDC Console and select Schema in the left-hand navigation pane. You should see the schema fields under accounts > data > ownid.
An OwnID application connects your website's identity platform with the OwnID widget in the front end. First, you integrate with CDC when creating the application. This OwnID application is then assigned a unique
appId that is added to the website's front end. To create an OwnID application:
- Open the OwnID Console and create an account or log in to an existing account.
- Click on Create Application.
- Define the details of the OwnID application, and select Next.
- Select the Customer Data Cloud card.
- Collect the identifying information of the CDC application (site data center, site API key, application key, and application secret) and then define them in the OwnID application. When working with a site group, the API Key identifies the key of the child site.
The OwnID React Native Gigya SDK is available from the npm repository:
Enable Java 8 Compatibility in Your Project
The OwnID SDK requires Java 8 bytecode. To enable this feature, add the following to your module's
Add React Native Dependencies
In your applicaltion
build.gradle add a dependency to
Set the correct path to
ownid-react-native-gigya projects in your
Create Configuration File
The OwnID SDK uses a configuration file in your
assets folder to configure itself. At a minimum, this JSON configuration file defines the OwnID App Id - the unique identifier of your OwnID application, which you can obtain from the OwnID Console. Create
assets/ownIdGigyaSdkConfig.json and define the
Create Default OwnID CDC Instance
Before adding OwnID UI to your app screens, you need to use an Android Context and instance of CDC to create a default instance of OwnID CDC. Most commonly, you create this OwnID CDC instance using the Android Application class. For information on initializing and creating an instance of CDC, refer to the SAP CDC documentation. MyAccount class is optional and extends GigyaAccount class.
You can check a complete example here.
The OwnID SDK automatically reads the
ownIdGigyaSdkConfig.json configuration file from your
assets folder and creates a default instance that is accessible as
Finally, locate ReactNativeHost’s getPackages() method and add the
com.ownid.sdk.OwnIdPackage package to the packages list getPackages().
See complete example here.
Add Package Dependency
The OwnID iOS SDK is distributed as an SPM package. Use the Swift Package Manager to add the following package dependency to your project:
When prompted, select the OwnIDGigyaSDK product.
Add Property List File to Project
When the application starts, the OwnID SDK automatically reads
OwnIDConfiguration.plist from the file system to configure the default instance that is created. In this PLIST file, you must define a redirection URI and the OwnID App Id. Create
OwnIDConfiguration.plist and define the following mandatory parameters:
OwnIDAppIDis the unique AppID, which you can obtain from the OwnID Console.
OwnIDRedirectionURLis the full redirection URL, including its custom scheme. This URL custom scheme must match the one that you defined in your target.
Create URL Type (Custom URL Scheme)
Open your project and create a new URL type that corresponds to the redirection URL specified in
OwnIDConfiguration.plist. In Xcode, go to Target > Info > URL Types, and then use the URL Schemes field to specify the redirection URL. For example, if the value of the
OwnIDRedirectionURL key is
com.ownid.demo.react://bazco, then you should copy
com.ownid.demo.react and paste it into the URL Schemes field.
Add Source Files
Add the following source files directly to your project:
OwnIDReactCoreSDK : add OwnIDReactCoreSDK folder from project_root/node_modules/@ownid/react-native-core/ios.
OwnIDReactGigyaSDK: add OwnIDReactGigyaSDK folder from project_root>/node_modules/@ownid/react-native-gigya/iOS.
When performing the actions described above, on the dialog, we recommend you to do the following:
- Uncheck "Copy items if needed" checkbox
- Make sure "Create groups" is selected.
- Add files to your target in order to make it work properly
Initialize the SDK
Now that you have added the OwnID package dependency, you need to import the OwnID module so you can access the SDK features. Add the following import to your source files:
The OwnID React SDK must be initialized properly using the
configure() function, preferably in the main entry point of your app (in the
Also, when react creates the OwnID button, the viewCreationClosure needs to receive the custom account schema you use to communicate with Gigya (example: MyAccount.self).
Place the function
createViewClosure() in the same main entry point of your app:
Import OwnIdButton and OwnIdRegister functions and add them to your Registration screen:
Add the passwordless authentication to your application's Registration screen by including the OwnIdButton view with type
OwnIdRegister function once the user finishes OwnID flow and submits the registration form.
See complete example here.
OwnIdRegister() function must be called in response to the
ReadyToRegister event. This function calls the standard Gigya SDK function
register(String email, String password, Map<String, Object> params, GigyaLoginCallback<T> callback) to register the user in Gigya, so you do not need to call this Gigya function yourself. You can define custom parameters for the registration request and pass it to
OwnIdRegister(). These parameters are passed to the Gigya registration call.
The process of implementing your Login screen is very similar to the one used to implement the Registration screen - add an OwnIdButton view to your Login screen. Your app then waits for events while the user interacts with OwnID.
Import OwnIdButton function:
Similar to the Registration screen, add the passwordless authentication to your application's Login screen by including the OwnIdButton view with type
See complete example here.
The following is a complete list of UI customization parameters:
backgroundColor- background color of the button (default value
#FFFFFF, default value-night:
borderColor- border color of the button (default value
#D0D0D0, default value-night:
biometryIconColor- icon or text color (default value
#0070F2, default value-night:
Here's an example on how you can change these parameters: