likes
comments
collection
share

三方应用登录接入github方案

作者站长头像
站长
· 阅读数 13

流程概览

三方应用登录接入github方案

GitHub采用的是OAuth 的方式授权

OAuth 授权原理步骤

  • 网站携带 ClientID 跳转到 GitHub 授权页面
  • 用户授权后，GitHub 携带授权码重定向回到网站回调页面
  • 网站通过授权码向 GitHub 请求用户令牌(Token)（验证授权码合法性）
  • 网站通过用户令牌请求用户信息(或其它接口)

Github三方认证流程

1.首先需要在github上创建一个OAuth App：OAuth App管理地址

三方应用登录接入github方案

注意最后一个回调地址(前/后端均可)，当用户点击授权后，GitHub 会携带 授权码（code） 回调/重定向到这个地址。这个地址可以是任意合法的地址，比如http://localhost:8080/ 在本地开发调试的使用。回调时，GitHub 会追加一个名为code的查询参数到刚刚指定的回调地址中。（这个名为code的参数是hardcode的）比如：blog.twofei.com/login?type=… 注意后面的code 部分。

另外，由于这是一个追加到 URL 中的查询参数，而且很明显是通过浏览器重定向回调的，所以这是一个 GET 请求，不是 POST。

创建好后，就可以拿到 Client ID 和对应的 Client Secret，同时还可以设置一个头像。Client ID 可以公开，Client Secret 请不要泄露。

2.首先我们用户访问网站首页，点击登录时候进行的是自己逻辑的构造，这里会将那些client ID 和redirect_uri进行一个处理，然后才会发送到Github上github.com/login/oauth… （这些信息文档github三方登录文档里都有写到），进行验证授权，这个时候，Github会回调我们的redirect-uri，携带code信息。

在三方应用登录处点击github登录，请求路径类似：


https://github.com/login/oauth/authorize?

  client_id=xxxxxxxxxxxxxxxxxxxxxxxx&

  redirect_uri=xxxxxxxxxxxxxxxxxx

client_id:创建OAuthApp后会返回的client_id

redirect_uri:在创建OAuthApp时候填写的回调地址

3.访问授权后，github会询问用户是否授权并请求数据

三方应用登录接入github方案

用户同意授权， GitHub 就会跳转到redirect_uri指定的跳转网址，并且带上授权码，跳转回来的 URL 就是下面的样子。


http://localhost:8080/oauth/redirect?

  code=xxxxxxxxxxxxxxxxx

后端收到这个请求后，就拿到了授权码（code），接下来后端只需要通过请求取到code的值即可

4.拿到必备参数后，向Github请求令牌

GitHub 的令牌接口POST github.com/login/oauth… 需要提供三个参数

  • client_id：客户端id，即创建OAuthApp返回的ID

  • client_secret：客户端秘钥，这个创建OAuthApp后同时也会返回

  • code：上一步我们拿到的授权码

5.作为回应，GitHub 会返回一段 JSON 数据，里面包含了令牌accessToken

有了token后，就可以向github请求数据了

上面代码中，GitHub API 的地址是 api.github.com/user ，请求的时候必须在 HTTP 头信息里面带上令牌Authorization: token xxxxxxx

然后，就可以拿到用户数据，得到用户的身份

6.拿到用户身份后，如果本地数据库没有用户信息，就创建用户，有则生成自己的token进行登录

需要配置：

  • 提供一个回调地址（前端）：

在前端发起步骤2向github发起认证后，github会回调并重定向去改地址

  • 在github账号上创建一个OAuthApp,创建后获取参数：

    • clientId
    • clientSecret

前端页面

  • 登录页面

用户进入三方程序选择登录进入登录页面

选择github登录：发起请求GET https://github.com/login/oauth/authorize

并携带参数：client_id 与 redirect_uri两个参数

三方应用登录接入github方案

  • 重定向页面：

用户在登录页面选择使用github登录后，会跳转到github验证

三方应用登录接入github方案

验证通过后，会向跳转到重定向页面，并且发起GET请求，携带query参数code

例如我的重定向地址为：http://localhost:8080/oauth/redirect

那么我在github验证通过后会跳转到 http://localhost:8080/oauth/redirect?code=xxxxxxxxxxx 这个页面，需要前端将这个请求的code参数发送给后端，后端认证后会返回 token

后端接口

1.前端重定向后向后端发起带query参数code的请求，后端发起post请求：github.com/login/oauth…

携带参数：

  • code
  • client_id
  • client_secret

请求后获取json内容，拿到access_token参数

发起请求GET：api.github.com/user， 在请求头里携带access_token


curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com/user

判断该用户在三方应用中存不存在，不存在就创建，之后生成自己平台的token返回给前端