Package detail

ehr-auth-react

mkmjs4921.0.0

Siin asub ehr autentimise ja autoriseerimise komponendid.

react, typescript, npm

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:

  • 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 />

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';
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