WebアプリでOpenIDConnectを使用して認証する

IdentityPlatformを使用したFirebaseAuthenticationにアップグレードした場合は、選択したOpenID Connect（OIDC）準拠のプロバイダーを使用してFirebaseでユーザーを認証できます。これにより、FirebaseでネイティブにサポートされていないIDプロバイダーを使用できるようになります。

あなたが始める前に

OIDCプロバイダーを使用してユーザーにサインインするには、最初にプロバイダーからいくつかの情報を収集する必要があります。

• クライアントID ：アプリを識別するプロバイダーに固有の文字列。プロバイダーは、サポートするプラットフォームごとに異なるクライアントIDを割り当てる場合があります。これは、プロバイダーによって発行されたIDトークンのaudクレームの値の1つです。

• クライアントシークレット：プロバイダーがクライアントIDの所有権を確認するために使用するシークレット文字列。クライアントIDごとに、一致するクライアントシークレットが必要になります。 （この値は、認証コードフローを使用している場合にのみ必要です。これを強くお勧めします。）

• 発行者：プロバイダーを識別する文字列。この値は、/。 /.well-known/openid-configurationを追加すると、プロバイダーのOIDC検出ドキュメントの場所となるURLである必要があります。たとえば、発行者がhttps://auth.example.comの場合、検出ドキュメントはhttps://auth.example.com/.well-known/openid-configurationで利用可能である必要があります。

上記の情報を入手したら、FirebaseプロジェクトのサインインプロバイダーとしてOpenIDConnectを有効にします。

1. JavaScriptプロジェクトにFirebaseを追加します。

2. IdentityPlatformを使用したFirebaseAuthenticationにアップグレードしていない場合は、アップグレードしてください。 OpenID Connect認証は、アップグレードされたプロジェクトでのみ使用できます。

3. Firebaseコンソールの[ログインプロバイダー]ページで、[新しいプロバイダーの追加]をクリックし、[ OpenIDConnect ]をクリックします。

4. 承認コードフローを使用するか、暗黙的な許可フローを使用するかを選択します。

   プロバイダーがサポートしている場合は、常にコードフローを使用する必要があります。暗黙のフローは安全性が低く、使用することは強くお勧めしません。

5. このプロバイダーに名前を付けます。生成されたプロバイダーIDに注意してください： oidc.example-providerようなもの。アプリにログインコードを追加するときに、このIDが必要になります。

6. クライアントIDとクライアントシークレット、およびプロバイダーの発行者文字列を指定します。これらの値は、プロバイダーが割り当てた値と正確に一致する必要があります。

7. 変更を保存します。

FirebaseSDKを使用してログインフローを処理する

OIDCプロバイダーを使用してFirebaseでユーザーを認証する最も簡単な方法は、FirebaseSDKでログインフロー全体を処理することです。

Firebase JavaScript SDKでサインインフローを処理するには、次の手順に従います。

1. Firebaseコンソールで取得したプロバイダーIDを使用して、 OAuthProviderのインスタンスを作成します。

   Web version 9

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider('oidc.example-provider');
   

   Web version 8

   var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
   

2. オプション：OAuthリクエストで送信する追加のカスタムOAuthパラメーターを指定します。

   Web version 9

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   Web version 8

   provider.setCustomParameters({
     // Target specific email with login hint.
     login_hint: '[e-mail]'
   });
   

   サポートされているパラメーターについては、プロバイダーに確認してください。 setCustomParametersを使用してFirebaseに必要なパラメータを渡すことはできないことに注意してください。これらのパラメーターは、 client_id 、 response_type 、 redirect_uri 、 state 、 scope 、およびresponse_modeです。

3. オプション：認証プロバイダーに要求する基本プロファイル以外の追加のOAuth2.0スコープを指定します。

   Web version 9

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   Web version 8

   provider.addScope('mail.read');
   provider.addScope('calendars.read');
   

   サポートされているスコープについては、プロバイダーに確認してください。

4. OAuthプロバイダーオブジェクトを使用してFirebaseで認証します。

   ユーザーをプロバイダーのサインインページにリダイレクトするか、ポップアップブラウザーウィンドウでサインインページを開くことができます。

   リダイレクトフロー

   signInWithRedirect()を呼び出して、プロバイダーのサインインページにリダイレクトします。

   Web version 9

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   Web version 8

   firebase.auth().signInWithRedirect(provider);
   

   ユーザーがサインインを完了してアプリに戻った後、 getRedirectResult()を呼び出すことでサインイン結果を取得できます。

   Web version 9

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       // IdP data available in result.additionalUserInfo.profile.
   
       // Get the OAuth access token and ID Token
       const credential = OAuthProvider.credentialFromResult(result);
       const accessToken = credential.accessToken;
       const idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   Web version 8

   firebase.auth().getRedirectResult()
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   ポップアップフロー

   Web version 9

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       // IdP data available using getAdditionalUserInfo(result)
   
       // Get the OAuth access token and ID Token
       const credential = OAuthProvider.credentialFromResult(result);
       const accessToken = credential.accessToken;
       const idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

   Web version 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // IdP data available in result.additionalUserInfo.profile.
       // ...
   
       /** @type {firebase.auth.OAuthCredential} */
       var credential = result.credential;
   
       // OAuth access and id tokens can also be retrieved:
       var accessToken = credential.accessToken;
       var idToken = credential.idToken;
     })
     .catch((error) => {
       // Handle error.
     });
   

5. 上記の例はサインインフローに焦点を当てていますが、同じパターンを使用して、 linkWithRedirect()およびlinkWithPopup() ）を使用してOIDCプロバイダーを既存のユーザーにリンクし、reauthenticateWithRedirect（）およびreauthenticateWithPopup() （）を使用してユーザーをreauthenticateWithRedirect()認証できます。これは、最近のログインを必要とする機密性の高い操作の新しい資格情報を取得するために使用できます。

サインインフローを手動で処理する

アプリにOpenIDConnectサインインフローを既に実装している場合は、IDトークンを直接使用してFirebaseで認証できます。

Web version 9

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web version 8

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });