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/，我已经确认它在我的谷歌项目中配置正确。

我在这里错过了什么？

Answer 1

好吧，我终于找到了一个解决方法。

将redirect_uri设置为postmessage就成功了。

为什么？我还在想。。。但它有效！