3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

API GatewayのJWTオーソライザーでGoogle IDトークンを検証してみた

Last updated at Posted at 2023-09-24
  • toCアプリの認証認可ソリューションを選定する場合、OpenID ConnectやOAuth2.0等の技術を利用したソーシャルログインの実装が候補に上がることが多いのではないでしょうか。
  • 今回はAmazon API GatewayのJWTオーソライザーを利用して、Googleアカウントで認証済み利用者への認可処理を実装してみました。

環境構成

image.png

設定手順

Google OAuth 2.0をセットアップする

※事前にGoogle Cloud Platformでプロジェクト作成が完了していることを想定しています。

  • Google Cloud Platformの「APIとサービス」にアクセスします。

  • 左メニューから「認証情報」を選択した後、「認証情報を作成」を押下します。
    Untitled.png

  • 「OAuthクライアントIDの作成」を選択し、必要な情報を入力します。

    • アプリケーションの種類:ウェブアプリケーション
    • 名前:任意の名前を入力
    • 承認済みのリダイレクトURI:http://127.0.0.1/callback
      Untitled (1).png
  • クライアント作成後に表示される、クライアントIDとシークレットを控えておきます。

Lambdaを作成する

  • AWSコンソールにログイン後、Lambdaコンソールへ遷移します。
  • 「関数の作成」を押下し、ランタイムに「Python 3.11」を選択して、Lambda関数を作成します。(ソースコードは変更不要です。)
    Untitled (2).png

API Gatewayを作成する

  • AWSコンソールにログイン後、API Gatewayコンソールへ遷移します。

  • 「APIを作成」を押下後、APIタイプとして「HTTP API」を選択して構築します。
    Untitled (3).png

  • 先程作成したLambdaとの統合を設定します。

    • 統合:Lambda
    • AWSリージョン:先程作成したLambdaのリージョンを選択してください。
    • Lambda関数:先程作成したLambda関数を選択してください。
    • API名:任意の名前を入力してください。
      Untitled (4).png
  • 作成完了後、https://[APIのURL]/[Lambda関数名]をWebブラウザで開き、API Gateway経由でLambda関数を呼び出せることを確認します。
    Untitled (5).png

API GatewayにJWTオーソライザーを設定する

  • 作成したAPI Gatewayの設定画面にて、「Authorization」メニューを選択します。
  • 「オーソライザーを作成してアタッチ」を押下します。
    Untitled (6).png
  • オーソライザーを作成します。

動作確認手順

異常系

  • https://[APIのURL]/[Lambda関数名]をWebブラウザで開いた場合、アクセスが拒否されることを確認します。
    Untitled (8).png

正常系

OIDCの認可コードフローでIDトークンを取得した上で、API Gatewayにアクセスできることを確認します。

  • 認証リクエスト

    • Webブラウザで認可エンドポイントにアクセスし、遷移後の画面でご自身のGoogleアカウントでログインします。
      • response_type
        • レスポンスとして認可コードを取得するために、codeを指定します。
      • state
        • CSRF対策のために、ランダムな値を指定します。
      • scope
        • トークンエンドポイントからアクセストークンだけでなくIDトークンも取得するために、oidcを指定します。
      • redirect_uri
        • 認証レスポンス時のリダレクト先として、http://127.0.0.1/callbackを指定します。(今回はローカルループバックアドレスを指定していますが、実際にアプリケーションを作成する場合は適切なURLを指定してください。)
      https://accounts.google.com/o/oauth2/v2/auth
      ?response_type=code
      &client_id=[クライアントID]
      &state=xyz
      &scope=openid
      &redirect_uri=http://127.0.0.1/callback
      
  • 認証レスポンス

    • http://127.0.0.1/callbackにリダイレクトされるので、URLバーに表示される認可コード(クエリ文字列code)の値を控えておきます。
  • トークンリクエスト

    • CurlでトークンエンドポイントにHTTPリクエストし、レスポンスに含まれるid_tokenの値を控えておきます。

      curl \
      -d "client_id=[クライアントID]" \
      -d "client_secret=[クライアントシークレット]" \
      -d "redirect_uri=http://127.0.0.1/callback" \
      -d "grant_type=authorization_code" \
      -d "code=[認可コード]" \
      https://www.googleapis.com/oauth2/v4/token
      
  • IDトークンを用いたAPI Gatewayへのアクセス

    • Curlでid_tokenの値を用いてAPI GatewayにHTTPリクエストし、「Hello from Lambda!」と表示されれば成功です!
      curl \
      -H 'Authorization: Bearer [IDトークン]' \
      https://[API GatewayのURL]/[Lambda関数名]
      

まとめ

  • API GatewayのJWTオーソライザーを利用して、Googleログインユーザへの認可処理を実装してみました。

  • 今回はJWTの検証及び認可までを実装しましたが、Lambda関数でクレーム情報にアクセスすることもできますので、ぜひお試しください〜

参考

注意事項

  • 本記事は万全を期して作成していますが、お気づきの点がありましたら、ご連絡よろしくお願いします。
  • なお、本記事の内容を利用した結果及び影響について、筆者は一切の責任を負いませんので、予めご了承ください。
3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?