Skip to content

Clarify Scope and Instructions #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lynnfaraday wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Clarify Scope and Instructions #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,30 @@ You will normally start by developing and testing your custom view in a local en

1. Clone/fork the code in this repository to your local machine.
2. Run `npm install`.
3. Get a participant access token - see below.
4. Create a file named `.env.development` with a single line:
```
VITE_PARTICIPANT_ACCESS_TOKEN=your_access_token
```
5. Run `npm run dev`.
3. Get a participant access token - see below for details.
4. Copy the file `dotenv` to create a file named `.env.development`.
5. Edit the environment file to specify your participant access token.
6. Run `npm run dev`.

You should see the default project home page appear and populate itself with data from your participant. ```src/main.tsx``` contains other routes. Navigate to them in your browser to see other pre-build views in action.

You can use or edit one of the existing views, or build your own using [MyDataHelpsUI](https://github.com/CareEvolution/MyDataHelpsUI) and/or the [MyDataHelps SDK](https://developer.mydatahelps.org/sdk/)!

### Participant Access Tokens

When running in development mode, you must manually configure an access token so the custom view can get and show participant data. This simulates a participant accessing the view through MyDataHelps.
Normally, participant authentication is managed by MyDataHelps. When running in development mode, you must manually configure an access token so the custom view can get and show participant data. This simulates a participant accessing the view through MyDataHelps.

First, identify which participant you want to test with. Ideally this will be a fake participant from your test/dry-run project.
First, **identify the participant** you want to test with. Ideally this will be a fake participant from your test/dry-run project.

There are several ways to obtain an access token for the identified participant. Choose any of the following methods:
Second, **choose which scopes** you will need, depending on which features your test participant will need to access. See [Participant Tokens - Scopes](https://developer.mydatahelps.org/embeddables/participant_tokens.html#scopes) for details. The default dashboard screen requires the following scopes: `Participant:read SurveyTasks:read SurveyAnswers:read Notifications:read DataCollectionSettings:read ExternalAccounts:connect ExternalAccounts:read Project:read`.

Finally, **obtain the token** for the test participant. Choose any of the following methods:

* Log in to mydatahelps.org using that participant. Use the browser developer tools to examine the request to `https://mydatahelps.org/identityserver/connect/token`. The access token will be in the response.
* Use the [MyDataHelps REST API NodeJS Quickstart](https://github.com/CareEvolution/mydatahelps-rest-api-node-quickstart) or [MyDataHelps REST API Python Quickstart](https://github.com/CareEvolution/mydatahelps-rest-api-python-quickstart) apps to generate a token for your test participant, You will need to edit the code to specify the participant identifier and the necessary scope: `api`.
* Use the [MyDataHelps REST API](https://developer.mydatahelps.org/embeddables/participant_tokens.html) to generate a token for your test participant. Request the `api` scope.
* Use the [MyDataHelps REST API NodeJS Quickstart](https://github.com/CareEvolution/mydatahelps-rest-api-node-quickstart) or [MyDataHelps REST API Python Quickstart](https://github.com/CareEvolution/mydatahelps-rest-api-python-quickstart) apps to generate a token for your test participant.
* Use the [MyDataHelps REST API](https://developer.mydatahelps.org/embeddables/participant_tokens.html) to generate a token for your test participant.

Once you have the token, store it in the `.env.development` file as explained above.
Once you have the token, store it in the `.env.development` file as explained above, then run the app.

**IMPORTANT NOTES:**

Expand Down
2 changes: 2 additions & 0 deletions dotenv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
VITE_PARTICIPANT_ACCESS_TOKEN="YOUR_TOKEN_HERE"
VITE_MDH_ENDPOINT="https://designer.mydatahelps.org"
7 changes: 6 additions & 1 deletion src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ import TaskProgress from './components/TaskProgress/TaskProgress';
import MyDataHelps from '@careevolution/mydatahelps-js';

if (window.location.hostname === "localhost") {
MyDataHelps.setParticipantAccessToken({ "access_token": import.meta.env.VITE_PARTICIPANT_ACCESS_TOKEN, "expires_in": 21600, "token_type": "Bearer" }, "https://mydatahelps.org/");
let mdh_endpoint = import.meta.env.VITE_MDH_ENDPOINT || "https://designer.mydatahelps.org/";
// Trailing slash is required.
if (mdh_endpoint.slice(-1) != "/") {
mdh_endpoint = `${mdh_endpoint}/`;
}
MyDataHelps.setParticipantAccessToken({ "access_token": import.meta.env.VITE_PARTICIPANT_ACCESS_TOKEN, "expires_in": 21600, "token_type": "Bearer" }, mdh_endpoint);
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
Expand Down