У меня есть вопрос о реализации входа в Google.Мне удалось внедрить кнопку Google Login в моем приложении реакции с помощью библиотеки с открытым исходным кодом под названием [реагировать-google-login] [1].Мне удалось настроить внутренний сервер с помощью фляги Python и разместить API на Heroku: http://arrangement -server.herokuapp.com / login .Клиентская сторона должна просто перенаправить на Google, а затем получить токен, когда он перенаправляет обратно.Но у меня возникают проблемы с получением любого токена из информации для входа в Google на веб-интерфейсе через компонент реагирования.
Я думаю, что есть проблема с моим заголовком для токена доступа и запросом от [app.py] [2]
google = oauth.remote_app('google',
base_url='https://www.google.com/accounts/',
authorize_url='https://accounts.google.com/o/oauth2/auth',
request_token_url=None,
request_token_params={'scope': 'https://www.googleapis.com/auth/userinfo.email',
'response_type': 'code'},
access_token_url='https://accounts.google.com/o/oauth2/token',
access_token_method='POST',
access_token_params={'grant_type': 'authorization_code'},
consumer_key=GOOGLE_CLIENT_ID,
consumer_secret=GOOGLE_CLIENT_SECRET)
@app.route("/")
def home_page():
access_token = session.get('access_token')
if access_token is None:
return redirect(url_for('login'))
access_token = access_token[0]
from urllib2 import Request, urlopen, URLError
headers = {'Authorization': 'OAuth '+access_token}
req = Request('https://www.googleapis.com/oauth2/v1/userinfo',
None, headers)
try:
res = urlopen(req)
except URLError, e:
if e.code == 401:
# Unauthorized - bad token
session.pop('access_token', None)
return redirect(url_for('login'))
return res.read()
return res.read()
мой компонент реакции на App.js
import React, { Component } from 'react'
import './App.css'
import router from 'config/router'
import { Provider } from 'react-redux'
import store from 'store/index'
import { GoogleLogin } from 'react-google-login'
import config from './config.json'
class App extends Component {
constructor() {
super();
this.state = { isAuthenticated: false, user: null, token:
''};
}
logout = () => {
this.setState({isAuthenticated: false, token: '', user: null})
};
onFailure = (error) => {
alert(error);
};
googleResponse = (response) => {
console.log(response);
const tokenBlob = new Blob([JSON.stringify({access_token: response.accessToken}, null, 2)], {type : 'application/json'});
const options = {
method: 'POST',
body: tokenBlob,
mode: 'cors',
cache: 'default'
};
fetch('http://arrangement-server.herokuapp.com/login', options).then(r => {
const token = r.headers.get('x-auth-token');
r.json().then(user => {
if (token) {
this.setState({isAuthenticated: true, user, token})
}
});
})
};
render() {
let content = !!this.state.isAuthenticated ?
(
<div>
<p>Authenticated</p>
<div>
{this.state.user.email}
</div>
<div>
<button onClick={this.logout} className="button">
Log out
</button>
</div>
</div>
) :
(
<div>
<GoogleLogin
clientId={config.GOOGLE_CLIENT_ID}
buttonText="Login"
onSuccess={this.googleResponse}
onFailure={this.onFailure}
/>
</div>
);
return (
<div className="App">
{content}
</div>
);
}
}
export default App
Код выше можно найти в моем проекте