Question

我对实现Google登录有疑问。我能够使用名为[react-google-login] [1]的开源库在我的react应用上实现Google登录按钮。我能够使用python flask设置后端服务器，并在Heroku上托管api：http://arrangement-server.herokuapp.com/login。客户端应该只重定向到google，然后在重定向回时获得令牌。但是我很难通过react组件从前端的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上的我的react组件

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

上面的代码可以在我的项目中找到

Answer 1

我看过你的代码。我可以使用您的Google客户ID运行该代码。因此，在前端令牌和配置文件详细信息通过“ react-google-login”获得。问题出在/ login api。此api应该是“ POST”。您可以查看我所附的屏幕截图。

我看到您已经为ID和机密创建了config.json，但是却忘记了删除具有客户端ID的提交。不应在代码：P

中提交configId

Answer 2

因此，前端使用react库react-google-login从Google服务器获取访问令牌。因此，后端不需要获取访问令牌。前端需要通过发布请求将访问令牌提供给后端。

Answer 3

/登录路线动词应为POST

使用React组件在React App上与Google SSO react-google-login登录

3 个答案: