OAuth 2.0 PlaygroundでOAuth 2.0を動かして理解しよう

2024.02.28

OAuth2.0を動かして確認したい

「OAuth2.0をちょっと勉強したけど、よく分からんから実際動かして確認したい。そんな環境はないんか」
と思ったことはありませんか。 私はあります。
OAuth 2.0を手軽に試せる環境として、GoogleがOAuth 2.0 Playgroundという開発者向けのアプリを提供しています。

※OAuth2.0自体についてはこちらをどうぞ。

Google OAuth 2.0 Playgroundとは

Google OAuth 2.0 Playgroundは、Googleが提供する開発者向けアプリで、OAuth 2.0プロトコルを使用してGoogle APIにアクセスするための認可プロセスを簡単に試すことができます。例えば自分のメールやカレンダーを見る認可をこのアプリに与え、OAuth 2.0のフローを体験し、Google APIへのアクセス権を得るために必要なトークンを取得するプロセスを理解することができます。

OAuth2.0を体験してみる

OAuth 2.0 PlaygroundでOAuth 2.0を体験してみます。 今回試してみるのはOAuth 2.0の理想である Authorization Code Grant フローです。

先にAuthorization Code Grantフローの基本のシーケンス図がこちらです。 シーケンス図にあるStepと、後に出てくるOAuth 2.0 PlaygroundのStepを突き合わせて見ていってみましょう。

Step 1

ではOAuth 2.0 Playgroundにアクセスしてみます。

3つのStepが出てきました。
Step 1にはAPIを選んで認可しろと書いてあります。
まず言われた通り選んでみましょう。 今回はGoogleカレンダーのイベントを取得する認可を行ってみます。

カレンダーのAPI https://www.googleapis.com/auth/calendar.events.readonly を選択し、Authorize APIsボタンを押します。

するとログイン画面にリダイレクトされるのでメールアドレスとパスワードを入力し、ログインします。
すでにログインしている場合は表示されません。
2段階認証を設定している場合はご自分で設定している方法で認証します。

ログインすると、OAuth 2.0 Playgroundにカレンダーの予定を表示する認可を与えるか否かのメッセージが出ます。 許可を押すと、認可サーバーからuser_agentにAuthorization Codeが発行されます。

認可サーバーからuser_agentに対し、Authorization codeが発行されました。 画面左のテキストフィールドにAuthorization codeが表示されています。
通常、Authorization codeはこのように画面に表示されるものではないことに注意です。

Step 2

次にOAuth 2.0 Playgroundにアクセストークンを取得させます。
clientであるOAuth 2.0 Playgroundは、アクセストークンを取得するために先ほどのAuthorization codeを必要とするので、user_agentから渡します。 そしてOAuth 2.0 Playgroundは、受け取ったAuthorization codeclient_id, client_secretを認可サーバーへ送信し、アクセストークンを取得します。

ではStep 2にあるExchange Authorization code for tokensを押してみます。
OAuth 2.0 PlaygroundにAuthorization codeが送信されます。

Requestのclient_idを見てみると、407408718192.apps.googleusercontent.comとあります。 これがOAuth 2.0 Playgroundのclient_idのようです。
一方client_secret************となっています。 認可サーバーへの送信にはclient_secretも含まれますが、これをおおやけにしてしまうと第三者がOAuth 2.0 Playgroundのフリができてしまうので、内緒になってるのですね。

続いて画面右下のResponseを確認してみます。アクセストークンが取得できてます。 先ほどと同じくブラウザにアクセストークンが表示されていますが、OAuth 2.0理解という目的のため表示しているという点に注意です。 通常アクセストークンをブラウザに表示しません。

OAuth 2.0 Playgroundは、このアクセストークンで私のカレンダーイベントにアクセスすることが可能になります。

Step 3

これで私はOAuth 2.0 Playgroundに、私のカレンダーイベントを取得する認可を出すことができました。 Step3で、OAuth 2.0 Playgroundにカレンダーイベントを取得させ、表示してみます。

List possible operations ボタンを押し、一覧からList Eventsをクリックします。

Request URIにAPIのURIが自動で入力されるので、{calendarId} を自分のID(@gmail.comなど)に置換し、Send the requestボタンをクリックします。

カレンダーイベントのJSONを取得することができました!

おわりに

OAuth 2.0 Playgroundにカレンダーイベントを取得する認可を出し、取得させ、表示できました。 認可フローを簡単かつわかりやすく体験できますね。 OAuth 2.0は複雑なプロセスですが、OAuth 2.0 Playgroundで認可フローを体験し、理解の手助けにしましょう。