Github Appの遊び方を詳しく理解する

以前、Github issuesを使用してブログプラットフォームを構築した際、Githubのライセンスを取得し、APIを呼び出す方法を検討したことがあります.その後、簡単なアカウントパスワードとTokenの方法を選択しました.しかし、このような操作は依然として面倒で、第三者のページにアカウントのパスワードを入力するのはいつも安全ではないという読者のフィードバックがある.その後、研究を経て、やっとGithub Appというもっと優雅な方法を見つけた.
Githubアプリとは
この質問に答えるには、公式文書の言い方を直接適用することができます.
GitHub Apps are first-class actors within GitHub. A GitHub App acts on its own behalf, taking actions via the API directly using its own identity, which means you don't need to maintain a bot or service account as a separate user.
簡単に訳すと、Github AppはGithubが提供する認証情報を通じてGithub APIを呼び出すことができる.
注意深い読者は、Githubが「OAuth App」というものを提供していることを発見します.その使用方法はGithub Appと非常に似ています.最大の違いは、OAuth Appが取得した権限が固定で読み取り専用で、ユーザーは固定されたデータしか読めず、データを修正できないことです.一方、Github Appは、Githubが提供するすべての機能権限をほとんど取得することができ、取得した権限は「読み取り専用」、「読み取り可能」、「アクセス禁止」に設定することができ、権限の権限の粒度はより細かくなる.
いくつかの操作に対する権限を取得した後、これらの権限を使用して、サードパーティのGithubクライアントなどの独立したAppを構築することができます.これもGithub Appの実用的な点です.
サードパーティ登録の原理
前述したように、Github Appは、ユーザーがサードパーティのページでアカウントパスワードやTokenの操作を入力することを免除してライセンスを完了することができますが、どうすればいいのでしょうか.はっきり言って、OAuthログインの方式でもありますが、Tokenを取得する方式を「ユーザー入力」から「Github提供」に変えただけです.
このようなログイン方法の流れについて説明します.

AサイトはGithubの承認ページにジャンプします.

Githubライセンスページはユーザーに「Aサイトが以下の権限を取得することを許可するかどうか」を尋ね、ユーザーは「許可」をクリックし、ライセンスコードを取得する.

GithubライセンスページはAサイトにリダイレクトし、URLにライセンスコードを添付します.

AサイトはURLの認証コードを通じてGithubにTokenを取り戻します.

AサイトはこのTokenを使用してGithub APIを呼び出します.

上記の手順を完了するには、まずGithub Appを登録する必要があります.
Githubアプリの登録
Githubホームページにアクセスし、ユーザーのアイコンをクリックし、Setting/Developer settings/Github Appsを見つけ、「New Github App」をクリックすると、編集画面に入ります.
名前(ここではSOMEONE:BLOG)、説明、ホームページURLを順に記入した後、取得許可後のコールバックアドレスをUser authorization callback URLに記入し、Permissionsに使用するAPIの読み書き能力を設定することが重要です.このアプリを自分でしか使えないようにするには、デフォルトのOnly on this accountを使用します.そうしないと、Any accountを選択し、最後にCreate Github Appをクリックします.
操作に成功すると、このアプリの情報が表示されます.
Client IDとClient secretはこのアプリケーションのアイデンティティ識別コードであり、メモする必要があります.
Githubアプリの登録が完了したら、サードパーティのサイトがこのアプリのClient IDを使ってGithubのライセンスコードを探す必要があります.
認証コードの取得
サードパーティのWebサイトで認証コードを取得するには、ページをGithub認証ページにジャンプさせるだけで、Client IDとRedirect URLの2つのパラメータをURLに携帯する必要があります.

const CLIENT_ID = 'app   client id'
const REDIRECT_URL = 'app   redirect_url'

location.href = `https://github.com/login/oauth/authorize?` + 
`client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}`

ジャンプすると、Githubはユーザーにこのアプリにいくつかの権限を取得することを許可するかどうかを尋ねます.
ユーザが決定すると、認証コードを持って所定のコールバックアドレスにリダイレクトされます.
このとき、サードパーティのページ(ここではlocalhost:8080)はすでにライセンスコードを取得しており、次にこのライセンスコードとアプリのClient IDとClient secretでTokenに両替する必要があります.
Tokenに両替
Tokenを両替するコードは次のとおりです.

router.post('/oauth', async function (ctx, next) {
  const { clientID = CLIENT_ID, clientSecret = CLIENT_SECRET, code } = ctx.request.body
  const { status, data } = await axios({
    method: 'post',
    url: 'http://github.com/login/oauth/access_token?' +
    `client_id=${clientID}&` +
    `client_secret=${clientSecret}&` +
    `code=${code}`,
    headers: {
      accept: 'application/json'
    }
  }).catch(e => e.response)
  ctx.body = { status, data }
})

ドメイン間制限のため、この部分のコードはサービス側で実現しなければならない.言い換えれば、Aサイトがライセンスコードを取得した後、このサービス側に送り、サービス側がTokenを取得した後、再びAサイトに戻る必要がある.
Aサイトはサービス側から戻ってきたTokenを入手した後、Headerを設定することでGithub APIを呼び出す際に使用することができます.

'Authorization': `Bearer ${Token}`

これまではほぼOKだったが、もう一つ大きな問題は、現在のTokenが入手したデータが「読み取り専用」であり、あるGithub倉庫に対して提出や修正の操作ができないことである.これは、このGithubアプリが倉庫にインストールされていないためであり、OAuthアプリとは最大の違いである.
Githubアプリのインストール
私のブログプラットフォームでjrainlau.github.ioの例として、ユーザーがAPIを通じてあるissueにコメントを出すなどの操作をしたい場合は、この倉庫に私のGithubアプリをインストールする必要があります.
Githubアプリの編集ページSetting/Developer settings/Github Apps/SomeONE:BLOGに入り、左側のInstall Appを見つけて、アカウントを選択してインストールします.
アカウントの下にあるすべての倉庫を選択するか、ある倉庫だけを選択してこのアプリを使用することができます.ライセンスをクリックすると、Githubアプリがインストールされます.このとき,許可された倉庫を介してユーザがAPIを介して読み書き操作を行うことができるようになった.
ブログプラットフォームでは、このアプリを通じてコメントしたユーザーは、その外観上の体現にもGithubアプリから表示されます.
参考資料

GitHub OAuthサードパーティログイン例チュートリアル-チェン1ピーク