From 740f0ffbb3d725e21a5932767914cf3c18bb539e Mon Sep 17 00:00:00 2001 From: William Bishop Date: Thu, 7 Sep 2023 13:14:28 +0200 Subject: [PATCH 1/5] Update README for Flask starter, fix bugwith escaped quotes in templates for Flask starter, add yaml file for Connect Firebase app. --- examples/custom-actions/app-manifest.yaml | 6 ++ .../python-flask-starter-with-oauth/README.md | 76 ++++++++++++++----- .../app-manifest.yaml | 2 +- .../templates/index.html | 2 +- .../templates/loggedin.html | 2 +- 5 files changed, 65 insertions(+), 23 deletions(-) create mode 100644 examples/custom-actions/app-manifest.yaml diff --git a/examples/custom-actions/app-manifest.yaml b/examples/custom-actions/app-manifest.yaml new file mode 100644 index 000000000..5309ef0a0 --- /dev/null +++ b/examples/custom-actions/app-manifest.yaml @@ -0,0 +1,6 @@ +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Custom Actions +sdkUri: "http://localhost:3000" +scopes: + - boards:read + - boards:write \ No newline at end of file diff --git a/examples/python-flask-starter-with-oauth/README.md b/examples/python-flask-starter-with-oauth/README.md index 27bab4e46..a45bfb076 100644 --- a/examples/python-flask-starter-with-oauth/README.md +++ b/examples/python-flask-starter-with-oauth/README.md @@ -1,22 +1,49 @@ -### About the app +# Miro Flask Python Starter with OAuth -This app shows how you can use the Miro REST API. \ -It implements the full OAuth2 flow and calls the [Create Miro board API endpoint](https://developers.miro.com/reference/create-board). +This app shows how to implement the OAuth2.0 flow and call the Miro REST API's [Create Board](https://developers.miro.com/reference/create-board) endpoint, using Flask / Python. -This app uses [Flask](https://flask.palletsprojects.com/en/2.1.x/) and [Python](https://www.python.org/). +# 👨đŸģ‍đŸ’ģ App Demo +https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7-9b216f0fb0b8 -## How to start +# 📒 Table of Contents -1. Install the project dependenciesAwes: run `pip3 install -r requirements.txt` -2. Create your `.env` file by copying the template, and use it to store your credentials: \ +- [Included Features](#features) +- [Tools and Technologies](#tools) +- [Prerequisites](#prerequisites) +- [Run the app locally](#run) +- [Folder Structure](#folder) +- [Contributing](#contributing) +- [License](#license) + +# ⚙ī¸ Included Features + +- [Miro REST API](https://developers.miro.com/reference/api-reference) +- [Miro OAuth2.0](https://developers.miro.com/docs/getting-started-with-oauth) + +# 🛠ī¸ Tools and Technologies + +- [Flask](https://flask.palletsprojects.com/en/2.1.x/) +- [Python](https://www.python.org/) + +# ✅ Prerequisites + +- You have a [Miro account](https://miro.com/signup/). +- You're [signed in to Miro](https://miro.com/login/). +- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team). +- Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version. +- You have the latest versions of Flask and Python installed. + +# 🏃đŸŊ‍♂ī¸ Run the app locally +1. Install the project dependenciesAwes by running `pip3 install -r requirements.txt` +2. Create your `.env` file by copying the template, and use it to store your credentials: ``` cp sample.env .env ``` 3. In your account profile, go to **Your apps**, and then select the app you just created to access its settings page. \ On the app settings page: - - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values. \ - Paste these details to your `.env` file `clientID` and `clientSecret` variables. -4. Then, open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \ + - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values. + - Paste these details to your `.env` file's `clientID` and `clientSecret` variables. +4. From your App Settings page, open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \ In the app manifest editor, configure the app as follows: - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirecturis): assign `http://127.0.0.1:5000/callback` as a value for this property. \ @@ -24,21 +51,30 @@ This app uses [Flask](https://flask.palletsprojects.com/en/2.1.x/) and [Python]( - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \ To enable the app to read from and write to the board, add the following permissions: - `boards:read` - - `boards:write` + - `boards:write`\ +\ +Hit **Save**. 5. Run the app with `python3 app.py` 6. Open the page at `http://127.0.0.1:5000` -ℹī¸ Note: - -- This demo application works only with [refresh tokens](https://developers.miro.com/reference/authorization-flow-for-expiring-tokens). - -## Folder structure +# 🗂ī¸ Folder structure ``` . -├── sample.env <-- Template environment file to store env vars and credentials. -│ └── templates <-- Contains the 2 web pages used for the app. -├── app.py <-- The app itself. -└── requirements.txt <-- Python libraries used to build the app. +├── templates +│ └── index.html <-- The html view for users who have not yet authorized Miro +│ └── loggedin.html <-- The html view for users who have authorized Miro +│ +├── app.py <-- The python script. This script runs Miro's OAuth flow and calls the Miro REST API. +├── sample.env <-- Sample .env file to show format of environment variables +└── requirements.txt <-- The python requirements file ``` + +# đŸĢąđŸģ‍đŸĢ˛đŸŊ Contributing + +If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md). + +# đŸĒĒ License + +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file diff --git a/examples/python-flask-starter-with-oauth/app-manifest.yaml b/examples/python-flask-starter-with-oauth/app-manifest.yaml index 19e4d20f2..8ac5bfb31 100644 --- a/examples/python-flask-starter-with-oauth/app-manifest.yaml +++ b/examples/python-flask-starter-with-oauth/app-manifest.yaml @@ -1,5 +1,5 @@ # See https://developers.miro.com/docs/app-manifest on how to use this -appName: Flask Demo +appName: Python Flask Starter with OAuth redirectUris: - http://127.0.0.1:5000/callback scopes: diff --git a/examples/python-flask-starter-with-oauth/templates/index.html b/examples/python-flask-starter-with-oauth/templates/index.html index 3406e8301..87dbb0625 100644 --- a/examples/python-flask-starter-with-oauth/templates/index.html +++ b/examples/python-flask-starter-with-oauth/templates/index.html @@ -20,7 +20,7 @@

Welcome to the API Starter!

diff --git a/examples/python-flask-starter-with-oauth/templates/loggedin.html b/examples/python-flask-starter-with-oauth/templates/loggedin.html index dddfc4a66..48aa2e215 100644 --- a/examples/python-flask-starter-with-oauth/templates/loggedin.html +++ b/examples/python-flask-starter-with-oauth/templates/loggedin.html @@ -20,7 +20,7 @@

Congrats! You've logged in!

From 49a6c3e7f188fae43456b0539ae83c41dd191aca Mon Sep 17 00:00:00 2001 From: William Bishop Date: Thu, 7 Sep 2023 13:21:23 +0200 Subject: [PATCH 2/5] prettier on readme and yaml file --- .../python-flask-starter-with-oauth/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/python-flask-starter-with-oauth/README.md b/examples/python-flask-starter-with-oauth/README.md index a45bfb076..456b15ab8 100644 --- a/examples/python-flask-starter-with-oauth/README.md +++ b/examples/python-flask-starter-with-oauth/README.md @@ -3,6 +3,7 @@ This app shows how to implement the OAuth2.0 flow and call the Miro REST API's [Create Board](https://developers.miro.com/reference/create-board) endpoint, using Flask / Python. # 👨đŸģ‍đŸ’ģ App Demo + https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7-9b216f0fb0b8 # 📒 Table of Contents @@ -34,8 +35,9 @@ https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7- - You have the latest versions of Flask and Python installed. # 🏃đŸŊ‍♂ī¸ Run the app locally + 1. Install the project dependenciesAwes by running `pip3 install -r requirements.txt` -2. Create your `.env` file by copying the template, and use it to store your credentials: +2. Create your `.env` file by copying the template, and use it to store your credentials: ``` cp sample.env .env ``` @@ -44,16 +46,14 @@ https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7- - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values. - Paste these details to your `.env` file's `clientID` and `clientSecret` variables. 4. From your App Settings page, open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \ - In the app manifest editor, configure the app as follows: + In the app manifest editor, configure the app as follows: - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirecturis): assign `http://127.0.0.1:5000/callback` as a value for this property. \ It defines the redirect URL that starts the OAuth 2.0 code grant flow for the REST API. - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \ - To enable the app to read from and write to the board, add the following permissions: - - `boards:read` - - `boards:write`\ -\ -Hit **Save**. + To enable the app to read from and write to the board, add the following permissions: - `boards:read` - `boards:write`\ + \ + Hit **Save**. 5. Run the app with `python3 app.py` 6. Open the page at `http://127.0.0.1:5000` @@ -77,4 +77,4 @@ If you want to contribute to this example, or any other Miro Open Source project # đŸĒĒ License -[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). From e3918b01182023f40d0616cefba16ce9156c7376 Mon Sep 17 00:00:00 2001 From: William Bishop Date: Thu, 7 Sep 2023 13:22:32 +0200 Subject: [PATCH 3/5] add yaml to custom actions app --- examples/custom-actions/app-manifest.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/custom-actions/app-manifest.yaml b/examples/custom-actions/app-manifest.yaml index 5309ef0a0..c483eb3ba 100644 --- a/examples/custom-actions/app-manifest.yaml +++ b/examples/custom-actions/app-manifest.yaml @@ -3,4 +3,4 @@ appName: Custom Actions sdkUri: "http://localhost:3000" scopes: - boards:read - - boards:write \ No newline at end of file + - boards:write From a515403baa9ea52e3016bd3dd40aefa5a06c1479 Mon Sep 17 00:00:00 2001 From: William Bishop Date: Thu, 7 Sep 2023 16:09:44 +0200 Subject: [PATCH 4/5] add expire token note --- examples/python-flask-starter-with-oauth/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/python-flask-starter-with-oauth/README.md b/examples/python-flask-starter-with-oauth/README.md index 456b15ab8..96fbf19ef 100644 --- a/examples/python-flask-starter-with-oauth/README.md +++ b/examples/python-flask-starter-with-oauth/README.md @@ -36,6 +36,12 @@ https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7- # 🏃đŸŊ‍♂ī¸ Run the app locally +0. Create a new Miro App and make sure to check the box for `Expire user authorization token` as shown in the screenshot below. + + > ⚠ī¸ If you don't check this box, the app will not work! ⚠ī¸ + +![image](https://github.com/bishopwm/miroFullstackSample/assets/10800544/5fbcc8ae-481b-4dc1-bbff-ef9cf5fb39d9) + 1. Install the project dependenciesAwes by running `pip3 install -r requirements.txt` 2. Create your `.env` file by copying the template, and use it to store your credentials: ``` From b09506bd6bfecda3a4ade30fe24d16b16686c26e Mon Sep 17 00:00:00 2001 From: William Bishop Date: Fri, 8 Sep 2023 16:35:24 +0200 Subject: [PATCH 5/5] single quotes for escaping quotes in button --- examples/python-flask-starter-with-oauth/templates/index.html | 2 +- .../python-flask-starter-with-oauth/templates/loggedin.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/python-flask-starter-with-oauth/templates/index.html b/examples/python-flask-starter-with-oauth/templates/index.html index 87dbb0625..73559927f 100644 --- a/examples/python-flask-starter-with-oauth/templates/index.html +++ b/examples/python-flask-starter-with-oauth/templates/index.html @@ -20,7 +20,7 @@

Welcome to the API Starter!

diff --git a/examples/python-flask-starter-with-oauth/templates/loggedin.html b/examples/python-flask-starter-with-oauth/templates/loggedin.html index 48aa2e215..d525507cd 100644 --- a/examples/python-flask-starter-with-oauth/templates/loggedin.html +++ b/examples/python-flask-starter-with-oauth/templates/loggedin.html @@ -20,7 +20,7 @@

Congrats! You've logged in!