Mobile - React Native
Integrating OwnID with a react native app that uses SAP CDC involves four basic steps:
- Creating a CDC application and modifying the CDC schema
- Use the OwnID Console to create an OwnID application
- Configure your project
- Integrate OwnID with your react native app
#Step 1: Configure CDC
Configuring CDC includes creating a new CDC application with appropriate permissions.
#Create Permissions Group and Application Key/Secret
The CDC application used for the OwnID integration will require 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.
#Step 2: Create OwnID Application
An OwnID application will connect your website's identity platform with the OwnID widget in the front end. First, you must 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.
#Step 3: Configure Your Project
#Add dependency to your project
The OwnID React Native Gigya SDK is available from the npm repository:
The OwnID React Native Gigya SDK supports autolinking and is built with Android API version 33 (minimum API version 23) and Java 8. The OwnID React Native Gigya iOS SDK supports iOS 13 and higher.
#Step 4: Integrate OwnID with Your React Native App
#Create OwnID Gigya instance
Before using OwnID Button on your screens, you have to create the OwnID Gigya instance. If you use the default Gigya account model (
GigyaAccount class /
GigyaAccount struct) then you can do this from React Native. To do so, call the
OwnIdGigya.init function with the OwnID configuration. As a minimum, this configuration object defines the
OwnID App Id - the unique identifier of your OwnID application, which you can obtain from the OwnID Console - and
redirection_uri_ios to set the redirection Uri value for iOS:
OwnIdGigya.init function must be called after the Android/iOS native Gigya instance is initialized. See the details for Android and iOS. It is also recommended to create the OwnID instance as early as possible in the application lifecycle, as the OwnID Button will only be shown after the creation is completed.
If you use a custom Gigya account model you have to create the OwnID Gigya instance in the native code, see Native Initialization.
Add passwordless authentication to your application's Registration screen by including the
OwnIdButton view with the type
OwnIdRegister function once the user finishes the OwnID flow in the OwnID WebApp and tap "Create Account" on the registration form
See a 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 that 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 then passed to the Gigya registration call.
Similar to the Registration screen, add passwordless authentication to your application's Login screen by including the OwnIdButton view with the type
See a complete example here.
#Customizing the UI
The following is a complete list of the 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:
In case you don't want to create an instance of OwnID Gigya SDK from React Native or if you use a custom Gigya account model, you can create the OwnID Gigya SDK instance from native Android and iOS code.
#Create configuration file
The OwnID SDK uses a configuration file in your
assets folder to configure itself. As 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 OwnID Gigya instance
Most commonly, you will create the OwnID CDC instance using the Android Application class. For information on initializing and creating an instance of CDC, refer to the SAP CDC documentation. The
MyAccount is an optional class that extends GigyaAccount. More details are given in the SAP CDC documentation.
The OwnID SDK automatically reads the
ownIdGigyaSdkConfig.json configuration file from your assets folder and creates a default instance that is accessible as
#Add property list file to your project
When the application starts, the OwnID SDK automatically reads
OwnIDConfiguration.plist from the file system to configure the default instance that was created. In this PLIST file, you must define a r
edirection URI and the
OwnID App Id. Create
OwnIDConfiguration.plist and define the following mandatory parameters:
OwnIDAppIDis the unique AppID, which you can obtain from 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)
You will need to open your project and create a new URL type that corresponds to the redirection URL specified in
OwnIDConfiguration.plist. In Xcode, go to
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.myapp.demo://bazco, then you could copy
com.myapp.demo and paste it into the URL Schemes field.
#Initialize the SDK
Import the OwnID module so that you can access the SDK features. Add the following import to your native 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 @main App struct).
Main entry point of your app: