JavaScript による Yahoo を使用した認証

Firebase SDK を使用して汎用の OAuth ログインをアプリに統合し、エンドツーエンドのログインフローを実行することで、ユーザーが Firebase での認証に Yahoo などの OAuth プロバイダを使用できるようになります。

始める前に

Yahoo アカウントを使用してユーザーをログインさせるには、まず Firebase プロジェクトのログイン プロバイダとして Yahoo を有効にする必要があります。

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで [Authentication] セクションを開きます。
  3. [Sign-in method] タブで、[Yahoo!] プロバイダを有効にします。
  4. そのプロバイダのデベロッパー コンソールで取得したクライアント IDクライアント シークレットをプロバイダ構成に追加します。
    1. Yahoo OAuth クライアントを登録するには、Yahoo でのウェブ アプリケーションの登録に関する Yahoo のデベロッパー向けドキュメントの手順を実施してください。

      必ず、OpenID Connect API の 2 つの権限(profileemail)を選択します。

    2. こうしたプロバイダにアプリを登録するときは、必ずプロジェクトの *.firebaseapp.com ドメインをアプリのリダイレクト ドメインとして登録してください。
  5. [保存] をクリックします。

Firebase SDK を使用したログインフローの処理

ウェブアプリをビルドする場合、Yahoo アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフロー全体を処理することです。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

  1. プロバイダ ID yahoo.com を使用して、OAuthProvider のインスタンスを作成します。

    ウェブ モジュラー API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    名前空間が指定されたウェブ API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. 省略可: OAuth リクエストとともに送信する追加のカスタム OAuth パラメータを指定します。

    ウェブ モジュラー API

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    名前空間が指定されたウェブ API

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Yahoo がサポートするパラメータについては、Yahoo の OAuth に関するドキュメントをご覧ください。setCustomParameters() で Firebase の必須パラメータを渡すことはできません。該当するパラメータは、client_idredirect_uriresponse_typescopestate です。

  3. 省略可: 認証プロバイダにリクエストする、profileemail を超える追加の OAuth 2.0 スコープを指定します。アプリケーションで Yahoo API から限定公開のユーザーデータへのアクセスが必要な場合は、Yahoo のデベロッパー コンソールの [API Permissions] で、Yahoo API に権限をリクエストする必要があります。リクエストされた OAuth スコープは、アプリの API 権限で事前構成されたものと完全一致する必要があります。たとえば、読み取り / 書き込みアクセスがユーザーの連絡先にリクエストされ、それがアプリの API 権限で事前構成されている場合は、読み取り専用の OAuth スコープ sdct-r の代わりに sdct-w を渡す必要があります。それ以外の場合、フローは失敗し、エンドユーザーにエラーが表示されます。

    ウェブ モジュラー API

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    名前空間が指定されたウェブ API

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    詳しくは、Yahoo のスコープに関するドキュメントをご覧ください。

  4. OAuth プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Yahoo アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。

    • ポップアップ ウィンドウでログインする場合は、signInWithPopup を呼び出します。

      ウェブ モジュラー API

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      名前空間が指定されたウェブ API

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • ログインページにリダイレクトしてログインする場合は、signInWithRedirect を呼び出します。

    signInWithRedirectlinkWithRedirectreauthenticateWithRedirect を使用する場合は、ベスト プラクティスに従ってください。

      firebase.auth().signInWithRedirect(provider);
      

    ユーザーがログインを完了してページに戻ったら、getRedirectResult を呼び出してログイン結果を取得できます。

    ウェブ モジュラー API

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

    名前空間が指定されたウェブ API

    firebase.auth().signInWithRedirect(provider);

    正常に完了すると、プロバイダに関連付けられている OAuth ID トークンとアクセス トークンを、返された firebase.auth.UserCredential オブジェクトから取得できます。

    OAuth アクセス トークンを使用して、Yahoo API を呼び出せます。

    たとえば、基本的なプロフィール情報を取得するには、次の REST API を呼び出します。

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    YAHOO_USER_UID は、firebase.auth().currentUser.providerData[0].uid フィールドまたは result.additionalUserInfo.profile から取得できる Yahoo ユーザーの ID です。

  5. 上述の例ではログインフローを中心に説明していますが、linkWithPopup / linkWithRedirect を使用して Yahoo プロバイダを既存のユーザーにリンクすることもできます。たとえば、複数のプロバイダを同じユーザーにリンクして、どれでもログインできるようにすることができます。

    ウェブ モジュラー API

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // 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.
        });

    名前空間が指定されたウェブ API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. 同じパターンを reauthenticateWithPopup / reauthenticateWithRedirect でも使用できます。これは、ログインしてから短時間のうちに行うべき機密性の高い操作のために、最新の認証情報を取得するために使われます。

    ウェブ モジュラー API

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // 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.
        });

    名前空間が指定されたウェブ API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Chrome 拡張機能での Firebase 認証

Chrome 拡張機能アプリを作成する場合は、Chrome 拡張機能 ID を追加する必要があります。

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[Sign-in method] ページを開きます。
  3. 承認済みドメインのリストに、次のような URI を追加します。
    chrome-extension://CHROME_EXTENSION_ID

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopupreauthenticateWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド ページ スクリプトからこれらのメソッドを呼び出す必要があります。ポップアップ メソッドは、Manifest V2 を使用する拡張機能でのみ使用できます。新しい Manifest V3 では、Service Worker 形式のバックグラウンド スクリプトのみが許可されます。そのため、ポップアップ オペレーションは一切実行できません。

Chrome 拡張機能のマニフェスト ファイルで、https://apis.google.com URL を content_security_policy 許可リストに必ず追加してください。

次のステップ

ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログイン時に使用した認証情報(ユーザー名とパスワード、電話番号、または認証プロバイダ情報)にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。

  • Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを管理できます。

既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーをログアウトするには、signOut を呼び出します。

ウェブ モジュラー API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

名前空間が指定されたウェブ API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});