github鑑權and使用github-issue api作評論系統

basic auth

每次請求在 headers 中攜帶 Authorization 字段，值爲 Basic + 空格 + base64("username:password")。react

須要在本地保存用戶的帳戶信息例如存入 localStorage。git

OAuth

每次請求在 headers 中攜帶 Authorization 字段，值爲 token + 空格 + accessToken。github

須要在本地保存用戶的 access_token 例如存入 localStorage。json

須要在服務端註冊一個 client app，獲得 client_id 和 client_secret。api

利用 client_id 訪問 /authorize 接口(可能須要聲明 scope)，頁面重定向並獲得 access code。跨域

利用 access code、client_id 和 client_secret 訪問/login/oauth 接口，獲得 access_token。緩存

註冊 OAuth App

鑑權方式這裏選擇 OAuth。markdown

打開 Github -> Settings -> Developer settings -> OAuth Apps -> New OAuth App 註冊一個 app。app

須要注意的是 Authorization callback URL 項：當訪問 /authorize 接口獲取 access code 時，access code 會以 url 參數的形式拼到這個 callback 後面（例如：'saber2pr.top/?code=xxxx'），並將頁面重定向到此 url。cors

訪問/authorize 接口獲取 code 時，必定要帶 scope=public_repo 參數！不能只帶 client_id！

在頁面的 js 腳本中，從 location.href 中解析出 code，而後利用 code 獲取 access_token。

若是使用了 custom domain，獲取 access_token 時可能會涉及到跨域問題，能夠試試 cors-anywhere 方案。

Issue Api

準備一個 repo，在 repo 中開啓一個 issue。每一個 issue 有一個序號，第一個 issue 序號就是 1。

issue 對應的評論 api 是 https://api.github.com/repos/${username}/${repo}/issues/${issue_id}/comments

訪問這個 api 會獲得該 issue 對應的評論。

若是須要能夠帶上 timestamp 時間戳，避免 api 被緩存沒法更新。

GET(獲取評論):

獲取 saber2pr/rc-gitment 倉庫中第一條 issue 的評論

fetch(
  `https://api.github.com/repos/saber2pr/rc-gitment/issues/1/comments?timestamp=${Date.now()}`,
  {
    headers: {
      Authorization: `token ${accessToken}`
    }
  }
).then(res => res.json())
複製代碼

POST(發送評論):

在 saber2pr/rc-gitment 倉庫中第一條 issue 下面添加一條評論，內容是 test from api.

注意 body 格式，{ body: string }

fetch(
  `https://api.github.com/repos/saber2pr/rc-gitment/issues/1/comments?timestamp=${Date.now()}`,
  {
    method: "POST",
    body: JSON.stringify({
      body: "test from api."
    }),
    headers: {
      Authorization: `token ${accessToken}`
    }
  }
)
複製代碼

DELETE(刪除評論):

刪除地址是 commentToDeleteUrl 對應的評論。這個地址可在 GET 請求結果中獲得，每條評論有一個對應的地址。

fetch(commentToDeleteUrl, {
  method: "DELETE",
  headers: {
    Authorization: `token ${accessToken}`
  }
})
複製代碼

for react

github.com/Saber2pr/rc…

具體效果看我博客

saber2pr.top/#/links