node.js - OAuth授权后如何将jwt令牌发送给客户端?
问题描述
我正在尝试使用 GitHub OAuth 对用户进行身份验证,而对于普通用户,我正在使用 jwt 令牌。
在我的流程中,用户按下“使用 github 登录”按钮,然后按照 Github 文档 - 用户重定向到 github 网络以选择他的帐户。
所以这是我客户端的主要代码:
function SocialLogin(props) {
const githubAuth = async (e) =>{
e.preventDefault()
const githubOAuthURL = 'http://localhost:5000/api/oauth/github';
let githubTab = window.open(githubOAuthURL, '_self');
githubTab.focus();
}
return (
<div>
<div className="right-box-inner"></div>
<div className="wrap-buttons">
<div className="signwith">Sign in with Social Network</div>
<button onClick={githubAuth} className="social github"><i className="fab fa-github"></i> Log in with Github</button>
</div>
</div>
)
}
在我的服务器端,客户端请求的路由“api/oauth/github”是:
router.get('/github', async (req,res) => {
try{
res.redirect('https://github.com/login/oauth/authorize/?client_id='+config.get('githubClientId'))
}
catch(err){
console.log(err.response)
}
})
所以在https://github.com/login/oauth/authorize/?client_id='+config.get('githubClientId')被执行之后,并且正确地选择了他的帐户,回调 url 正如我在我的应用程序设置中定义的那样githubaccount,执行:
router.get('/github/callback', async (req,res) => {
const {query} = req;
const code = query.code;
try{
if(!code)
return res.status(404).json({msg : 'Autherization failed'})
else{
const gitAuthDetails = {
client_id: config.get('githubClientId'),
client_secret: config.get('githubSecret'),
code: code
}
const headers = {
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "*",
}
}
const response=await axios.post('https://github.com/login/oauth/access_token',gitAuthDetails,headers)
access_token=response.data.split('=')[1].split('&')[0]
const userResponse=await axios.get('https://api.github.com/user',{ headers: { Authorization: 'token ' + access_token } })
//Lets asssume that i store here a new user to my DB with the all github details e.g username, email ...
// and create a payload for jwt.
// Now i want to generate new JWT for the new user , and problem is here. to where i need send my token?
// there is any function in my client side that listening and waiting for response.
jwt.sign(
payload,
config.get('jwtSecret'),
{expiresIn:360000},
(err,token) => {
if(err) throw err;
//What i need to do with my token?
res.redirect('http://localhost:3000/dashboard')
}
);
}
}
catch(err){
console.log(err)
res.redirect('http://localhost:3000/login')
}
})
因此,正如我在代码中描述的那样,我的令牌被困在这里,我想将它发送到客户端,并将我的令牌存储到 localStorage。
一些建议?
解决方案
将令牌存储在本地存储中不是最佳做法,因为它不安全。如果您有后端 API,最好使用 OAuth 2.0 授权代码流来确保访问令牌的安全性。
这需要使用 OAuth 服务器 (github) 通过登录页面获取授权码。然后将代码传递给您的 API,并在更受信任的“反向通道”(在您的 API 和 OAuth 服务器之间)交换用于身份验证的实际访问令牌。OAuth 服务器会知道您是谁,因为您将使用您的 ClientId 和 ClientSecret 来查询令牌(在 javascript 中存储 ClientId 和 ClientSecret 也是不安全的)
这意味着令牌将存储在您的服务器上,您需要在 API 上提供端点以获取所需的数据。
这是一个视频,它很好地解释了这一点。
推荐阅读
- php - PHP 7.2.23 MongoDB\Driver\Manager 数组集群返回空
- sql - 替换oracle数据库值范围内的字符
- c++ - 是否可以限制 C++ 17 并行“for_each”的线程数?
- python - H2O 以不同的方式解析文件类型
- c - 将字符串数组传递给在所有级别下施加 const-ness 的函数的最佳方法
- python - 如何针对烧瓶中的 jsonschema 验证 json?
- c# - 使用 Jodit WYSIWYG 和 .NET 上传图像
- javascript - 使用 Radio 值设置类背景颜色?
- android - 怎么可能收到收取 0 美元的订单?谷歌开发者控制台
- python - 在 Python 中绘制函数性能(计算速度)