Github GraphQL apiを通した、組織の情報取得方法
Github GraphQL apiを通した、組織の情報取得方法
課題
github GrapyQL apiを利用するためには、OAuth tokenが必須。
今回、組織のアカウントのTokenを取得し、組織に属するメンバーの情報を取得したい。
事前準備
-
Vite + React + tsをインストール
npm crate vite@latest画面表示に従い、設定を完了させる。
-
プロジェクト内に移動
cd <YOUR_PROJECT_NAME> -
PORT番号の指定
packages.jsonファイルの中にある、divコマンドを修正"dev": "PORT= <PORT_NUM> vite"Vite はできないが、Webpackであれば、.envファイルで以下のように記述するだけで設定できるそう。
PORT= <PORT_NUM> -
テスト起動
npm run dev
実践
-
Github APP を作成し、組織にインストールさせ、ライブラリーを通して Token を取得する
参照
Github Appの作成から、Token取得方法
ライブラリーを通したToken取得方法条件
Github Appを作成する際、Membersのみonly-readにする。
それ以外の設定はすべて、no-access。注意
今回、Github Appを通し取得したプライベートキーを、プロジェクトルートの上に格納した。
理由：ローカルパスの指定がうまくいかず、カレントディレクトリで指定した。（本来は、別の場所に格納するのがふさわしい・・・）Token取得に成功した場合、.envファイル（プロジェクトルート）に格納
VITE_REACT_APP_GITHUB_ORGANIZATION_ACCESS_TOKEN = <YOUR_TOKEN_KEY>注意
なぜか、変数名の頭に、VITE_を付けないと、アクセスできない
ちなみに、VITE_はコンソールからアクセスできてしまうので、他の手段を考える必要がありそう。 -
Apollo Clientのインストール
参照
Apollo Client アプリケーションを作る準備npm install @apollo/client graphql -
src/App.tsxを修正
本レポジトリに格納されているsrc/App.tsxを参照ください
-
アプリを起動
npm run dev -
ブラウザのコンソールで情報が取得されているか確認
情報が取得されていたら成功！
エラーが発生した場合
・Tokenを取得しなおし、設定しなおす
・Github Appの権限公開設定が間違っているか確認
今回の検証結果
上記のやり方で、成功することができた。
ただ、組織の場合、各ユーザーがそれぞれ自分を「public」に設定しない限り
Tokenを通して情報を取得しても、そのユーザーのnameは取得できない。（idとavatarUrlは取得できた。）
Token格納に関して、いくつかセキュリティ面を考慮した課題があるが、
ひとまず、出来そう。
Discussion