30.09.2022 в 13:11

Экспортируйте свои закладки с помощью Flask, OAuth 2.0 и Render

Ранее в этом году я создал образец, который позволяет вам отображать свои закладки. Однако недавно я получил электронное письмо с вопросом, знаю ли я об услуге, которая позволит вам экспортировать ваши закладки. Итак, я решил обновить этот пример, чтобы экспортировать ваши закладки в CSV. В этом примере используются Python и Flask для создания веб-сайта, на который вы можете экспортировать свои закладки в формате CSV.

Код в настоящее время работает с использованием Render для хостинга, и вы можете найти полную версию кода на нашем GitHub.

Что нужно для начала работы с Twitter API

Вам необходимо зарегистрироваться для доступа к Twitter API. Вы также создадите проект на портале разработчиков и приложение, содержащее учетные данные, необходимые для использования Twitter API. Кроме того, вам необходимо включить OAuth 2.0 в настройках аутентификации вашего приложения. Площадка разработчика — отличное место, чтобы начать использовать Twitter API.

Настройка ваших шаблонов

В редакторе кода вам нужно создать три файла: base.html, index.html и next.html в папке с именем templates.

В файле base.html вы настраиваете стиль своего сайта и форматирование HTML. Все остальные созданные вами шаблоны будут наследоваться от этого шаблона.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Export your Bookmarks!{% block title %}{% endblock %}</title>
    <link
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="container">
      <h1>Export your Bookmarks!</h1>
      {% block containercontent %}{% endblock %}
      <hr />
      <div class="footer">
        <p class="text-muted">
          <small
            >This is a basic demo created by the
            <a href="https://twitter.com/TwitterDev">@TwitterDev</a> team. It is
            written in Python, using
            <a href="http://flask.pocoo.org/">Flask</a>. Basic CSS is provided by
            <a href="http://getbootstrap.com/">Bootstrap</a>. The source code
            for this project can be found at
            <a href="https://github.com/twitterdev/export-bookmarks"
              >github/twitterdev/plot-bookmarks</a
            >.</small
          >
        </p>
      </div>
    </div>
  </body>
</html>

index.html служит целевой страницей для вашего сайта и знакомит вас и ваших пользователей с тем, что вы можете ожидать от демонстрационного сайта.

{% extends "base.html" %}
{% block containercontent %}
<p class="lead">This application allows you to export your recent Bookmarked Tweets.</p>
<div class="hero-unit">
    <p>To get started, we'll need you to authorize our demo App (Hello world twitter bot) to access your bookmarks on Twitter using OAuth 2.0. Learn more information about <a href="https://developer.twitter.com/en/docs/authentication/oauth-2-0">OAuth 2.0.</a></p>
    <p>Here's how it works:</p>
    <ol>
        <li>We will redirect you to Twitter.com for you to authorize our app.</li>
        <li>While at Twitter.com, you will authorize our App to access your Bookmarks.</li>
        <li>After you click "Export CSV", you should get back a CSV of your most recent Bookmarks.</li>
    </ol>
</div>
<p>Let's get started!</p>
<a href="/start" class="btn btn-small btn-success">Start</a>
{% endblock %}

В шаблоне next.html вы можете настроить загрузку CSV после нажатия кнопки. В HTML для кнопки вы найдете ссылку на next <a href=next>. Здесь вы позже подключитесь к маршруту с именем next, где вы установите логику для загрузки CSV.

{% extends "base.html" %}
{% block containercontent %}
<p class="lead">This application allows you to export your recent Bookmarked Tweets.</p>
<div class="hero-unit">
    <p>To get started, we'll need you to authorize our demo App (Hello world twitter bot) to access your bookmarks on Twitter using OAuth 2.0. Learn more information about <a href="https://developer.twitter.com/en/docs/authentication/oauth-2-0">OAuth 2.0.</a></p>
    <p>Here's how it works:</p>
    <ol>
        <li>We will redirect you to Twitter.com for you to authorize our app.</li>
        <li>While at Twitter.com, you will authorize our App to access your Bookmarks.</li>
        <li>After you click "Export CSV", you should get back a CSV of your most recent Bookmarks.</li>
    </ol>
</div>
<p>Let's get started!</p>
<a href="/start" class="btn btn-small btn-success">Start</a>
{% endblock %}

Установка необходимых пакетов

В вашем терминале вы можете установить необходимые вам пакеты с помощью следующей команды:

pip3 requests pandas requests_oauthlib flask

Мы будем использовать запросы (requests) для выполнения HTTP-запросов к API Twitter, панды для формирования данных перед их экспортом, request_oauthlib для помощи в подключении к OAuth 2.0 и flask для настройки веб-фреймворка для взаимодействия с браузером перед загрузкой экспорт ваших закладок.

Создание вашего файла app.py

Большая часть логики вашего приложения будет находиться в вашем файле app.py. Итак, в редакторе кода создайте файл с именем app.py.

Сначала вам нужно будет импортировать все пакеты, которые вы будете использовать, в начало файла. Импорт будет включать пакеты, которые вы установили на предыдущем шаге, и вспомогательные утилиты, такие как base64, hashlib и ос, которые помогают получить доступ к переменным среды и подключиться к OAuth 2.0.

import base64
import hashlib
import os
import re
import requests
import pandas as pd

from requests_oauthlib import OAuth2Session
from flask import (
    Flask,
    request,
    redirect,
    session,
    render_template,
    make_response,
)

Как и в большинстве приложений Flask, вы захотите установить переменную с именем app и подключить случайный секретный ключ.

app = Flask(__name__)
app.secret_key = os.urandom(50)

Теперь, когда вы настроили приложение Flask, вам нужно добавить код, который поможет вам подключиться к OAuth 2.0. OAuth 2.0 — это стандартный протокол авторизации, который обеспечивает больший контроль над областью действия приложения и потоками авторизации на нескольких устройствах. Наша реализация включает поток кода авторизации с PKCE.

С OAuth 2.0 вы можете установить области, которые являются разрешениями вашего приложения, и эти области будут доступны пользователю при входе в систему.

Вы можете получить свой идентификатор клиента и секрет клиента из ключей и токенов вашего приложения на портале разработчика. URI перенаправления для локального запуска кода должен быть http://127.0.0.1:5000/oauth/callback. Когда вы развертываете это на сервере, вам нужно будет добавить перенаправление для сайта, который вы используете для развертывания.

client_id = os.environ.get("CLIENT_ID")
client_secret = os.environ.get("CLIENT_SECRET")
redirect_uri = os.environ.get("REDIRECT_URI")
auth_url = "https://twitter.com/i/oauth2/authorize"
token_url = "https://api.twitter.com/2/oauth2/token"

scopes = ["tweet.read", "users.read", "bookmark.read"]

code_verifier = base64.urlsafe_b64encode(os.urandom(30)).decode("utf-8")
code_verifier = re.sub("[^a-zA-Z0-9]+", "", code_verifier)
code_challenge = hashlib.sha256(code_verifier.encode("utf-8")).digest()

code_challenge = base64.urlsafe_b64encode(code_challenge).decode("utf-8")
code_challenge = code_challenge.replace("=", "")

Внутри вашего терминала вы можете установить переменные среды для CLIENT_ID, CLIENT_SECRET и REDIRECT_URI.

export CLIENT_ID=’your_client_id’
export CLIENT_SECRET=’your_client_secret’
export REDIRECT_URI=’http://127.0.0.1:5000/oauth/callback’

Теперь вы можете создать функцию с именем get_bookmarks, которая отправляет HTTP-запрос к конечной точке управления закладками. Этот запрос также включает поле для даты создания твита, created_at, которое необходимо запрашивать отдельно как поле tweet.field, чтобы обеспечить большую гибкость.

def get_bookmarks(user_id, token):
    print("Making a request to the bookmarks endpoint")
    params = {"tweet.fields": "created_at"}
    return requests.request(
        "GET",
        "https://api.twitter.com/2/users/{}/bookmarks".format(user_id),
        headers={"Authorization": "Bearer {}".format(token["access_token"])},
        params=params,
    )

На этом этапе вам нужно настроить первую страницу, которую посещает пользователь, когда он заходит на ваш сайт. Для этого сайта вы отобразите index.html, который вы настроили ранее.

@app.route("/")
def hello():
    return render_template("index.html")

После того, как пользователь нажмет кнопку запуска, он попадет в Twitter, чтобы войти в свою учетную запись Twitter и увидеть разрешения вашего приложения, которые вы установили в областях.

@app.route("/start")
def demo():
    global twitter
    twitter = OAuth2Session(client_id, redirect_uri=redirect_uri, scope=scopes)
    authorization_url, state = twitter.authorization_url(
        auth_url, code_challenge=code_challenge, code_challenge_method="S256"
    )
    session["oauth_state"] = state
    return redirect(authorization_url)

После подтверждения пользователя вы получите токен доступа, который можно использовать для выполнения запросов от имени пользователя. Например, поскольку вам нужен идентификатор пользователя для использования конечной точки управления закладками, вы можете использовать конечную точку поиска пользователя, прошедшего проверку подлинности, чтобы получить его идентификатор пользователя. После этого вы можете запросить конечную точку управления закладками, чтобы получить закладки пользователя и сохранить их в табличном виде, используя DataFrame панды.

@app.route("/oauth/callback", methods=["GET"])
def callback():
    code = request.args.get("code")
    token = twitter.fetch_token(
        token_url=token_url,
        client_secret=client_secret,
        code_verifier=code_verifier,
        code=code,
    )
    print(token)
    user_me = requests.request(
        "GET",
        "https://api.twitter.com/2/users/me",
        headers={"Authorization": "Bearer {}".format(token["access_token"])},
    ).json()
    print(user_me)
    user_id = user_me["data"]["id"]
    bookmarks = get_bookmarks(user_id, token).json()
    global df
    df = pd.DataFrame(bookmarks["data"])
    return render_template("next.html")

После аутентификации пользователя он перейдет на страницу, где сможет загрузить свои закладки, нажав кнопку экспорта.

@app.route("/oauth/next")
def export():
    resp = make_response(df.to_csv())
    resp.headers["Content-Disposition"] = "attachment; filename=export.csv"
    resp.headers["Content-Type"] = "text/csv"
    return resp


if __name__ == "__main__":
    app.run(debug=True)

Чтобы запустить файл локально, запустите следующую строку в своем терминале:

python3 app.py

Размещение

В настоящее время этот проект развернут с использованием Render. Я использовал аналогичный метод, описанный в их документации по развертыванию Flask. Вам нужно будет добавить новый REDIRECT_URI в переменные среды внутри Render и на портале разработчика в настройках аутентификации вашего приложения. Кроме того, вы захотите добавить свой идентификатор клиента и секрет клиента в переменные среды.

Следующие шаги

Надеемся, что это руководство может послужить отправной точкой для начала работы с OAuth 2.0, Flask или веб-разработки. Кроме того, этот пример кода можно легко расширить, чтобы выбрать нужные поля и расширения из CSV или подключиться к Google Таблицам.

Войти на сайт