Asset Amway ID Native to WebSSO Login 1.0.1

Downloadable Asset:

com.alticor.nativewebsso.zip

Developer Guide Documentation:

native_to_websso_marketplace_component_template.docx

Asset Version:

1.0.1

Asset Description:

Amway ID supports cases where you need to transfer from the native experience over to a website (like Hybris). The solution allows a very loose coupling between the native app and the destination site that is being opened, allowing both applications to operate independently without one having to build any special logic to support the SSO use case.

Details:

Component documentation fix
 1 Overview

Amway ID supports cases where you need to transfer from the native experience over to a website (like Hybris).  The solution allows a very loose coupling between the native app and the destination site that is being opened, allowing both applications to operate independently without one having to build any special logic to support the SSO use case.

The approach from Amway ID is to follow the use of in-app browser tabs (aka "custom browser tabs") to present the Amway ID application to the user. This offers a number of benefits over other alternate approaches such as WebViews and native login forms. The advantages are:

<ul>
<li>Single Sign-On across native apps using the in-app browser tabs</li>
<li>Improved security where individual applications are not collecting user credentials</li>
<li>Reduced risk surface area to protect</li>
<li>Consistent login experience for end-users</li>
</ul>

2 Getting Started with the AmwayID NativeWebSSO Login component

This is a Getting Started section for the AmwayID NativeToWebSSO Login. It contains information about importing and running the component.

For information about the Dynamic Usage, Properties, Events, and APIs of the component, you can visit the Reference Section.

Before you start using the NativeToWebSSO component, make sure that you meet all the requirements in the Prerequisites.

3 Prerequisites

<ul>
<li>A <a href="https://manage.kony.com/">Kony account</a></li>
<li>Kony Visualizer V8 SP4, or higher</li>
<li>Create a Client App at AmwayID</li>
<li>Update <a href="cid:sso">cid:sso</a> scope</li>
</ul>

Before you can begin, there are a few pieces of setup required to implement this solution:

<ol>
<li>A member of the Amway ID team must allow the cid:sso scope for your application's client ID.  By default, this scope is not enabled for your application; you must specifically request that it be added.</li>
<li>A member of the Amway ID team must whitelist the domain where your native app is going to SSO into.</li>
<li>Endpoint URL - You will need to work with a technical member of the target website team to determine the correct Endpoint SSO URL, and that it has been set up to accept this call.</li>
</ol>

After these two steps are completed, the native app is able to use native-to-web SSO.  To do so, when the native app is ready to open another website, the native app must open a browser and within the browser post a valid access token to the /v1/sso endpoint of Amway ID.

3.1 Source Code

The component source can be found at <a href="https://github.com/AmwayACS/AmwayIDNativeLogin">https://github.com/Amway...

4 Importing the Component

Before you start importing the component to Kony Visualizer, you must download the component from the Amway Marketplace website. You can import the marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the AmwayID NativeWebSSO component, do the following:

<ol>
<li>Open your app project in Kony Visualizer.</li>
<li>On the File menu, point to Import, and click Component to Library. The Open dialog appears.</li>
<li>Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. After Visualizer downloads the component, it opens a window that asks you to enter the metadata for the component.</li>
</ol>

Enter a Library Name, a Collection Name, and a Description if you require one.

<ul>
<li>Library Name - A Library contains component collections and skins. The Library Name specifies the library that you want to import the component into. If the library does not exist, Visualizer will create a new one. 
As an example, let us name the Library as AmwayID.</li>
<li>Collection Name - A collection contains multiple components. The Collection Name specifies the collection that you want to import the component into. If the collection does not exist in the specified library, Visualizer will create a new one. 
As an example, let us name the Collection as Login.</li>
<li>Component Name - This name specifies the display name you want to use for the component in Visualizer. 
By default, the component name is com.alticor.NativeWebSSO .</li>
<li>After you import the component, you can drag and drop it from the Collection Library onto your form.</li>
<li>Save the form now.</li>
</ul>

After you add the component to a form, you need to configure the native settings of your project. You can refer to the following sections for more information.

4.1 Configuring Component Properties

You can use a component's Properties to customize and configure the elements. These elements can be UI elements, service parameters, and so on. For more information about properties, you can refer to the <a href="https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Defau... target="_blank">Components Overview</a> section of the Visualizer User Guide.

You can set the properties from the Properties panel on the right side of Visualizer. You can also configure these properties using JavaScript code.

4.2 Setting Properties

Auth Token

Description: The active access token that contains the cid:sso scope.

Syntax: authToken

Type: String

Read/Write: Write

Example: this.view.nativeWebSSO.accessToken = response.access_token;

Redirect URI

Description: The destination URI where the native app is going to single sign on into.

Syntax: redirectUri

Type: String

Read/Write: Write

Example: this.view.nativeWebSSO.redirectUri = "https://qa.amway.com/session/redirect?url=https://qa.amway.com";

Client App

Description: The clientapp identifier of the destination application. Do not use the native app's         clientapp here; instead, use the clientapp used by the application you are going to.

Syntax: clientApp

Type: String

Read/Write: Write

Example: this.view.nativeWebSSO.clientApp = "HybrisWebsiteUS";

End point URL

Description: Note that you will need to work with the target website to determine the correct SSO URL, and that it has been set up to accept this call.

Syntax: endPointURL

Type: String

Read/Write: Write

Example: this.view.nativeWebSSO.endPointURL = "https://account-amerreg-qa.amwayglobal.com/v1/sso";

Sample code snippet to set properties through programmatically.

invokeNativeWebSSO : function(){

this.view.nativeWebSSO.accessToken = response.access_token;

this.view.nativeWebSSO.redirectUri = "https://qa.amway.com/session/redirect?url=https://qa.amway.com";

this.view.nativeWebSSO.endPointURL = "https://account-amerreg-qa.amwayglobal.com/v1/sso";

this.view.nativeWebSSO.clientApp = "HybrisWebsiteUS";

this.view.nativeWebSSO.isVisible = true;

},

4.3 <a href="javascript:void(0);">Building and Running your app</a>

After performing all the above steps, you can perform either of the following tasks:

Build and Publish your app (Visualizer Enterprise)

For more information, you can refer to the <a href="http://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Defaul... target="_blank">Building and Viewing an Application</a> section of the Visualizer User Guide.

5 APIs

5.1 setHTMLContent

Description: Invokes SSO code snippet from native to web SSO.

Syntax: setHTMLContent()

Parameters: None.

Return Value: None.

Example: this.view.nativeWebSSO.setHTMLContent();

6 External Links

Please find the confluence link <a href="https://jira.amway.com:8444/display/GIW/Native+to+Web+SSO+Component">her...

Supported App Types:

Native

Supported Devices: