美文网首页
GitHub OAuth第三方登录

GitHub OAuth第三方登录

作者: 西界__ | 来源:发表于2022-04-05 18:24 被阅读0次

    GitHub OAuth 第三方登录示例教程 - 阮一峰的网络日志 (ruanyifeng.com)

    概述

    前面介绍了OAuth的详细概念知识。很多网站登录时,允许使用第三方网站的身份,这称为"第三方登录"。

    image.png

    下面就以 GitHub 为例,写一个最简单的应用,演示第三方登录。

    第三方登录的原理

    所谓第三方登录,实质就是 OAuth 授权。用户想要登录 A 网站,A 网站让用户提供第三方网站的数据,证明自己的身份。获取第三方网站的身份数据,就需要 OAuth 授权。

    举例来说,A 网站允许 GitHub 登录,背后就是下面的流程。

    1. A 网站让用户跳转到 GitHub。
    2. GitHub 要求用户登录,然后询问"A 网站要求获得 xx 权限,你是否同意?"
    3. 用户同意,GitHub 就会重定向回 A 网站,同时发回一个授权码。
    4. A 网站使用授权码,向 GitHub 请求令牌。
    5. GitHub 返回令牌.
    6. A 网站使用令牌,向 GitHub 请求用户数据。

    应用登记

    一个应用要求 OAuth 授权,必须先到对方网站登记,让对方知道是谁在请求。

    所以,你要先去 GitHub 登记一下。当然,我已经登记过了,你使用我的登记信息也可以,但为了完整走一遍流程,还是建议大家自己登记。这是免费的。

    访问这个网址,填写登记表。也可以查看一下GitHub的文档

    image.png image.png

    接着就能看见我们应用

    • Client ID
    • Client secrets

    记得保存。

    操作流程

    GitHub Authorizing OAuth Apps Docs

    使用的是OAuth的授权码方式授权。

    The web application flow to authorize users for your app is:

    1. Users are redirected to request their GitHub identity
    2. Users are redirected back to your site by GitHub
    3. Your app accesses the API with the user's access token

    为您的应用程序授权用户的 Web 应用程序流程是:

    1. 用户被重定向以请求他们的 GitHub 身份
    2. 用户被 GitHub 重定向回您的站点
    3. 您的应用使用用户的访问令牌访问 API

    请求用户的 GitHub 身份

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

    当您的 GitHub 应用程序指定一个login参数时,它会提示用户使用他们可以用于登录和授权您的应用程序的特定帐户。

    姓名 类型 描述
    client_id string 必填注册时从 GitHub 收到的客户端 ID 。
    redirect_uri string 您的应用程序中的 URL 将在授权后发送用户。请参阅下面有关重定向 url的详细信息。
    login string 建议用于登录和授权应用程序的特定帐户。
    scope string 以空格分隔的范围列表。如果未提供,scope则默认为未授权应用程序任何范围的用户的空列表。对于拥有应用程序授权范围的用户,用户将不会看到带有范围列表的 OAuth 授权页面。相反,流程的这一步将自动完成用户为应用程序授权的范围集。例如,如果用户已经执行了两次 Web 流,并且已经授权了一个具有范围的user令牌和另一个具有repo范围的令牌,则不提供 a 的第三个 Web 流scope将接收具有userrepo范围的令牌。
    state string 一个不可猜测的随机字符串。它用于防止跨站点请求伪造攻击。
    allow_signup string 在 OAuth 流程期间,是否会为未经身份验证的用户提供注册 GitHub 的选项。默认值为true. false在政策禁止注册时使用。
    image.png

    启动项目,访问localhost:8080/点击超链接之后,就会要登录GitHub账号。

    image.png

    接着就会对其进行授权。

    用户被 GitHub 重定向回你的站点

    如果用户接受您的请求,GitHub 将重定向回您的站点,其中包含一个临时code的代码参数以及您在上一步中提供的state参数状态。临时代码将在 10 分钟后过期。如果状态不匹配,则第三方创建了请求,您应该中止该过程。

    也就是重回到我们的站点,也就是发送了/localhost:8080/oauth/redirect(自定义),并且携带了code

    将此交换code为访问令牌:

    POST https://github.com/login/oauth/access_token
    
    姓名 类型 描述
    client_id string 必需的。您从 GitHub 收到的 OAuth 应用程序的客户端 ID。
    client_secret string 必需的。您从 GitHub 收到的 OAuth 应用程序的客户端密码。
    code string 必需的。您收到的作为对步骤 1 的响应的代码。
    redirect_uri string 授权后发送用户的应用程序中的 URL。

    默认情况下,响应采用以下形式:

    access_token=gho_16C7e42F292c6912E7710c838347Ae178B4a&scope=repo%2Cgist&token_type=bearer
    

    如果您在Accept标头中提供格式,您还可以接收不同格式的响应。例如,Accept: application/jsonAccept: application/xml

    Accept: application/json
    {
      "access_token":"gho_16C7e42F292c6912E7710c838347Ae178B4a",
      "scope":"repo,gist",
      "token_type":"bearer"
    }
    
    Accept: application/xml
    <OAuth>
      <token_type>bearer</token_type>
      <scope>repo,gist</scope>
      <access_token>gho_16C7e42F292c6912E7710c838347Ae178B4a</access_token>
    </OAuth>
    
    image.png

    使用访问令牌访问API

    访问令牌允许您代表用户向 API 发出请求。

    Authorization: token OAUTH-TOKEN
    GET https://api.github.com/user
    

    Authorization: token OAUTH-TOKEN请求头设置参数(token后面有空格)

    image.png

    代码完成,此时首页点击超链接之后就会得到GitHub的用户信息Json数据。

    image.png

    显示效果使用了Json浏览器插件。

    到此为止大功告成~~

    代码地址

    https://gitee.com/kylincw/github-oauth-demo

    相关文章

      网友评论

          本文标题:GitHub OAuth第三方登录

          本文链接:https://www.haomeiwen.com/subject/ekaksrtx.html