diff --git a/README.md b/README.md index d4580c1..4a3d55b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ [![Code Owners](https://img.shields.io/badge/owner-platform-blueviolet?style=flat&logo=github)](./.github/CODEOWNERS) -This repo contains both examples for shine regulated partners api and shine public api +## Purpose +This repo contains both examples for Regulated partners and the public API This projects aims at demonstrating how to use Shine Connect API, including the mTLS setup. @@ -12,49 +13,40 @@ See the full Shine Connect documentation [here](https://developers.shine.fr/v3.1 ## Install -``` +```shell yarn install ``` -## Configuration +## General configuration Copy `server/config/config.example.json` to a new `server/config/config.json` and fill the following values -| Variable | Description | -| -------------- | ---------------------------------------------------------------------------------------------------- | -| CLIENT_ID | Client ID given at the creation | -| CLIENT_SECRET | Secret given at the creation | -| SCOPE | Scope to be granted, will be presented to the user | -| REDIRECT_URI | Redirect URI once authorization is granted. Make sure it is whitelisted in the client `redirectURIs` | -| WEBHOOK_SECRET | Secret provided by shine to check webhook signature | +| Variable | Description | +|-----------------|------------------------------------------------------------------------------------------------------| +| PSD2_REGULATION | Whether you are subject to PSD2 regulation | +| CLIENT_ID | Client ID given at the creation | +| CLIENT_SECRET | Secret given at the creation | +| SCOPE | Scope to be granted, will be presented to the user | +| REDIRECT_URI | Redirect URI once authorization is granted. Make sure it is whitelisted in the client `redirectURIs` | +| WEBHOOK_SECRET | Secret provided by shine to check webhook signature (optional) | -# Shine connect for regulated partners (DSP2) +# Shine Connect for Regulated partners (DSP2) ### Configuration QSEAL and QWAC for DSP2 Add the necessary certificates for mTLS connection: -- server/certificates/QSEAL_KEY.pem, it should contain your QSEAL key -- server/certificates/QWAC_KEY.pem, it should contain your QWAC key -- server/certificates/QWAC_CERT.pem, it should contain your QWAC certificate -- server/certificates/ROOT_CA.pem, it should contain the certificate chain of the root certificate(s) necessary to use you QWAC certificate +- `server/certificates/QSEAL_KEY.pem`, it should contain your QSEAL key +- `server/certificates/QWAC_KEY.pem`, it should contain your QWAC key +- `server/certificates/QWAC_CERT.pem`, it should contain your QWAC certificate +- `server/certificates/ROOT_CA.pem`, it should contain the certificate chain of the root certificate(s) necessary to use your QWAC certificate -## Run +## Run -``` +```shell yarn dev ``` -# Shine connect public api - -- You need to export PUBLIC_API - -``` -export PUBLIC_API=true -``` - -- then we can run it +### On your local environment -``` -yarn dev -``` +Open your browser and go to [http://localhost:9876/](http://localhost:9876/). diff --git a/package.json b/package.json index 71a6b56..010870a 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "validate-signature": "tsc scripts/*.ts && node scripts/validate-signature.js" }, "dependencies": { - "axios": "^1.6.7", - "express": "^4.18.2", + "axios": "^1.20.0", + "express": "^5.2.1", "http-signature": "^1.4.0", - "next": "^14.1.0", - "qs": "^6.11.2", + "next": "^16.3.3", + "qs": "^6.15.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-pro-sidebar": "^1.1.0", diff --git a/pages/containers/App.tsx b/pages/containers/App.tsx index f44349f..22c3081 100644 --- a/pages/containers/App.tsx +++ b/pages/containers/App.tsx @@ -10,7 +10,7 @@ import { AuthenticatedData } from '../utils'; // parse authorized, uid, access_token and refresh_token from the query string const parseQueryString = (router: NextRouter) => qs.parse(router.asPath.split('?')[1]); -function App() { +function App({ isPublicAPI }: { isPublicAPI: boolean }) { const router = useRouter(); const [authenticatedData, setAuthenticatedData] = useState(undefined); @@ -19,7 +19,11 @@ function App() { setAuthenticatedData(params); }, [router, setAuthenticatedData]); - return authenticatedData?.authorized ? : ; + return authenticatedData?.authorized ? ( + + ) : ( + + ); } export default App; diff --git a/pages/containers/Authenticated.tsx b/pages/containers/Authenticated.tsx index ea9dbd3..9dad4ad 100644 --- a/pages/containers/Authenticated.tsx +++ b/pages/containers/Authenticated.tsx @@ -53,12 +53,18 @@ const StyledSidebarHeader = styled.div` } `; -function Authenticated({ authenticatedData }: { authenticatedData: AuthenticatedData }) { +function Authenticated({ + authenticatedData, + isPublicAPI, +}: { + authenticatedData: AuthenticatedData; + isPublicAPI: boolean; +}) { const [operationOutput, setOperationOutput] = useState(null); const [error, setError] = useState(null); if (!authenticatedData.authorized) { - return ; + return ; } return ( diff --git a/pages/containers/SignIn.tsx b/pages/containers/SignIn.tsx index 29a4f1e..453b162 100644 --- a/pages/containers/SignIn.tsx +++ b/pages/containers/SignIn.tsx @@ -6,6 +6,8 @@ import Head from 'next/head'; import { useState } from 'react'; import Button from '../components/Button'; import ScopeList from '../components/ScopeList'; +import { dsp2Scopes, minimalScopes, publicApiScopes } from '../../server/config/scopes'; +import { isPublicAPI } from '../../server/config'; const Container = styled.div` display: flex; @@ -19,21 +21,11 @@ const H2 = styled.h2` margin-bottom: 20px; `; -function SignIn() { +function SignIn({isPublicAPI}: {isPublicAPI: boolean}) { const router = useRouter(); + const [selectedValues, setSelectedValues] = useState(minimalScopes); - const values = [ - 'openid', - 'profile', - 'user', - 'company:profile:read', - 'email', - 'bank', - 'phone', - 'invoices:read', - 'receipts:read', - ]; - const [selectedValues, setSelectedValues] = useState(['openid', 'profile', 'user:profile:read']); + const scopes = isPublicAPI ? publicApiScopes : dsp2Scopes; const handleSelectedValuesChange = (newSelectedValues: string[]) => { setSelectedValues(newSelectedValues); @@ -48,8 +40,8 @@ function SignIn() { Shine Connect -

Select scope that you want to access:

- +

Select scope that you want to access

+