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:

axiosContext
- AxiosProvider - On vajalik kasutada AxiosProviderit ja talle sisendiks anda index.ts failis axios import. Välitmaks mitmete axios instance-ite teket.
- useAxiosContext - Saab kasutada componentides, et kätte saada global axiosContext. Kui on kasutusel Auth, siis on sel ka juures interceptorid mis tegelevad iga päringule tokeni juurde panemisega
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 />

<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';
import axios from "axios";

<Provider store={Store}>
  <AxiosProvider axiosInstance={axios}>
    <Auth rules={rules}>
      {...}
    </Auth>
  </AxiosProvider>
</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().profile

Võ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

Package detail

ehr-auth-react

readme