Auf den folgenden Seiten reagieren mehrere Personen auf die Authentifizierung. React Authentication with Twitter, Google, Facebook and Github Erstellen Sie ein SPA mit React und melden Sie sich mit der Twitter-Authentifizierung (OAuth) an. Das Backend ist Rails Ich war jedoch dumm und war mir nicht sicher (später konnte ich auf der Serverseite von Express oder Rails auf der obigen Seite keine Flasche finden). Deshalb habe ich mit einer kleinen Hand eine sehr aggressive Zertifizierung geschrieben.
Es ist mein erstes Mal, dass ich WebSocket, React's useEffect und Flask verwende. Es wäre also schön, wenn Sie es als Referenz sehen könnten (ich möchte es später mit dem richtigen Code umschreiben).
Wenn Sie diesmal auf die Schaltfläche "Authentifizierung für verknüpfte Apps" klicken, wird der Link gestartet. Ändern Sie diesen Teil daher entsprechend.
Tweepy wird zur Authentifizierung verwendet.
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)
#Entscheide selbst
app.secret_key = ""
#Bringen Sie von Twitter App
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)
#Wenn Sie die Taste drücken, wird Twitter per Web-Socket gesendet, sodass es sich beim Senden entzündet
if message == "Twitter":
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
try:
#URL für verknüpfte App-Authentifizierung abrufen
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")
#URL mit Websocket zurücksenden
ws.send(redirect_url)
ws.close()
#Wenn keine Rückgabe erfolgt, tritt ein Fehler auf
return redirect_url
elif message != None:
messages = json.loads(message)
# print(messages)
user_timeline(messages, ws)
def user_timeline(auths, ws):
#Führen Sie die OAuth-Authentifizierung der Anwendung mit tweepy durch
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
verifier = str(auths["oauth_verifier"])
# Access token,Holen Sie sich das Geheimnis des Zugriffstokens.
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)
#Greifen Sie mit tweepy auf die Twitter-API zu
api = tweepy.API(auth)
#Ruft eine Liste von Tweets in der Zeitleiste des Benutzers ab und gibt sie zurück
for status in api.user_timeline(count=1):
text = status.text
#Ruft eine Liste von Tweets in der Zeitleiste des Benutzers ab und gibt sie zurück
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('');
//Kommunikation mit webSocket
const ws = new WebSocket('ws://localhost:5000/pipe');
//Gibt den Verifizierer in der URL zurück, nachdem ws vor dem Rendern geöffnet wurde
useEffect(() => {
ws.onopen = event => {
if (userData == false && window.location.search.includes('verifier')) {
setFlag(true);
ws.send(getParam('oauth_verifier'));
}
};
setUserData('true');
});
//Code zum Einfügen bestimmter Elemente in die 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, ' '));
}
//Empfängt eine Nachricht, wenn sie von der Serverseite gesendet wird, und aktiviert die Funktion(So springen Sie zur Twitter-Authentifizierungs-URL)
ws.onmessage = e => {
console.log(e);
if (e.data.includes('oauth_token')) {
window.location.href = e.data;
} else {
console.log(e);
setData(e.data);
}
};
//Wenn geklickt(Wenn Sie diesmal auf die Schaltfläche des Charakters klicken, wird ein Twitter-Moji an den Server gesendet)
function handleClick() {
console.log('rest');
ws.send('Twitter');
}
console.log(flag);
//Renderelemente wechseln
let render = flag ? (
<div>{data}</div>
) : (
<button onClick={handleClick}>Verknüpfte App-Authentifizierung</button>
);
return <>{render}</>;
}
export default App;
Um ehrlich zu sein, ist es ein sehr geeigneter Code, daher denke ich, dass es genau richtig ist, wenn Sie darauf verweisen können (** Danach tritt ein Websocket-Fehler auf. Ich denke, das liegt daran, dass die Kommunikation im geschlossenen Zustand erfolgt, also werde ich ihn bearbeiten, wenn ich ihn beheben kann **)
Recommended Posts