A React Native plugin for interfacing SAP Customer Data Cloud
npm install @sap_oss/gigya-react-native-plugin-for-sap-customer-data-cloudAdd the following to your MainApplication.java file:
``java
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, / native exopackage / false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
// Set and initialize the account schema for the Gigya core SDK.
GigyaSdkModule.setSchema(this, GigyaAccount.class);
}
`
Navigate to AppDelegate.m and add the following under the:
(BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions method.
`objc`
GigyaExtension * gigya = [[GigyaExtension alloc] init];
[gigya setMySchema];
To apply your custom schema, you will need to create a 'swift bridge' file and register it as follows:
`swift `
@objc public class GigyaExtension: NSObject {
@objc func setMySchema() {
GigyaSdk.setSchema(HostModel.self)
}
}
And then call the function from your AppDelegate.m file.
In your application code, you can initialize the Gigya SDK using the following call:
`javascript`
Gigya.initFor("Your API KEY", "API DOMAIN");
If you do not specify the "API DOMAIN" (as implemented in the sample application) the SDK will use the default us1.gigya.com domain.
To run the example application included in the repository:
1. Checkout the repository code.
2. Navigate to the example folder and run the yarn install command.
3. Navigate to the example/ios folder and run the pod install command.
** Android - If changing the API key, make sure to update the signingConfigs section as the example app includes a specific keystore path
used for testing purposes *
`
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
`
Sending a request is available using the plugin's send method.
`javascript`
try {
const send = await Gigya.send("socialize.getSDKConfig");
console.log("send: " + JSON.stringify(senddd));
} catch (error) {
console.log("errorSend:" + error);
}
The plugin provides an interface to these core SDK business APIs:
login, register, getAccount, setAccount, isLoggedIn ,logOut, addConnection, removeConnection
Implement them using the same request structure as shown above.
The example application includes various different implementations.
Use the "socialLogin" interface to perform social login using supported providers.
The React Native plugin supports the same *providers supported by the Core Gigya SDK.
Supported social login providers:
google, facebook, line, wechat, apple, amazon, linkedin, yahoo.
For example:
`javascript`
const send = await Gigya.socialLogin("facebook");
Specific social providers (Facebook, Google) require additional setup. This is due to their requirement for specific (embedded native) SDKs.
To register social providers you will need to create a 'swift bridge' file (same as with using a custom schema).
Don't forget to add the relevant wrappers to the ios folder.
Follow the core SDK documentation and instructions for setting up Facebook login.
Android documentation
iOS documentation
Follow the core SDK documentation and instructions for setting up Google login.
Android documentation
iOS documentation
To provide support for LINE as a provider, please follow it's core SDK documentation.
Android documentation
iOS documentation
To provider support for WeChat as a provider, please follow the core SDK documentation.
Android documentation
iOS documentation
The plugin supports the use of Web screen-sets using the following:
`javascriptevent: ${event}
Gigya.showScreenSet("Default-RegistrationLogin", (event, data) => {
console.log();`
if (event == "onLogin") {
updateIsLoggedIn(Gigya.isLoggedIn())
}
})
Optional {params} map is available.
As in the core SDKs, the plugin provides a streaming channel that will stream the
Screen-Sets events (event, map).
event - actual event name.
data - event data map.
The plugin supports the native SDK's "Single Sign On feature".
Andorid
iOS
Please make sure to implement the nessesary steps described for each platform.
To initiate the flow run the following snippet.
`javascript`
const send = await Gigya.sso();
});
Applications (mobile/web) within the same site group are now able to share a session from the mobile application to a web page running the JS SDK.
Follow these steps to allow session exchange:
1. Use the “getAuthCode” interface. This call will provide you with the required code that the web page will require for the exchange.
`javascript`
var code = await Gigya.getAuthCode()
2. Add these URL parameters to your hosted page/website URL using the provided code:
https://page-url?authCode=code&gig_actions=sso.login
3. Make sure that the WebView element you are using to open the URL has JavaScript enabled.
4. Once the page is loaded, the JS SDK will exchange the token provided for a valid session.
Note:
When using mobile SSO (single sign-on using the central login page), logging out using the SDK's logout method will only log the user out of the current API key used.
The user will not be logged out of the other group sites.
Much like our core SDKs, resolving interruptions is available using the plugin.
Current supporting interruptions:
* pendingRegistration
* conflictingAccounts
Example for resolving conflictingAccounts interruptions:
`javascript
try {
const send = await Gigya.register(login, password, { 'sessionExpiration': 0 });
console.log("send: " + JSON.stringify(senddd));
updateIsLoggedIn(Gigya.isLoggedIn())
} catch (error) {
console.log("register error:" + error);
const e = error as GigyaError;
switch (e.getInterruption()) {
case GigyaInterruption.conflictingAccounts: {
const resolver = Gigya.resolverFactory.getResolver(e) as LinkAccountResolver;
console.log("link:")
console.log(resolver.regToken)
break
}
}
}
`
Once you reference your resolver, create your relevant UI to refelct if a site or social linking is
required (see example app for details) and use the relevant method.
Example of resolving link to the site when trying to link a new social account to a site account.
`javascript`
const loginToSite = await resolver.linkToSite(userData.login, userData.password)
The plugin provides Android/iOS biometric support for these flows.
`
An end user logs in.
An end user decides to use biometric authentication.
This requires the end user to verify their fingerprint.
The app is locked or deleted from memory.
The end user needs to unlock the app to restore his session.
In this case, the end user needs to verify his fingerprint.
The end user decides not to use biometric authentication
The biometric fingerprint feature is a security cipher that is placed on top of an existing session of your app, so invoking biometric operations requires a valid session.
Please make sure you are using native implementations:
**FaceID
To use FaceID in a compatible device, you must include the following key in your Info.plist file.
NSFaceIDUsageDescription = (String) "Your own message ".
If you also want to set a custom text in the Touch ID prompt, you can include the following key:
GigyaTouchIDMessage = (String) "Your custom message" (Default = "Please authenticate to continue").
1. Android SDK 23 and above is required.
2. the device has a fingerprint sensor.
3. at least 1 fingerprint is already registered on the device.
4. appropriate permissions are already requested in the library manifest: android.permission.USE _FINGERPRINT android.permission. USE _BIOMETRIC
Declaring the prompt display.
Andorid's biometric authentication uses a prompt display. You can customize the text displayed by declaring your own BiometricPromptInfo object.
In your application class (after launching the SDK), you can add the following:
`java`
GigyaSdkBiometricModule.setBiometricPromptInfo(new GigyaPromptInfo( "title", "subtitle", "description" ));
If no prompt info is specified, the prompt window uses default English texts.
FIDO is a passwordless authentication method that allows password-only logins to be replaced with secure and fast login experiences across websites and apps.
Our SDK provides an interface to register a passkey or login, revoke passkeys created using FIDO/Passkeys and is backed by our WebAuthn service.
Follow the platform implementation guides:
Swift
Android
* Android solution has been updated to use both FIDO & passkeys
Additional setup for Android:
To correctly integrate Android with the FIDO library, do the following:
1. Add the following code snippet to your MainActivity class:
`
private ActivityResultLauncher
new ActivityResultContracts.StartIntentSenderForResult(),
new ActivityResultCallback
@Override
public void onActivityResult(ActivityResult result) {
Gigya.getInstance().WebAuthn().handleFidoResult(result);
}
}
);
2. Reference the "resultLauncher" class within the "onCreate" method of the activity.
`
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GigyaWebAuthnModule.resultLauncher = resultLauncher;
}
The "resultLauncher" object is required for intercommunicating with the FIDO library.
Usage example
`
try {
var operation = await Gigya.webAuthn.login()
console.log("webAuthnLogin success " + operation)
// Update login state.
} catch (e) {
console.log("webAuthnLogin error " + e)
}
Login with a passkey on both Android & iOS:
try {
var operation = await Gigya.webAuthn.passkeyLogin()
console.log("webAuthnLogin success " + operation)
// Update login state.
} catch (e) {
console.log("webAuthnLogin error " + e)
}
try {
var operation = await Gigya.webAuthn.register()
console.log("webAuthnRegister success " + operation)
} catch (e) {
console.log("webAuthnRegister error " + e)
}
Register a new Passkey on both Android & iOS:
try {
var operation = await Gigya.webAuthn.passkeyRegister()
console.log("webAuthnRegister success " + operation)
} catch (e) {
console.log("webAuthnRegister error " + e)
}
$3
Revoke an existing FIDO key on Android and all passkeys on iOS:
Using this method will revoke only keys that were created using the native register method. It will
not revoke keys created using the web interface (screen-sets)
try {
var operation = await Gigya.webAuthn.revoke()
console.log("webAuthnRevoke success " + operation)
// Update login state.
} catch (e) {
console.log("webAuthnRevoke error " + e)
}
Revoke a specific passkey on both Android & iOS.
Specific key is fetched using the "getCredentials" method only. This is relevant for both native/web keys.
try {
var operation = await Gigya.webAuthn.passkeyRevoke("ID_TO_REVOKE")
console.log("webAuthnRevoke success " + operation)
// Update login state.
} catch (e) {
console.log("webAuthnRevoke error " + e)
}
Note: *The key to revoke can be obtained from the new passkeyGetCredentials method available.
try {
var operation = await Gigya.webAuthn.passkeyGetCredentials()
console.log("webAuthnGetCredentials success:\n" + JSON.stringify(operation))
} catch (error) {
console.log("webAuthnGetCredentials:\n" + JSON.stringify(e))
}