Skip to content
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.

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

README updates and bug fix for Flask starter escaped quotes #188

Merged
merged 5 commits into from
Sep 11, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions examples/custom-actions/app-manifest.yaml
Original file line number Diff line number Diff line change
@@ -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
88 changes: 65 additions & 23 deletions examples/python-flask-starter-with-oauth/README.md
Original file line number Diff line number Diff line change
@@ -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 <a name="features"></a>

- [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 <a name="tools"></a>

- [Flask](https://flask.palletsprojects.com/en/2.1.x/)
- [Python](https://www.python.org/)

# ✅ Prerequisites <a name="prerequisites"></a>

- 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 <a name="run"></a>

0. Create a new Miro App and make sure to check the box for `Expire user authorization token` as shown in the screenshot below.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 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! ⚠️

expire-auth-token

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch @horeaporutiu !

Just updated it with this 👍


> ⚠️ If you don't check this box, the app will not work! ⚠️
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why (in 1 sentence)?

![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 <a name="folder"></a>

```
.
├── 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 <a name="contributing"></a>

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 <a name="license"></a>

[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h1>Welcome to the API Starter!</h1>
<div class="cs1 ce6">
<button
class="button button-signin"
onclick="window.location.href='{{ url_for( &quot;login&quot;) }}'"
onclick="window.location.href = '{{ url_for('login') }}'"
>
Sign in to Miro
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h1>Congrats! You've logged in!</h1>
<div class="cs1 ce6">
<button
class="button button-primary"
onclick="window.location.href='{{ url_for( &quot;create_board&quot;) }}'"
onclick="window.location.href = '{{ url_for('create_board') }}'"
>
Make API call
</button>
Expand Down
Loading