OAuth2 for Apps Scriptライブラリはどうやってアクセストークンを取得するのか

photo credit: Theen … Not a vertifcal lift via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

GASによるマネーフォワードクラウド請求書APIの操作についてできる限りていねいに紹介をするシリーズをお送りしています。

前回の記事はこちら。

OAuth2 for Apps Scriptライブラリはどうやって認証用URLを作成しているのか

GASによるマネーフォワードクラウド請求書APIの操作についてできる限りていねいに紹介をするシリーズです。今回は、OAuth2ライブラリがどうやって認証用URLを作成しているのかを解説します。

OAuth2ライブラリがどうやって認証用URLを作成しているのかについてお伝えしました。

今回は、ユーザーが許可をしたあと、OAuth2 for Apps Scriptライブラリはどうやってアクセストークンを取得するのかについてお伝えします。

では、行ってみましょう！

これまでのおさらい
マネーフォワードクラウド請求書APIのアクセストークン取得まで
まとめ
連載目次：【初心者向け】GASでマネーフォワード請求書API

これまでのおさらい

前回までマネーフォワードクラウド請求書APIへの認証とアクセストークンの発行について、詳しく解説をしてきました。

OAuth2 for Apps Scriptライブラリとそれを用いたスクリプトを用いて、認証を行うわけですが、その際に実行するためのスクリプトが以下のauthorize関数でした。

/**
 * 認証を行いアクセストークンをログ出力する
 */
function authorize() {
  const service = getMFInvoiceService_();
  const authorizationUrl = service.getAuthorizationUrl();
  console.log(authorizationUrl);
}

この関数を実行すると、以下の認証用URLが得られます。

https://invoice.moneyforward.com/oauth/authorize?client_id=[client_id]&response_type=code&redirect_uri=[redirect_url]&state=[state]scope=[scope]

そして、そのURLをブラウザでアクセスすると、以下のマネーフォワードクラウド請求書API認証用の画面が開き、「許可」をクリックすることで認証が完了します。

今回は、この許可をクリックした後に何が行われているかについてお伝えしていきます。

マネーフォワードクラウド請求書APIのアクセストークン取得まで

では、マネーフォワードクラウド請求書APIのアクセストークン取得までの流れを解説していきます。

許可をクリック後のリダイレクト

マネーフォワードクラウド請求書API認証画面で「許可」をクリックすると、リダイレクトURLにリダイレクトされます。

このリダイレクトURLは、アプリケーション作成時に登録していた、以下の形式のURLでしたね。

https://script.google.com/macros/d/{スクリプトID}/usercallback

そして、このリダイレクト時に「認可コード」と呼ばれる10分間だけ有効なコードcodeと、認証用URLに渡したstateパラメーターが付与されて渡されます。

項目	値
code	認可コード
state	stateパラメーター

ですから、実際には以下のようなURLにリダイレクトされていることになります。

https://script.google.com/macros/d/{スクリプトID}/usercallback?code=[code]&state=[state]

アクセストークンのリクエスト

GASは、このリダイレクトを受けると、今度はトークンURLに「アクセストークンをくださいな」というリクエストを送ります。

トークンURLは以下のURLで、サービス作成時にsetPropertyStoreメソッドで設定していましたね。

https://invoice.moneyforward.com/oauth/token

このトークンURLへのリクエストの際に、以下のパラメーターも渡します。

項目	値
client_secret	アプリケーション作成時に発行されたclient_secret
redirect_uri	リダイレクトURL（アプリケーション作成時に入力したものと同じ）
grant_type	authorization_code
code	認可コード

このときに、正しいパラメーターが渡されていれば、マネーフォワードクラウド請求書APIから無事にアクセストークンが送られてきます。

送られてきたアクセストークンは、サービス作成時にsetPropertyStoreメソッドで以下に格納すると指定していたとおり、ユーザープロパティという、そのユーザーだけがアクセス可能な格納庫に補完されます。

PropertiesService.getUserProperties()

これで、このアクセストークンはそのユーザーであればいつでも取り出せるということになります。

（厳密には、アクセストークンの有効期限は30日間で切れますので、リフレッシュトークンを用いてアクセストークンを再取得をします。しかし、その処理もOAuth2ライブラリが担ってくれています。）

認証とアクセストークンの取得の完了

認証とアクセストークンの取得が完了すると、以下のauthCallback_関数が実行されます。

この関数名も、サービス作成時にsetCallbackFunctionメソッドで設定していたものでしたね。

/**
 * OAuth認証の処理終了時に呼び出される関数、認証の成否をWebページとして表示する
 */
function authCallback_(request) {
  const service = getMFInvoiceService_();
  const isAuthorized = service.handleCallback(request);
  if (isAuthorized) {
    return HtmlService.createHtmlOutput('Success! You can close this tab.');
  } else {
    return HtmlService.createHtmlOutput('Denied. You can close this tab');
  }
}

無事に認証が完了しているかどうかを、サービスのhandleCallbackメソッドにより確認して成功していれば、画面に「Success! You can close this tab.」と表示します。