本篇要解決的問題
上上一篇使用 GitHub Create Issue 的 API,用的 token 是 Personal Access Tokens,會變成建立 Issue 或是新增留言時,都會是產出 Personal Token 者的帳號。那有沒有辦法讓使用者自行登入 GitHub 帳號後用 API 建立 Issue 或新增 Comment 呢?有的,就是用 GitHub App 的方式來取得登入者的 token。
本篇主要就是示範用 GitHub App 來讓使用者登入後,用使用者的帳號新增 Comment。
本篇所寫的內容是 August 自己蝦摸摸出來的,如果有大大知道更好的方式,歡迎留言提供。
建立 GitHub 登入功能,取得 token
因為使用 App 的方式需要使用者登入 GitHub 帳號,因此頁面上必需要能讓使用者登入。
本篇 Demo 的 GitHub 登入功能用的是 Firebase,詳細的說明及原始碼請看這篇:
Firebase Authentication 第三方登入 – GitHub
取得使用者登入 GitHub 的帳號,原始碼是這樣:
第 6 行 token = credential.accessToken;
就是取得使用者登入後的 token
,token
就放在我們呼 API 時的 header
裡。
新增 GitHub App,填寫 Firebase ID、密鑰
新增 GitHub APP
進到 GitHub 的 Developer settings 頁面,預設是 GitHub Apps 的頁面,點擊右上角的「New GitHub App」:
接著會看到一個表單,把必填的填一填,這邊還用不到 Webhook,「active」可以把勾勾拿掉:
表單下面有一項是「Repository permissions」,這邊要把「Issues」的部份改為「Read & write」:
表單再往下滑,最後一個是要選「Where can this GitHub App be installed?」,如果只是想自己的 GitHub 中使用,就選「Only on this account」,不然就可以選「Any account」:
新增成功後,會進到 App 的頁面,可以看到頁面上會寫一組「Client ID」,像這樣:
Client ID: Iv1.8aeca32aedfe7738
這個 Client ID 要記下來,等等在 Firebase 上會用到。
除了 ID,還需要一組密鑰,按下頁面的「Generate a new client secret」,就會產生一組:
有了 ID、密鑰,我們到 Firebase 上填寫,就可以使用 Firebase 的 GitHub 登入功能。
Firebase 中填寫 ID、密鑰
Firebase 新增好專案後,在「Authentication」的「Sign-in method」中,選擇 GitHub,會看到以下畫面:
先將狀態改為啟用。
用戶端 ID、用戶端密鑰,就是填我們在 GitHub App 頁面上取得的 Client ID、Client secrets。
然後 copy 第三個 input 給的網址,再回到 GitHub App 的頁面上,把網址貼到「Callback URL」的欄位,最後按下儲存,這一步驟就完成了:
安裝 GitHub App
建立好 App,接著就是要安裝,才可以在 GitHub 的專案上使用。
安裝方式很簡單,一樣在 GitHub App 的頁面,左側選單選「Install App」,會看到右側列出我們剛剛新增的 App,按下 Install:
下一步是選擇這個 App 是要安裝在全部的專案上,還是只裝在指定的專案?August 這邊選的是指定其中一個專案。
選好後按下 Install,就安裝完成了。
使用 GitHub API 新增留言及相關套件
使用 API 的部份在上一篇就已經寫過了,這邊不再重覆貼上,麻煩各位棒油到上一篇看就行:
GitHub API:建立 Issue、Comment – API、Personal access tokens
這邊要說明的是用了哪些輔助的套件、Package。
marked
marked 是可以把 Markdown 轉成 HTML 的 Package。
因為 API 回傳 Issue、Comments 的 body 會是 Markdown 的形式,我們丟上網頁時會需要先轉成 HTML。
Day.js
Day.js 是可以 format 日期格式的套件。
Toast UI Editor
Toast UI Editor 是一套簡單、好用的編輯器,主要是可以寫 Markdown,很適合拿來搭配 GitHub Comments 的功能來使用。
本篇製作的 Demo 用的是 Vue.js 的版本:@toast-ui/vue-editor。
以上三個是本篇 Demo 有用到的,使用的程式碼有整理在 GitHub 上,本篇不會一一列出。
Personal Token、GitHub App
August 在寫這二篇時,有整理了一張表,算是這二篇的使用重點,點下圖可以看原大小的圖:
GitHub 當留言版 Demo、原始碼
本篇實作出的 Demo 在這:
https://letswritetw.github.io/letswrite-github-api-issue-create-app/
歡迎大家在 Demo 上留言,如果想刪除也可以點選留言上的「時間」,是超連結,會連到 GitHub Comment 上,是帳號擁有者就可以刪除。
原始碼整理在這,取用前請先對本篇按讚或是分享,給 August 一點持續寫作的動力,願意請喝杯咖啡的話更歡迎:
https://github.com/letswritetw/letswrite-github-api-issue-create-app