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)
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.
Tweepy est utilisé pour l'authentification.
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