当サイトはInternet Explorerに対応しておりません。より性能のよい、下記のようなブラウザを使ってみませんか?

IE in the grave
記事一覧に戻る

LambdaでGithubのアクセストークンを取得する

アクセストークンの取得

OAuthをWebアプリに実装する際、まずアクセストークンを取得する必要があります。

GoogleやFacebookの場合、SDKを使ってフロントエンド側だけで取得できます。 下記のような便利なコンポーネントもあり、頻繁に更新されています。

ところが、Githubの場合はフロントエンド側だけではトークンを取得できません。 サーバが存在することを前提に認証を行う枠組みになっているためです。

GithubのOAuth認証の動き

Githubの場合は、認証画面からリダイレクトで戻ってきたとき、トークンではなくcodeというものを渡されます。 基本的には、このcodeを下記のAPIにPOSTしてやれば、トークンが取得できます。

POST https://github.com/login/oauth/access_token

ところが、このエンドポイントにはCORSが設定されていないため、フロントエンドから取得するとエラーがでます。

サーバ側でcodeをトークンと交換する処理をしなさい、ということなのでしょう。 しかし、Webアプリをサーバレスで運用している場合は、トークンが取得できないということになります。 バッドノウハウで無理矢理取得できないこともないのですが、美しくありません。

Lambdaでアクセストークンを取得

この問題を解決するため、今回はLambda Functionを作成して対応しました。

Githubから受けとったcodeをparamに付与してGETを叩けば、トークンが返ってくるという単純なものです。

Lambdaを使ったGithubのOAuthの流れ

叩く

GET https://your.api.gateway/getToken?code=CODE_FROM_GITHUB

トークン帰ってくる

{ "accessToken": "a1b2c3........" }

なお、CODEを取得するまでの処理は、下記のコンポーネントを使うと便利です。

参考

profile

田村 翔太

Yuuniworks 代表。島根県浜田市を拠点に主にフロントエンド開発のお手伝いをしているフリーランスエンジニアです。React/Vue.jsを用いたSPAの開発や、NodeJSを使ったAPI開発を得意としています。

記事一覧に戻る