お疲れ様です。おれちゃんでござる！
今回は自動化を設置するためGitHubのリポジトリ作成も自動にするポータルを作ろうと思っててGitHubAPIと取り掛かりました。
なんでGitHubリポジトリ作成用のポータル作るの？
確かにGitHubだけでリポジトリは簡単に作れるのですが他のブランチ保護方針やWebhookなどは個別に作成する必要があります。
個別にわざわざ作らなければならない作業だからこそ自動化に完璧な候補者です。
GitHub OauthApp
Github APIを利用するために認証をしないといけないです。そのためにOauthAppを作らないといけないです。OauthAppでClientIDとClientSecretが作成されてるのでその二つの変数でGitHubAPIを使えます。
GitHub OauthApp を作成するにはGithubにログインしてプロファイルにて
Settings＞Developper Settings＞Oauth Apps へあたらしいAppを作成できます。
OauthApp作成画面
GitHub API 認証
Github APIはREST APIなので標準的に使われますが多くの人に使われてるGitHubだからセキュリティは高いということです。
Github API 認証の流れ
ポータルを作るためReactJSを選びました。でもGithub APIで何かを作る前にはGitHubでログインしないといけないです。
まずはフロントエンドからClientIDをGithub.comであげてコードが手に入ります。
コードをサーチバーから取得して
…
そしてそのコードでアクセストークンを取得できます。
フロントエンドからサーバーへのリクエストでClientSecretでそのアクセストークンを取得できます。
何回わざわざアクセストークンを取得しないようにlocalStorageに保管する。
前に張った図と従って、Github.comを直接に接続することより、リクエストは全部サーバーから通ります。そうするとClientSecretなどな繊細情報はブラウザコンソルから見れない
以上はサーバー（バックエンド）のリクエスト。サーバーはGithub.comへのリクエストをする。このリクエストでやっとGithubでログインができ、アクセストークンを取得した上でGithubAPIを使えます。
例えばリポジトリを作成することができます。
リポジトリ作成リクエスト
先ずはフロントエンドのページで作成したいリポジトリの情報を聞き、それを変数としてJavascriptへ通します。
フロントエンド側でリポジトリ作成ポータルの関数を作り、サーバー側もこの関数を受けGithub.comへのリクエストを作成すること関数も作ります。
フロントエンド側 サーバー側
この二つのリクエストでGitHubのリポジトリ作成できました。
最後に
このようにGitHubへの様々なリクエストができ、自動化的に色んな動作ができます。
今回はリポジトリを作成したんですけどWebhookもSecretも同時に追加できます。
また次お楽しみにしてね ^^💦
