https://learn.microsoft.com/ja-jp/entra/external-id/google-federation

環境構築

• リポジトリ作成
  

• git clone https://github.com/SatakeYusuke19920527/azure-externalid-google-federation.git
  

• create-next-app . --ts
  

• npm run dev で動作確認

https://learn.microsoft.com/ja-jp/entra/external-id/customers/how-to-google-federation-customers

Microsoft Entra 外部 IDで Google フェデレーションを構成する

• IDプロバイダーにGoogleを追加
  

• クライアントIDとクライアントシークレットを記載
  

• Google Developer Consoleへアクセス
  https://console.cloud.google.com/apis

• 新しいプロジェクトを作成
  

• new project
  

• projectが作成出来るとこんな感じになります
  

• OAuth同意画面
  

[OAuth 同意画面] の [アプリ情報] で、

アプリケーションの [名前] を入力します。
[ユーザー サポートのメール] のアドレスを選択します。
[認可済みドメイン] セクションで、[ドメインの追加] を選択し、ciamlogin.com と microsoftonline.com を追加します。

• 認証情報
  

• OAuth クライアントIDを取得
  

• いっぱい追加する
  

• クライアントIDとクライアントシークレット取得
  

• クライアントシークレット
  

Googleが構成済みになればOK

ユーザーフローにGoogleIDプロバイダーを追加する

新しいユーザーフロー

ユーザーフロー追加

ユーザーフロー作成

アプリケーションの作成

ユーザーフローにアプリケーションを追加

Googleアカウントでログイン

Next.js

npm install @azure/msal-react

GoogleSignInができた