12184800004_何建民_oauth.md · 是小民同学呀/软件架构

## 手摸手教你理解OAuth 2.0并实现一个客户端

> 图片绘制：何建民  
>
> 代码编写：何建民  
>
> 参考文章：[阮一峰的网络日志 > 理解OAuth 2.0](https://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html)

### 目录（点击可跳转）

[TOC]

### OAuth2.0是什么？
简单来说，我们平时使用的很多第三方登录并获取头像等信息就是用的`OAuth 2.0`。如我们用`Github`账号登陆`Gitee`

此过程经历了：页面从`Gitee`到`Github`，再从`Github`到`Gitee`的两次页面跳转

### 从上帝视角来看整个流程

> 绘图作者：何建民
<img src="https://images.gitee.com/uploads/images/2021/0311/161042_c7b20f59_5174336.png" width = "100%" alt="图片名称" align=center />

#### 第一步：在Gitee官网点击用Github登录
当你点击用Github登录的小图标时，实际上是向Gitee的服务器发起了一个 `http://www.gitee.com/lead_to_authorize` 的请求，Gitee服务器会响应一个重定向地址，指向Github授权登录

浏览器接到重定向地址 `http://www.github.com/authorize?callback=www.gitee.com/callback`，再次访问。并注意到这次访问带了一个参数是callback，以便Github那边授权成功再次让浏览器发起这个callback请求。

以上整个过程如下图：

> 绘图作者：何建民

#### 第二步：跳转到Github登录页面输入用户名密码，然后点授权并登录
上一步中浏览器接到重定向地址并访问 `http://www.github.com/authorize?callback=www.gitee.com/callback`

`Github`的服务器接受到了`Gitee`访问的`authorize`，在次例中所给出的回应是跳转到`Github`的登录页面，用户输入账号密码点击授权并登录按钮后，一定还会访问`Github`服务器中校验用户名密码的方法，若校验成功，该方法会响应浏览器一个重定向地址，并附上一个`code`（授权码）。由于`Gitee`只关心像`Github`发起authorize请求后会返回一个`code`，并不关心`Github`是如何校验用户的，只要最终的结果是返回给浏览器一个重定向并附上`code`即可，

以上整个过程如下图：

> 绘图作者：何建民

#### 第三步：跳回到豆瓣页面，成功登录
这一步背后的过程其实是最繁琐的，但对于用户来说是完全感知不到的。用户在`Github`登录页面点击授权登陆后，就直接跳转到`Gitee`首页了，但其实经历了很多隐藏的过程。

首先接上一步，`Github`服务器在判断登录成功后，使页面重定向到之前豆瓣发来的`callback`并附上`code`授权码，即 `callback=www.gitee.com/callback`

页面接到重定向，发起`http://www.gitee.com/callback`请求

`Gitee`服务器收到请求后，做了两件再次与`Github`沟通的事，即模拟浏览器发起了两次请求。一个是用拿到的`code`去换`token`，另一个就是用拿到的`token`换取用户信息。最后将用户信息储存起来，返回给浏览器其首页的视图。到此OAuth2.0授权结束。

以上整个过程如下图：

> 绘图作者：何建民

### 实现OAuth 2.0（Golang编程语言为例）

#### 需求
> 我有一个需要登录的应用（Web app)。  
> 用户可以选择使用Github登录。  
> 登录后，显示一个简单的欢迎页面。

#### 登录页面
login.html
```html
<!DOCTYPE html>
<html>
<body>
  <a href="https://github.com/login/oauth/authorize?client_id=89ac6f58f15f658d8dd5&redirect_uri=http://localhost:8080/oauth/redirect">
    Login with github
  </a>
</body>
</html>
```
> `Client ID`: `https://github.com/login/oauth/authorize`是`GitHub`的`OAuth`网关地址。  
> `Client_ID`: `89ac6f58f15f658d8dd5` 这个是我申请的客户端ID。  
> `redirect_uri=http://localhost:8080/oauth/redirect`当用户确认，获取权限后重定向到的该地址。

#### Service端
main.go

启动一个简单的服务
```golang
func main() {
	fs := http.FileServer(http.Dir("public"))
	http.Handle("/", fs)
	http.ListenAndServe(":8080", nil)
}
```

首先，我们从URI中解析出code（授权码）参数
```golang
	// 如: http://localhost:8080/oauth/redirect?code=260f17a7308f2c566725
	err := r.ParseForm()
	code := r.FormValue("code")
```

通过 `clientID`, `clientSecret`, `code` 获取授权密钥
```golang
reqURL := fmt.Sprintf("https://github.com/login/oauth/access_token?client_id=%s&client_secret=%s&code=%s", clientID, clientSecret, code)

req, err := http.NewRequest(http.MethodPost, reqURL, nil)
```

发送Http请求
```golang
res, err := httpClient.Do(req)
defer res.Body.Close()
```

获取到access_token后，我们重定向到欢迎页面
```golang
w.Header().Set("Location", "/welcome.html?access_token="+t.AccessToken)
w.WriteHeader(http.StatusFound)
```

#### 首页
index.html
```html
<!DOCTYPE html>
<html>
<body>
  
</body>
<script>
  // 获取access_token
	const query = window.location.search.substring(1)
	const token = query.split('access_token=')[1]
	
	// 访问资源服务器地址，获取相关资源
	fetch('https://api.github.com/user', {
	  headers: {
      // 将token放在Header中
			Authorization: 'token ' + token
		}
	}).then(res => {
		const nameNode = document.createTextNode(`Welcome, ${res.name}`)
		document.body.appendChild(nameNode)
	})
</script>
</html>
````

此时我们已经完成整个OAuth 2.0的流程了。

是小民同学呀/软件架构

简介

发行版

贡献者

近期动态

是小民同学呀/软件架构 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

是小民同学呀/软件架构