Reactjs 使用react组件在react应用程序上使用google登录SSO react google

我有一个关于实现谷歌登录的问题。我能够使用名为[react Google Login][1]的开源库在我的react应用程序上实现Google登录按钮。我能够使用python flask设置后端服务器，并在Heroku上托管api:。客户端应该只是重定向到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

import React，{Component}来自“React”
导入“./App.css”
从“配置/路由器”导入路由器
从“react redux”导入{Provider}
从“存储/索引”导入存储
从“react google login”导入{GoogleLogin}
从“./config.json”导入配置
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={isAuthenticated:false，user:null，令牌：
''};
}
注销=（）=>{
this.setState（{isAuthenticated:false，令牌：“”，用户：null}）
};
onFailure=（错误）=>{
警报（错误）；
};
谷歌回复=（回复）=>{
控制台日志（响应）；
const-tokenBlob=new-Blob（[JSON.stringify（{access\u-token:response.accessToken}，null，2）]，{type:'application/JSON'}）；
常量选项={
方法：“POST”，
正文：tokenBlob，
模式：“cors”，
缓存：“默认”
};
取（'http://arrangement-server.herokuapp.com/login，选项）。然后（r=>{
const-token=r.headers.get（'x-auth-token'）；
r、 json（）。然后（用户=>{
如果（令牌）{
this.setState（{isAuthenticated:true，user，token}）
}
});
})
};
render（）{
让内容=！！this.state.isAuthenticated？
(
认证

{this.state.user.email}
注销
) :
(
);
返回(
{content}
);
}
}
导出默认应用程序

---

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

我已经看过你的代码了。我可以用你的google客户端Id运行它。 因此，在前端，令牌和配置文件详细信息通过“react google login”获得。 问题出在/login api上。此api应为“POST”。 你可以查看我附加的屏幕截图

---

我看到您已经为id和secrets创建了config.json，但忘记删除具有客户端id的提交。不应该在代码中提交configId:p

因此，使用react库react google登录的前端从google服务器获取访问令牌。因此后端端不需要获取访问令牌。前端需要通过post请求将访问令牌提供给后端

/login路由动词应为POST