From ad89ca13e98fa54dc266b90e53fffcb32a332514 Mon Sep 17 00:00:00 2001 From: William Bishop Date: Mon, 11 Sep 2023 10:21:13 +0200 Subject: [PATCH] README updates and bug fix for Flask starter escaped quotes (#188) * Update README for Flask starter, fix bugwith escaped quotes in templates for Flask starter, add yaml file for Connect Firebase app. * prettier on readme and yaml file * add yaml to custom actions app * add expire token note * single quotes for escaping quotes in button --- examples/custom-actions/app-manifest.yaml | 6 ++ .../python-flask-starter-with-oauth/README.md | 88 ++++++++++++++----- .../app-manifest.yaml | 2 +- .../templates/index.html | 2 +- .../templates/loggedin.html | 2 +- 5 files changed, 74 insertions(+), 26 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..c483eb3ba --- /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 diff --git a/examples/python-flask-starter-with-oauth/README.md b/examples/python-flask-starter-with-oauth/README.md index 27bab4e46..96fbf19ef 100644 --- a/examples/python-flask-starter-with-oauth/README.md +++ b/examples/python-flask-starter-with-oauth/README.md @@ -1,44 +1,86 @@ -### 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 -## How to start +https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7-9b216f0fb0b8 -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: \ +# 📒 Table of Contents + +- [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 + +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: ``` 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**. \ - In the app manifest editor, configure the app as follows: + - 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. \ 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` + 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` -ℹī¸ 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). 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..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 dddfc4a66..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!