1.0.3 • Published 1 year ago
cubeforallx v1.0.3
How to use platform library in ReactJS
Install cubeforall npm package.
npm install cubeforall
Import cubeforall into ReactJS application.
import { init, auth, client } from 'cubeforall';
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/cubeforall@<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!
1.0.3
1 year ago