There are multiple people who authenticate with react on the following pages. React Authentication with Twitter, Google, Facebook and Github Create a SPA with React and log in with Twitter authentication (OAuth). The back end is Rails However, I was stupid, so I wasn't sure about it (later, I couldn't find flask on the server side of express or Rails on the above page). Therefore, I wrote a very aggressive certification with a small hand.
It's my first time to use WebSocket, React's useEffect, and Flask, so it would be nice if you could see it for reference (I'd like to rewrite it with proper code later).
This time, when you press the "Linked App Authentication" button, the link will start, so please change that part appropriately.
Tweepy is used for authentication.
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)
#Decide on your own
app.secret_key = ""
#Bring from 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)
#When you press the button, Twitter will be sent by websocket, so it will ignite if sent
if message == "Twitter":
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
try:
#Get URL for linked app authentication
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")
#Send back url with websocket
ws.send(redirect_url)
ws.close()
#If there is no return, an error will occur
return redirect_url
elif message != None:
messages = json.loads(message)
# print(messages)
user_timeline(messages, ws)
def user_timeline(auths, ws):
#Authenticate your app with tweepy
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
verifier = str(auths["oauth_verifier"])
# Access token,Get Access token secret.
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)
#Access the Twitter API with tweepy
api = tweepy.API(auth)
#Gets and returns a list of tweets in user's timeline
for status in api.user_timeline(count=1):
text = status.text
#Gets and returns a list of tweets in user's timeline
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 with webSocket
const ws = new WebSocket('ws://localhost:5000/pipe');
//Returns the verifier in the url after ws opens before rendering
useEffect(() => {
ws.onopen = event => {
if (userData == false && window.location.search.includes('verifier')) {
setFlag(true);
ws.send(getParam('oauth_verifier'));
}
};
setUserData('true');
});
//Code to bring a specific element in the 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, ' '));
}
//Receives when a message is sent from the server side and activates the function(To jump to the Twitter authentication 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);
}
};
//When clicked(This time, if you click the button on the character, Twitter will be sent to the server)
function handleClick() {
console.log('rest');
ws.send('Twitter');
}
console.log(flag);
//Switching render elements
let render = flag ? (
<div>{data}</div>
) : (
<button onClick={handleClick}>Linked app authentication</button>
);
return <>{render}</>;
}
export default App;
To be honest, it's a very appropriate code, so I think it's just right if you can refer to it (** After that, a websocket error will occur. I think that it is because communication is done in the closed state, so I will edit it if I can fix it **)
Recommended Posts