1.0.11 • Published 2 years ago
og-one-in-sdk v1.0.11
OG ONE IN SDK
Based on the OG One In token, render HTML based on permissions of the user. The result will be sorted and filtered according to role groups and user groups (i.e. filtered HTML).
Usage
The OG ONE IN SDK is simply a package that accepts HTML data as an input. In return, you will receive...
- filtered data based on user and permissions
Install
npm i og-one-in-sdk
Examples:
Initialize (INIT):
import { RoleBasedHtml } from "og-one-in-sdk";
const roleBasedHtml = new RoleBasedHtml();
steps
step 1: Assign a data-id to an html element tag
To filter based on user groups or role groups, add data-id=RESOURCE_NAME to any div or HTML element
EXAMPLE
<div class="container" data-id="resource1">
<h1>this is section 1</h1>
</div>
<div class="container" data-id="resource2">
<h1>this is section 2</h1>
</div>
step 2: use filter to render role base frontend view
Pass the compiled HTML and Og-One-In Token to the filter method
const filterHtml = await roleBasedHtml.filter(page, token);
Note:
- To render the filter view, use the filter response and assign it to the wrapper
- To render the view, convert the response HTML string to HTML
Demo snippet (REACT)
import { RoleBasedHtml } from "og-one-in-sdk";
import React, { useState, useEffect } from "react";
import ReactHtmlParser from "react-html-parser";
const roleBasedHtml = new RoleBasedHtml();
function App() {
const [html, setHtml] = useState();
const token =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MDQwN2QyNGJjN2QyNDAwMDFjMTZjZDYiLCJiaWQiOiI1Iiwic3ZjIjoiMSIsInRybSI6IjEiLCJyb2xlcyI6WyJzZXJ2aWNlQWRtaW4iLCJBbGwgQWRtaW4gUm9sZSJdLCJyb2xlQ29sbGVjdGlvbnMiOltdLCJyb2xlc1Jlc291cmNlc1Blcm1pc3Npb25zIjpbeyJSb2xlTmFtZSI6InNlcnZpY2VBZG1pbiIsIlJlc291cmNlUGVybWlzc2lvbnMiOltdfSx7IlJvbGVOYW1lIjoiQWxsIEFkbWluIFJvbGUiLCJSZXNvdXJjZVBlcm1pc3Npb25zIjpbeyJSZXNvdXJjZU5hbWUiOiJBbGwgQWRtaW4gUmVzb3VyY2VzIiwiQ2FuUmVhZCI6dHJ1ZSwiQ2FuQ3JlYXRlIjpmYWxzZSwiQ2FuVXBkYXRlIjpmYWxzZSwiQ2FuRGVsZXRlIjpmYWxzZX1dfV0sImlzcyI6Imh0dHBzOi8vc2VydmljZXMub2dzdGFjay5jb20vb25laW4vYXV0aCIsImp0aSI6IjgxNDI1YTBjLTU1YjUtNGI4NS1iMDllLTBjMDVhYmJmMThkMiIsImV4cCI6MTY0MTQ3MTYyNCwiaWF0IjoxNjQxNDY0NDI0fQ.1O-kEuPbLB_qYG-UkBj2V84rhtfO9pSf6ehU6ETFKfs";
const stringhtml = `
<div class="role1" data-id="resource1">
<h1>this is section 1 for role 1</h1>
</div>
<div class="role2" data-id="all-admin-resources">
<h1>this is section 2 for role 2</h1>
</div>
<div class="role3" data-id="resource2">
<h1>this is section 3 for role 3</h1>
</div>`;
const fnfilterHtml = async () => {
const filterHtml = await roleBasedHtml.filter(stringhtml, token);
return filterHtml;
};
useEffect(() => {
fnfilterHtml().then((data) => {
setHtml(data);
});
}, []);
return <div className="App">{ReactHtmlParser(html)}</div>;
}
export default App;