一张图，走一遍 OAuth，

一张图让你看懂 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. 点击授权

---自动重定向
其实这里重定向过后要并未处于登录状态，保持登录状态，可以基于无感登录来进行一次登录没有绝对的安全