如何在react和express中检查用户是否被认证，节点使用oauth2

Question

我一直在看关于这个话题的其他问题，但我似乎不知道怎么做才能实现我的问题。

我一直在使用Strava api，它使用OAuth 2.0。它遵循这个过程

1. 点击连接按钮
2. 然后重定向用户到数据权限页面
3. 在授予权限后，然后返回用于检索访问令牌的一次性代码，然后用户被重定向到开发人员提供的redirect_uri
4. 我将用户重定向到我的另一个api端点，该端点成功检索了访问令牌

检索访问令牌工作，然后将访问令牌设置为cookie。这就是我检查用户是否连接到Strava的方法。

问题发生在这里。我使用window.open()在按钮单击后重定向到启动OAuth 2进程的后端路由。这就是我的问题发生的地方，所以我想在前端使用上下文钩子，所以我尝试更改为axios请求而不是窗口。打开，但我得到一个cors错误，由于无法访问Strava cors

最初我只是检查res.cookie是否存在于后端，然后将它们重定向到经过身份验证的页面，但我想使用私有路由。因为窗口。open不会返回任何我无法更新和检查上下文以允许用户访问私有路由的内容。

有没有更好的结构或方法让我在没有window.open()的情况下执行这个过程

下面的代码:

主页:

function HomePage() {

const stravaAuth = async (e) => {


window.open("http://localhost:8800/api/auth/strava/callback", "_self");
// const res = await axios.get("http://localhost:8800/api/auth/strava/redirect");
// console.log("res = ", res.data);  
};
return (
<div className="App">
<button onClick={stravaAuth}>Connect to strava!</button>
</div>
);
}

export default HomePage;

后端:

let accecssToken;
let athleteID;
async function getDataPromise() {
const link = `https://www.strava.com/api/v3/activities?access_token=${accecssToken}`;
console.log("Link = ", link);
const response = await axios.get(link);
console.log("Response = ", response.data[0]);
return response.data;
}
export const stravaActivities = async (req, res) => {
const data = await getDataPromise();
console.log("data = ", data);
return res.json(data);
};
export const stravaCallback = async (req, res) => {
const client_id = process.env.CLIENT_ID;
const scope = process.env.SCOPE;
const redirect_uri = process.env.REDIRECT_URI;
res.redirect(
`http://www.strava.com/oauth/authorize?client_id=${client_id}&response_type=code&/exchange_token&approval_prompt=force&scope=${scope}&redirect_uri=${redirect_uri}`
);
const accessCode = req.code;
console.log("One time code = ", accessCode);
return res.status(200);
};
export const stravaRedirect = async (req, res) => {
const url = req.url;    
console.log("url = ", url);
const accessCode = req.query.code;
console.log("One time code = ", accessCode);
const isAuthenticated = false;
const link = `https://www.strava.com/api/v3/oauth/token?client_id={client_id}&client_secret={client_secret}&code=${accessCode}&grant_type=authorization_code`;
try {
const response = await axios.post(link);
console.log("response = ", JSON.stringify(response.data));
console.log("access token = ", response.data.access_token);
accecssToken = response.data.access_token;
athleteID = response.data.athlete.id;
res.cookie("Token", accecssToken);
return res.json(response.data);
} catch (error) {
console.log(error);
}
res.send(accecssToken);
// if (res.cookie !== null) {
//   res.redirect("http://localhost:3000/Activities");
// } else {
//   res.redirect("http://localhost:3000");
// }
};

Answer 1

当您使用自己的服务器时，您应该不会遇到cors的任何问题。如果你的react应用的url与你的节点不同，你可以使用cors库来允许。

无论如何-你的服务器需要accessToken吗?如果没有，你可以把它保存在客户端cookie中，不需要把它传递给服务器，再传回给你的客户端。

通常-当使用第三方认证时，你应该能够在客户端应用程序初始化时发送一些认证要求的请求，然后你可以根据响应将你的客户端重定向到私有路由 login路由。

不要依赖于res.cookie，如果你用它来处理你的凭据，你应该依赖于你的oAuth提供商或你自己的服务器的响应。