尝试检索刷新令牌时，Google OAuth2 + react-google-login：“redirect_uri_mismatch

Question

你好吗？

我使用react-google-login在前台进行登录。

这是我的登录按钮设置：

<GoogleLogin
    accessType="offline"
    clientId={google.client_id}
    cookiePolicy="single_host_origin"
    onSuccess={handleLogin}
    onFailure={handleLoginFail}
    prompt="consent"
    responseType="code"
    scope="email profile https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/calendar.events.readonly openid"
    render={(_props) => (
        <Button className="google-login-btn" onClick={_props.onClick}>
            {props.buttonText} <GoogleIcon className="google-icon" height="20px" width="20px" />
        </Button>
    )}>
</GoogleLogin>

这工作得很好，我成功地收到了来自谷歌的authorization_code。问题是当我试图为用户获取刷新令牌时。

这是我用来检索刷新令牌的代码：

const { client_id, client_secret, redirect_uri } = require('../config').google;

export async function GetRefreshToken(code) {
    try {
        const data = new URLSearchParams({
            code,
            client_id,
            client_secret,
            grant_type: 'authorization_code',
            redirect_uri
        });

        const headers = {
            'Content-Type': 'application/x-www-form-urlencoded'
        };

        const response = await axios.post('https://oauth2.googleapis.com/token', data, { headers });
        const parsedResponse = JSON.parse(response.data);

        if (parsedResponse.refresh_token) return parsedResponse;
        else return null;
    } catch (err) {
        console.error(err);
        throw err;
    }
}

这是我收到的错误：

{
  "error": "redirect_uri_mismatch",
  "error_description": "Bad Request"
}

我的redirect_uri设置为http://localhost:3000/，并且我已经确认它在我的Google项目中配置正确。

这里我漏掉了什么？

Answer 1

好吧，我终于找到了一个变通办法。

将redirect_uri设置为postmessage可以做到这一点。

为什么？我还在想..。但是它起作用了！