一张图让你看懂 OAuth
BG: React, Ts, Express, Mongodb
1. 首先我们来到这里
2. 然后填写相关信息
3. 接下来我们给前端加个登录icon
4. 接下来添加一个点击事件跳转至授权界面
jsx
/**
* OAuth
*/
const githubOAuth = () => {
//提前准备好数据,state前端后端都可以生成,反正验证state的时候后端得有就行
const { url, client_id, redirect_uri, state } = OAuthConfig?.github
console.log(`${url}? client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&state=${state}`, '@@@@@')
window.location.href = `${url}?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect_uri)}&state=${state}`
}
我们来到这个界面
一旦点击授权后,github就会调用我们之前传入的 redirect_uri 并携带 授权码 code 请求我们的后端接口, 接下来我们去准备一个接口
5. 准备接口
5.1 准备接口
5.2 具体逻辑抽出来,按自己项目规范来,这里我直接省略一些步骤直接呈现主要逻辑
ts
import querystring from 'querystring'
import axios from 'axios'
import listingService from '../service/listingService'
import userService from '../service/userService'
import config from '../config'
import { CODE } from '../constants'
export default {
getAccessToken: async (req: any, res: any) => {
const { code, state } = req.query
//防止csrf
if (state !== config.OAuth.github.state || !code) {
return
}
try {
const {OAuth: {github}, OAuthSecret} = config
const resp = await axios({
method: 'POST',
url: config.OAuth.github.getOAuthTokenUrl,
data: {
client_id: github.client_id,
client_secret: OAuthSecret, // 第一张图中生成的密钥
code // 授权码
},
})
//去 github 拿数据
const { access_token } = querystring.parse(resp.data)
console.log(access_token, '@@@@@@@@@accessToken');
const userDetailResp = await axios({
method: 'GET',
url: github.resource_url,
headers: {
'Authorization': `Bearer ${access_token}`
}
})
console.log(userDetailResp, userDetailResp.status, "@@@@@@@userDetailResp")
//login 为用户名
// 通过获取到的用户信息创建账号并进行关联我这里这展示过程代码,不具体展示
const { data: { login } } = userDetailResp
await userService.increment(login, login, login)
//添加成功(之前无用户)与否(之前有用户)做不同操作
// code
// 生成token
const loginResp = await userService.login(login, login)
if (loginResp) {
// code...
//重定向到应用前端
res.redirect(`${config.OAuth.client_home}?token=${loginResp.token}`)
}
} catch (error: any) {
return console.log(error.message, '@@@@-err')
}
}
}
6. 点击授权
---自动重定向
其实这里重定向过后要并未处于登录状态,保持登录状态,可以基于无感登录来进行一次登录 没有绝对的安全