Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Аутентификация с помощью Yahoo с помощью JavaScript

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Вы можете позволить своим пользователям аутентифицироваться в Firebase с помощью поставщиков OAuth, таких как Yahoo, интегрировав общий вход OAuth в свое приложение с помощью Firebase SDK для выполнения сквозного процесса входа.

Прежде чем вы начнете

Чтобы входить в систему с помощью учетных записей Yahoo, вы должны сначала включить Yahoo в качестве поставщика входа для вашего проекта Firebase:

  1. Добавьте Firebase в свой проект JavaScript .
  2. В консоли Firebase откройте раздел Auth .
  3. На вкладке Способ входа включите поставщика Yahoo .
  4. Добавьте идентификатор клиента и секрет клиента из консоли разработчика этого провайдера в конфигурацию провайдера:
    1. Чтобы зарегистрировать клиент Yahoo OAuth, следуйте документации разработчика Yahoo по регистрации веб-приложения в Yahoo .

      Обязательно выберите два разрешения OpenID Connect API: profile и email .

    2. При регистрации приложений у этих поставщиков обязательно зарегистрируйте домен *.firebaseapp.com для своего проекта в качестве домена перенаправления для вашего приложения.
  5. Нажмите Сохранить .

Обработка процесса входа с помощью Firebase SDK

Если вы создаете веб-приложение, самый простой способ аутентификации ваших пользователей в Firebase с использованием их учетных записей Yahoo — это обработка всего процесса входа с помощью Firebase JavaScript SDK.

Чтобы обработать процесс входа с помощью Firebase JavaScript SDK, выполните следующие действия:

  1. Создайте экземпляр OAuthProvider , используя идентификатор поставщика yahoo.com .

    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, см. в документации Yahoo OAuth . Обратите внимание, что вы не можете передавать параметры, необходимые для Firebase, с помощью setCustomParameters() . Этими параметрами являются client_id , redirect_uri , response_type , scope и state .

  3. Необязательно : укажите дополнительные области действия OAuth 2.0 помимо profile и email , которые вы хотите запросить у поставщика проверки подлинности. Если вашему приложению требуется доступ к личным данным пользователя из API-интерфейсов Yahoo, вам потребуется запросить разрешения для API-интерфейсов Yahoo в разделе « Разрешения API » в консоли разработчика Yahoo. Запрошенные области OAuth должны точно соответствовать предварительно настроенным в разрешениях API приложения. Например, если доступ для чтения/записи запрошен для контактов пользователя и предварительно настроен в разрешениях API приложения, sdct-w вместо области действия OAuth sdct-r . В противном случае поток завершится ошибкой, и конечному пользователю будет показано сообщение об ошибке.

    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. Выполните аутентификацию в Firebase, используя объект поставщика OAuth. Вы можете предложить своим пользователям войти в свою учетную запись 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 и токен доступа, связанные с поставщиком, могут быть извлечены из возвращаемого объекта 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 — это идентификатор пользователя Yahoo, который можно получить из поля firebase.auth().currentUser.providerData[0].uid или из result.additionalUserInfo.profile .

  5. Хотя приведенные выше примеры сосредоточены на потоках входа, у вас также есть возможность связать поставщика Yahoo с существующим пользователем, используя linkWithPopup / linkWithRedirect . Например, вы можете связать нескольких провайдеров с одним и тем же пользователем, позволяя им входить в систему с помощью любого из них.

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

Аутентификация с помощью Firebase в расширении Chrome

Если вы создаете приложение-расширение Chrome, вы должны добавить свой идентификатор расширения Chrome:

  1. Откройте свой проект в консоли Firebase .
  2. В разделе « Аутентификация » откройте страницу « Метод входа ».
  3. Добавьте URI, подобный следующему, в список авторизованных доменов:
    chrome-extension://CHROME_EXTENSION_ID
    .

Для расширений Chrome доступны только всплывающие операции ( signInWithPopup , linkWithPopup и reauthenticateWithPopup ), поскольку расширения Chrome не могут использовать перенаправления HTTP. Вы должны вызывать эти методы из сценария фоновой страницы, а не из всплывающего окна действия браузера, так как всплывающее окно проверки подлинности отменит всплывающее окно действия браузера. Методы всплывающих окон можно использовать только в расширениях, использующих Manifest V2 . В новом Manifest V3 разрешены только фоновые сценарии в виде сервис-воркеров, которые вообще не могут выполнять всплывающие окна.

Убедитесь, что в файле манифеста вашего расширения Chrome вы добавили URL-адрес https://apis.google.com в белый список content_security_policy .

Следующие шаги

После того, как пользователь входит в систему в первый раз, создается новая учетная запись пользователя и связывается с учетными данными, т. е. с именем пользователя и паролем, номером телефона или информацией о поставщике проверки подлинности, с которыми пользователь вошел в систему. Эта новая учетная запись хранится как часть вашего проекта Firebase и может использоваться для идентификации пользователя во всех приложениях вашего проекта, независимо от того, как пользователь входит в систему.

  • В ваших приложениях рекомендуемым способом узнать статус аутентификации вашего пользователя является установка наблюдателя на объект Auth . Затем вы можете получить основную информацию о профиле пользователя из объекта User . См. Управление пользователями .

  • В правилах безопасности базы данных Firebase Realtime и облачного хранилища вы можете получить уникальный идентификатор пользователя, вошедшего в систему, из переменной 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.
});