ehr-auth-react
v0.1.6
Published
**Siin asub ehr autentimise ja autoriseerimise komponendid.**
Downloads
850
Readme
Siin asub ehr autentimise ja autoriseerimise komponendid.
Teenus on npm teek, mida on võimalik importida React'i app'i.
Komponendid, mida on võimalik importida:
- keycloak
- login (keycloak adapter komponent, suunab edasi keycloak login lehele)
- logout (keycloak adapter komponent, suunab edasi keycloak logout lehele, käivitab KEYCLOAK_LOGOUT tegevuse)
- security
- auth (initsialiseerib keycloak adapteri, kui kasutajal on juba sessioon, käivitab kas KEYCLOAK_INIT_SUCCEEDED või KEYCLOAK_INIT_FAILED tegevuse)
- can (autoriseerimise komponent, kasutab permissionReducer hetke, yes või no komponent)
- protectedRoute (kasutab can komponenti route tasemel, vastaval korral, kas renderdab komponendi või suunab mujale)
- middleware
- axiosMiddleware (väärdustab axios'i interceptori)
- refreshMiddleware (uuendab tokeneid, iga teatud aja jooksul)
- reducers
- keycloakReducer (hoiab keycloak seisu (tokeneid jne))
- permissionReducer (hoiab autoriseerimise väärtuseid)
- profileReducer (hoiab keycloaki kasutaja seisu)
Komponentide importimine
yarn install ehr-auth-react, ning siis saab neid import {...} from "ehr-auth-react";.
Täpsem info, mida on on võimalik importida on index.tsx failis kirjas.
Komponentide kasutamine
Lisada silent-check-sso.html public kausta ning väärtustada env muutuja REACT_APP_URL vastaks public kaustale, kui see pole juba default.
<html>
<body>
<script>
parent.postMessage(location.href, location.origin + "/");
</script>
</body>
</html>Et kasutada komponente, tuleb väärdustada Redux Store.
Middlewares:
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { RefreshMiddleware, AxiosMiddleware } from 'ehr-auth-react';
export default applyMiddleware(
RefreshMiddleware,
AxiosMiddleware,
thunk
);Reducers
import { combineReducers } from 'redux';
import { KeycloakReducer, ProfileReducer, PermissionReducer } from 'ehr-auth-react';
export default combineReducers<any>({
keycloak: KeycloakReducer,
profile: ProfileReducer,
permission: PermissionReducer,
});Store
import { createStore } from 'redux';
import reducer from './reducers/reducer';
import middleware from './middleware/middleware';
export const Store = createStore(
reducer,
middleware
);Komponendid
Logout, koos suunamisega (redirect).
<Route path='/logout' component={() => (<Logout redirect={"/home"} />)} exact />Login, koos suunamisega (redirect).
<Route path='/login' component={() => (<Login redirect={"/home"} />)} exact />Kui login või logout komponendil on puudu parameeter redirect, siis on selle väärtuseks on vaikimisi "/".
Store
import { createStore } from 'redux';
import reducer from './reducers/reducer';
import middleware from './middleware/middleware';
export const Store = createStore(
reducer,
middleware
);Autoriseerimise reeglite kirjeldamine.
export const rules = {
menetlus: { //app
minu_menetlused: { //page
edit_menetlus: { //komponent
allowed: ["ARHIIVEHRKOIK"] //roll komponent
},
allowed: [ //roll page
"ARHIIVEHRKOIK",
"ARHIIVEHRHRKOIK"
]
}
}
};Pärast seda on võimalik kasutama hakata neid.
Auth komponendi kasutamine.
import { Store } from "./redux/store";
import { rules } from "./rbac-rules";
import { Auth } from 'ehr-auth-react';
<Provider store={Store}>
<Auth rules={rules}>
{...}
</Auth>
</Provider>
Can komponendi kasutamine, protectedRoute näitel.
<ProtectedRoute path='/myproceedings' redirect={"/403"} component={MyProceedingsComponent} perform={"minu_vaated:minu_menetlused"} {...props} exact />import React from 'react';
import Can from "../can";
import { Redirect, Route } from "react-router";
const ProtectedRoute = (props: any) => {
return (
<Can
perform={props.perform}
yes={() => (
<Route {...props} render={p => {
return <props.component {...p} />
}} />
)}
no={() => (
<Redirect to={{
pathname: "/login",
from: props.path
}} {...props} />
)}
/>
)
};
export default ProtectedRoute;rbac-rules.json fail ülemise näite puhul
export const rules = {
menetlus: {
minu_menetlused: {
edit_menetlus: {
allowed: [
"MINUANDMED"
]
},
allowed: [
"MINUANDMED"
]
}
},
minu_vaated: {
minu_dokumendid: {
allowed: [
"MINUANDMED"
]
},
minu_menetlused: {
allowed: [
"MINUANDMED"
]
}
},
arhiiv: {
main: {
allowed: [
"ARHIIVEHRKOIK",
"ARHIIVEHRHRKOIK"
]
}
}
};Kasutaja profiili saamine
useStore().getState().profileVõi
const { keycloak, rules, profile } = useStore().getState();Vajalikud väärtused keycloak'i kasutamiseks
- window.REACT_APP_URL='http://localhost:3000';
- window.REACT_APP_ENDING='/';
- window.REACT_APP_KEYCLOAK_URL='https://devkluster.ehr.ee/auth';
- window.REACT_APP_KEYCLOAK_REALM='ehr-dev';
- window.REACT_APP_KEYCLOAK_CLIENT_ID='portal';
- window.REACT_APP_REDIRECT=/home //refresh middleware redirect väärtus
ehr-auth-react käivitamine lokaalselt
Soovitan lähtuda ehr-ui näitest