cube-platform v1.0.14

How to use platform library in ReactJS

Install cube-platform npm package.

npm install cube-platform

Import cube-platform into ReactJS application.

import { init, auth, client } from 'cube-platform';

Initialize the platform instance.

init('<your-service-id>', '<your-client-id-on-azure-b2c>', '<environment>');
// environment value:
// 'sandbox'
// 'prod'
// if environment value is not specified then default is 'prod'

Register your handler after autheticating successfully as below:

auth.handleLoginRedirect((authenticatedAccount) => {
    // your code here
    // console.log(authenticatedAccount);
    // console.log(platform.auth.getActiveAccount());
});

login handler of click event for login button.

const login = () => {
    auth.signIn().catch((error) => {
        console.error(error);
    });
}

logout handler of click event for logout button.

const logout = () => {
    auth.signOut().then((response) => {
        // your code here
        // setIsSignedIn(false);
        // window.location.reload();
    });
}

Create login button in your html page.

<button id="loginButton" onClick={login}>Login with CCN</button>

Create logout button in your html page.

<button id="logoutButton" onClick={logout}>Logout</button>

Send Request

platform.client.sendRequestAsync("<target-service-id>",
                "<contract-name>",
                "<contract-version>",
                "<contract-method>",
                 new { } /*request payload*/ 
                )
                .then(response => {
                    // process response
                })
                .catch((err) => {
                    // handle error
                });

How to use platform library with Script Tag

Include script tag into your application.

<script src="https://unpkg.com/cube-platform@<will-be-version-here>/dist/platform.min.js"></script> 

Initialize the platform instance.

platform.init('<your-service-id>', '<your-client-id-on-azure-b2c>', '<environment>');
// environment value:
// 'sandbox'
// 'prod'
// if environment value is not specified then default is 'prod'

Register your handler after autheticating successfully as below:

platform.auth.handleLoginRedirect((authenticatedAccount) => {
    // your code here
    // console.log(authenticatedAccount);
    // console.log(platform.auth.getActiveAccount());
});

Create login button in your html page.

<button id="loginButton">Login with CCN</button>

Create logout button in your html page.

<button id="logoutButton">Logout</button>

Call platform signIn inside handler of click event for login button.

loginButton.addEventListener('click', () => {
    platform.auth.signIn().catch((error) => {
        console.error(error);
    })
});

Call platform signOut inside handler of click event for logout button.

logoutButton.addEventListener('click', () => {
    platform.auth.signOut().then((response) => {
        window.location.reload();
    });
});

Send Request

platform.client.sendRequestAsync("<target-service-id>",
                "<contract-name>",
                "<contract-version>",
                "<contract-method>",
                 new { } /*request payload*/ 
                )
                .then(response => {
                    // process response
                })
                .catch((err) => {
                    // handle error
                });

Thank You!