コンソールへ移動

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

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

始める前に

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

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで [Authentication] セクションを開きます。
  3. [ログイン方法] タブで、[Yahoo!] プロバイダを有効にします。
  4. そのプロバイダのデベロッパー コンソールで取得したクライアント IDクライアント シークレットをプロバイダ構成に追加します。
    1. Yahoo OAuth クライアントを登録するには、ウェブ アプリケーションの登録に関する Yahoo の手順を実施してください。
    2. こうしたプロバイダにアプリを登録するときは、必ずプロジェクトの *.firebaseapp.com ドメインをアプリのリダイレクト ドメインとして登録してください。
  5. [保存] をクリックします。

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

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

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

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

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

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

    // 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 を呼び出します。

      firebase.auth().signInWithPopup(provider)
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      
    • ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。

      firebase.auth().signInWithRedirect(provider);
      

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

      firebase.auth().getRedirectResult()
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      

    正常に完了すると、プロバイダに関連付けられている 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. 上記の例ではログインフローを中心に説明していますが、linkWithPopuplinkWithRedirect を使用して Yahoo プロバイダを既存のユーザーにリンクすることもできます。たとえば、複数のプロバイダを同じユーザーにリンクして、どれでもログインできるようにすることができます。

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    
  6. 同じパターンを reauthenticateWithPopupreauthenticateWithRedirect でも使用できます。これらは、ログインしてから短時間のうちに行うべき機密性の高い操作のために、最新の認証情報を取得するのに使われます。

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    

Chrome 拡張機能での Firebase 認証

Chrome 拡張アプリを作成する場合は、Chrome 拡張 ID をホワイトリストに登録する必要があります。

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

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド スクリプトからこれらのメソッドを呼び出す必要があります。

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

次のステップ

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

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

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

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

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

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