3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@jus1730(ジャス)

Amplify Gen 2 に OAuth認証を追加してみよう！ - Google ログイン機能を追加

3
Last updated at Posted at 2026-04-11

はじめに

Amplify Gen 2のCognito認証にGoogleアカウントでのOAuthログインを追加してみました。
本記事ではGoogle認証の実装手順を紹介します。

最低限の実装で追加できますので、一度試してみてください。

Cognitoで使えるソーシャルログインプロバイダー

少しだけ全体像に触れておきます。
Cognitoでは、Google以外にもソーシャルログインに対応しています。対応方式は大きく2つあります。

  • ネイティブプロバイダー
    Cognitoが直接サポート。AmplifyのAuthenticatorコンポーネントがログインボタンを自動表示してくれます。
プロバイダー 費用 備考
Google 無料 本記事で実装。セットアップが最も手軽
Apple $99/年 Apple Developer Program必須。設定がやや複雑
Facebook 無料 Meta for Developersでアプリを作成
Amazon 無料 Login with Amazonを利用
  • カスタムOIDCプロバイダー
    OIDC準拠のサービスをCognitoに接続。ログインボタンの自動表示はされないため、カスタムUIが必要。
プロバイダー 費用 備考
LINE 無料 国内ユーザー向けに有効。メール取得にはLINEへの申請が必要。LINE版の記事はこちら
X（旧Twitter） 従量課金 OIDC Discovery非対応。OIDCプロキシ（Lambda + API Gateway）の構築が必要
GitHub 無料 OIDC非対応。OIDCプロキシの構築が必要

X と GitHub は OIDC Discovery をサポートしていないため、Cognito のカスタム OIDC プロバイダーとして直接統合できません。Lambda + API Gateway で OIDC プロキシを構築することで対応可能です。

今回は無料かつセットアップが最も手軽なGoogleを選びました。

実装してみよう

それでは、さっそく実装に入ります。

全体の流れ

Amplifyのauthに最低限のコード追加で実現できます。
シークレットを使うため、またリダイレクトURI設定のため、何度かデプロイする必要があります。

  1. ソースコードの変更(Amplify認証設定 + フロントエンド)
  2. GitHubへプッシュ & Amplifyデプロイ(失敗)
  3. シークレットの設定
  4. Amplify再デプロイ(成功)
  5. Cognitoの値取得
  6. Google Cloud設定
  7. シークレットの更新
  8. ソースコードの変更
  9. GitPush & Amplifyデプロイ

もう少しスマートな手順があれば教えてくださいm(_ _)m

1. ソースコードの変更

ベースとなるAmplifyテンプレートは以下を使っています。

ソースコードを次のように修正してください。
GoogleのクライアントIDとシークレットはAmplifyのsecretから取り出すようにします。

amplify/auth/resource.ts (変更前)
import { defineAuth } from "@aws-amplify/backend";
/**
 * 認証リソース定義
 *
 * プロジェクトに合わせて認証設定を編集してください。
 * 参考: https://docs.amplify.aws/nextjs/build-a-backend/auth/
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});
amplify/auth/resource.ts (変更後)
import { defineAuth, secret } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret("GOOGLE_CLIENT_ID"),
        clientSecret: secret("GOOGLE_CLIENT_SECRET"),
        scopes: ["email", "profile", "openid"],
        attributeMapping: {
          email: "email",
          fullname: "name",
          profilePicture: "picture",
        },
      },
      callbackUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番,開発ドメインが決まったら追加
      ],
      logoutUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番,開発ドメインが決まったら追加
      ],
    },
  },
});

フロントエンドについては、1行importを追加するだけです。

src/lib/amplify/AmplifyProvider.tsx (追加)
import "aws-amplify/auth/enable-oauth-listener";

2. Amplifyデプロイ

GitHubにPushして、Amplifyへデプロイします。

AWSコンソールからAmplifyを開いて、新しいアプリを作成します。
AmplifyCognitoGoogleDeploy.png

デフォルト設定のまま進めて、デプロイを実行します。
AmplifyCognitoGoogleDeployExecute.png

シークレットの設定がないためデプロイは失敗します。（想定通り）
AmplifyCognitoGoogleDeployFailed.png

3. シークレットの設定

Amplifyのアプリを開いて、ホスティング → シークレット → シークレットを管理 と進めます。
AmplifyCognitoGoogleSecret.png

次のようにシークレットを設定します。値はとりあえず Dummy としておきます。

変数 値
GOOGLE_CLIENT_ID Dummy
GOOGLE_CLIENT_SECRET Dummy

AmplifyCognitoGoogleSecretDummy.png

4. Amplify再デプロイ

デプロイ画面を開いて、このバージョンを再デプロイ を実行します。
AmplifyCognitoGoogleDeploy2.png

今度は成功します。
AmplifyCognitoGoogleDeploy2Success.png

5. Cognitoの値取得

Cognitoが作成されるので、AWSコンソールからCognitoのユーザプールを開きます。
AmplifyCognitoGoogleUserPool.png

ドメインを開いて、今回作成されたドメインを取得します。

https://<your-cognito-domain>.auth.<region>.amazoncognito.com/

AmplifyCognitoGoogleUserPoolDomain.png

6. Google Cloud設定

続いてGoogle側の設定をしていきます。
まずは、Google Cloud Console にアクセスします。

GCP (Google Cloud Platform) は旧称みたいですね。現在は Google Cloud が正式名称。

プロジェクト作成

プロジェクトを選択します。
AmplifyCognitoGoogleGCP.png

右上の 新しいプロジェクト を選択。
AmplifyCognitoGoogleGCP2.png

プロジェクト名を入力して、作成。
AmplifyCognitoGoogleGCP3.png

先ほど作成したプロジェクトを選択します。
AmplifyCognitoGoogleGCP4.png

プロジェクトが開いたら、APIとサービスを選択します。
AmplifyCognitoGoogleGCP5.png

アプリ情報の登録

左のメニューから、OAuth同意画面 を選択。
AmplifyCognitoGoogleGCP6.png

開始 を押します。
AmplifyCognitoGoogleGCP7.png

必要事項を埋めながら進みます。
AmplifyCognitoGoogleGCPRegister1.png

AmplifyCognitoGoogleGCPRegister2.png

AmplifyCognitoGoogleGCPRegister3.png

最後に 作成 を押します。
AmplifyCognitoGoogleGCPRegister4.png

OAuthクライアントの作成

続いて、OAuthクライアントを作成します。
AmplifyCognitoGoogleGCPClient1.png

必要事項を記入します。
AmplifyCognitoGoogleGCPClient2.png

クライアントを作成 から開始。
AmplifyCognitoGoogleGCPClient3.png

アプリケーションの種類は ウェブアプリケーション を選択。
AmplifyCognitoGoogleGCPClient4.png

承認済みのJavaScript生成元に、先ほど取得したCognitoのドメイン情報を入力します。
https://<your-cognito-domain>.auth.<region>.amazoncognito.com
AmplifyCognitoGoogleGCPClient5.png

承認済みのリダイレクトURIも以下のとおり設定して、作成。
https://<your-cognito-domain>.auth.<region>.amazoncognito.com/oauth2/idpresponse
AmplifyCognitoGoogleGCPClient6.png

クライアントID と クライアントシークレット が作成されるので、メモしておきます。
AmplifyCognitoGoogleGCPClient7.png

公開ステータスの変更

対象を選択すると、公開ステータスがテスト中になっていると思いますので、アプリの公開を選択。
AmplifyCognitoGoogleGCPStatus1.png

確認を選択。
AmplifyCognitoGoogleGCPStatus2.png

ステータスが本番環境に変わります。
AmplifyCognitoGoogleGCPStatus3.png

アプリの内容がOAuth認証だけであればすぐに本番に変わりますが、他の機能なども有していると審査に時間を要することもあるようです。
また、ステータスがテスト中のままだと更新トークンが7日で期限切れになります。

7. シークレットの更新

Amplifyに戻ります。
ホスティング → シークレットと進みます。シークレットを管理を選択します。
AmplifyCognitoGoogleUpdateSecret1.png

先ほど取得した クライアントID と クライアントシークレット の値で、シークレットを更新します。
AmplifyCognitoGoogleUpdateSecret2.png

8. ソースコードの変更

Google認証後、Cognitoからトップ画面へリダイレクトするためのURLを設定します。
手順1でとしていた箇所を、Amplifyで払い出された実際のドメインに書き換えます。

amplify/auth/resource.ts (抜粋)
      callbackUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番,開発ドメインが決まったら追加
      ],
      logoutUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番,開発ドメインが決まったら追加
      ],

mainブランチだと以下のようになります。
AmplifyCognitoGoogleRedirect.png

9. Amplifyデプロイ

GitHubにPushすると自動でAmplifyデプロイが始まります。
完了するまでしばらく待ちます。
AmplifyCognitoGoogleGitPush.png

動作確認

それではデプロイ完了したら動作確認をしてみます。

トップ画面にアクセスすると、Cognitoログイン画面が表示されます。
上部に設置されたSign In with Googleからログインを進めます。
AmplifyCognitoGoogleTest1.png

ログインに使用するGoogleアカウントをクリックします。
AmplifyCognitoGoogleTest2.png

次へで設定完了です。
AmplifyCognitoGoogleTest3.png

Webアプリのトップ画面(サンプルページ)が表示されます。
AmplifyCognitoGoogleTest4.png

Cognito

最後にCognitoでどのようにユーザ登録されているか見ておきます。
AWSコンソールでCognitoを開いて、対象のユーザプールのユーザーを選択します。
AmplifyCognitoGoogleUser1.png

ユーザーの詳細を確認すると、ユーザー属性としてGoogleから受け取った情報が保持されていることがわかります。
AmplifyCognitoGoogleUser2.png

以上が設定手順となります。

お片付け

動作検証が終わったらお片付けをしておきます。

AWS Amplify

AWSコンソールでAmplifyを開いて、対象アプリの アプリケーションの設定 → 全般設定 と進み、アプリの削除を実行。
Cognito等のバックエンドリソースも削除されます。
AmplifyCognitoGoogleDelete1.png

Google Cloudプロジェクト

Google Cloudのコンソールで対象のアプリケーションのダッシュボードを開きます。
AmplifyCognitoGoogleDelete2.png

プロジェクト設定に移動を選択。
AmplifyCognitoGoogleDelete3.png

シャットダウンを選択。
AmplifyCognitoGoogleDelete4.png

プロジェクトIDを入力して、このままシャットダウンを選択します。
AmplifyCognitoGoogleDelete5.png

削除対象となります。
AmplifyCognitoGoogleDelete6.png

まとめ

今回はCognitoの認証にソーシャルログインプロバイダーとしてGoogle Cloudを追加してみました。
設定に多少の手間はかかるものの、プログラム自体は最小限のコード変更で実現できました。

皆さんのご参考になれば幸いです。

他のプロバイダーでの認証についても気になるので、もう少し確認してみようと思います。

LINE ログインの追加手順はこちらの記事にまとめました。

参考リンク

3
0
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
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?