Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

JavaScriptでYahooを使用して認証する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

あなたが始める前に

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

  1. JavaScriptプロジェクトにFirebaseを追加します
  2. Firebaseコンソールで、[認証]セクションを開きます。
  3. [サインイン方法]タブで、 Yahooプロバイダーを有効にします。
  4. そのプロバイダーの開発者コンソールからプロバイダー構成にクライアントIDクライアントシークレットを追加します。
    1. Yahoo OAuthクライアントを登録するには、YahooにWebアプリケーションを登録する際のYahoo開発者向けドキュメントに従ってください。

      profileemailの2つのOpenIDConnectAPI権限を必ず選択してください。

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

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

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

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. オプション:OAuthリクエストで送信する追加のカスタムOAuthパラメーターを指定します。

    Web version 9

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

    Web version 8

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

    Yahooがサポートするパラメーターについては、 YahooOAuthのドキュメントを参照してください。 setCustomParameters()を使用してFirebaseに必要なパラメータを渡すことはできないことに注意してください。これらのパラメーターは、 client_idredirect_uriresponse_typescopestateです。

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

    Web version 9

    // 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');

    Web version 8

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

      Web version 9

      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.
        });

      Web version 8

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

      firebase.auth().signInWithRedirect(provider);
      

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

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

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

    OAuthアクセストークンを使用して、 YahooAPIを呼び出すことができます。

    たとえば、基本的なプロファイル情報を取得するには、次のRESTAPIを呼び出すことができます。

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

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

  5. 上記の例はサインインフローに焦点を当てていますが、 linkWithPopup / linkWithRedirectを使用してYahooプロバイダーを既存のユーザーにリンクすることもできます。たとえば、複数のプロバイダーを同じユーザーにリンクして、どちらかでサインインできるようにすることができます。

    Web version 9

    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.
        });

    Web version 8

    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で使用できます。これを使用して、最近のログインを必要とする機密性の高い操作の新しい資格情報を取得できます。

    Web version 9

    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.
        });

    Web version 8

    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. [認証]セクションで、[サインイン方法]ページを開きます。
  3. 次のようなURIを許可されたドメインのリストに追加します
    chrome-extension://CHROME_EXTENSION_ID

Chrome拡張機能はHTTPリダイレクトを使用できないため、Chrome拡張機能で使用できるのはポップアップ操作( signInWithPopuplinkWithPopup 、およびreauthenticateWithPopup )のみです。認証ポップアップはブラウザアクションポップアップをキャンセルするため、これらのメソッドはブラウザアクションポップアップではなくバックグラウンドページスクリプトから呼び出す必要があります。ポップアップメソッドは、マニフェストV2を使用する拡張機能でのみ使用できます。新しいマニフェストV3では、サービスワーカー形式のバックグラウンドスクリプトのみが許可されており、ポップアップ操作をまったく実行できません。

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

次のステップ

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

  • アプリで、ユーザーの認証ステータスを知るための推奨される方法は、 Authオブジェクトにオブザーバーを設定することです。次に、 Userオブジェクトからユーザーの基本的なプロファイル情報を取得できます。ユーザーの管理を参照してください。

  • FirebaseRealtimeデータベースとCloudStorageのセキュリティルールでは、ログインしたユーザーの一意のユーザーIDをauth変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

認証プロバイダーのクレデンシャルを既存のユーザーアカウントにリンクすることで、ユーザーが複数の認証プロバイダーを使用してアプリにサインインできるようにすることができます。

ユーザーをサインアウトするには、 signOutを呼び出します。

Web version 9

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

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

Web version 8

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