[JAVA] L'authentification Twitter utilisant Flask et React est très agressive avec WebSocket

Aperçu

Plusieurs personnes effectuent l'authentification en réagissant sur les pages suivantes. React Authentication with Twitter, Google, Facebook and Github Créez un SPA avec React et connectez-vous avec l'authentification Twitter (OAuth). Le backend est Rails Cependant, j'étais stupide, donc je n'étais pas tout à fait sûr (plus tard, je ne pouvais pas trouver flask du côté serveur d'express ou de Rails sur la page ci-dessus). Par conséquent, j'ai écrit une certification très agressive avec une petite main.

C'est la première fois que j'utilise WebSocket, useEffect de React et Flask, donc j'espère que vous pourrez le voir pour référence (j'aimerais le réécrire avec le code approprié plus tard)

couler

Cette fois, lorsque vous appuyez sur le bouton "Authentification de l'application liée", le lien démarre, veuillez donc modifier cette partie de manière appropriée.

  1. Appuyez sur le bouton pour vous authentifier (fonction handleClick en js)
  2. La chaîne "Twitter" saute sur le serveur (fonction handleClick en js)
  3. Le serveur renvoie l'URL (pour l'authentification Twitter) (fonction pipe en python)
  4. Déplacer par URL avec js (ws.onmessage dans js = dans la fonction (e))
  5. Écran d'authentification Twitter
  6. Authentifier
  7. rediriger vers la page côté client
  8. Les informations sur auth_token et auth_verifier vont au serveur (à partir de ws.onopen dans useEffect)
  9. Le serveur crée un access_token_secret à l'aide d'un jeton et d'un vérificateur (user_timeline en python)
  10. Apportez la dernière chronologie de l'utilisateur authentifié depuis Twitter (user_timeline en python)

Tweepy est utilisé pour l'authentification.

Code réel

index.py


import os
import json
import sys
import tweepy
from flask import Flask, session, redirect, render_template, request, jsonify, abort, make_response
from flask_cors import CORS, cross_origin
from os.path import join, dirname
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)
CORS(app)
#Décidez vous-même
app.secret_key = ""
#Apportez de l'application Twitter
CONSUMER_KEY = ""
CONSUMER_SECRET = ""

@app.route('/pipe')
def pipe():
   if request.environ.get('wsgi.websocket'):
       ws = request.environ['wsgi.websocket']
       while True:
            message = ws.receive()
            # print(message)
            #Lorsque vous appuyez sur le bouton, Twitter sera envoyé par socket Web, il s'enflammera donc s'il est envoyé
            if message == "Twitter":
                auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
                try:
                    #Obtenir l'URL pour l'authentification des applications liées
                    redirect_url = auth.get_authorization_url()
                    session['request_token'] = auth.request_token
                except Exception as ee:
                    # except tweepy.TweepError:
                    sys.stderr.write("*** error *** twitter_auth ***\n")
                    sys.stderr.write(str(ee) + "\n")
                #Renvoyer l'URL avec websocket
                ws.send(redirect_url)
                ws.close()
                #S'il n'y a pas de retour, une erreur se produira
                return redirect_url
            elif message != None:
                messages = json.loads(message)
                # print(messages)
                user_timeline(messages, ws)
def user_timeline(auths, ws):
    #Effectuer l'authentification OAuth de l'application avec tweepy
    auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
    verifier = str(auths["oauth_verifier"])
    # Access token,Obtenez le secret du jeton d'accès.
    auth.request_token['oauth_token'] = str(auths["oauth_token"])
    auth.request_token['oauth_token_secret'] = verifier
    try:
        access_token_secret = auth.get_access_token(verifier)
    except Exception as ee:
        print(ee)
        return ""

    print(access_token_secret)
    #Accédez à l'API Twitter avec tweepy
    api = tweepy.API(auth)

    #Obtient et renvoie une liste de tweets dans la chronologie de l'utilisateur
    for status in api.user_timeline(count=1):
        text = status.text
    #Obtient et renvoie une liste de tweets dans la chronologie de l'utilisateur
    ws.send(text)
    ws.close()

def main():
    app.debug = True
    server = pywsgi.WSGIServer(("", 5000), app, handler_class=WebSocketHandler)
    server.serve_forever()

if __name__ == "__main__":
    main()

app.js


import React from 'react';
import './App.css';
import { useState, useEffect } from 'react';

function App() {
  const [flag, setFlag] = useState(false);
  const [userData, setUserData] = useState('');
  const [data, setData] = useState('');
  //Communication avec webSocket
  const ws = new WebSocket('ws://localhost:5000/pipe');
  //Renvoie le vérificateur dans l'url après l'ouverture de ws avant le rendu
  useEffect(() => {
    ws.onopen = event => {
      if (userData == false && window.location.search.includes('verifier')) {
        setFlag(true);
        ws.send(getParam('oauth_verifier'));
      }
    };
    setUserData('true');
  });

  //Code pour insérer des éléments spécifiques dans l'URL
  function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  //Reçoit un message lorsqu'il est envoyé du côté serveur et active la fonction(Pour accéder à l'URL d'authentification Twitter)
  ws.onmessage = e => {
    console.log(e);
    if (e.data.includes('oauth_token')) {
      window.location.href = e.data;
    } else {
      console.log(e);
      setData(e.data);
    }
  };
  //Lorsque cliqué(Cette fois, si vous cliquez sur le bouton du personnage, un moji Twitter sera envoyé au serveur)
  function handleClick() {
    console.log('rest');
    ws.send('Twitter');
  }
  console.log(flag);

  //Changer les éléments de rendu
  let render = flag ? (
    <div>{data}</div>
  ) : (
    <button onClick={handleClick}>Authentification d'application liée</button>
  );
  return <>{render}</>;
}

export default App;

Pour être honnête, c'est un code très approprié, donc je pense que c'est juste si vous pouvez vous y référer (** Après cela, une erreur Websocket se produira. Je pense que c'est parce que la communication se fait à l'état fermé, donc je vais le modifier si je peux le réparer **)

Recommended Posts

L'authentification Twitter utilisant Flask et React est très agressive avec WebSocket
React and Flask to GCP
Authentification à l'aide de l'authentification des utilisateurs tweepy et de l'authentification d'application (Python)
Authentification de base, authentification Digest avec Flask
Je souhaite créer une application Web en utilisant React et Python flask
Inférence d'image de visage à l'aide de Flask et TensorFlow