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

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

Подготовка

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

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

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

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

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

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

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

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

    Web

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

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. Необязательно. Укажите дополнительные специальные параметры OAuth, которые вы хотите отправить с запросом OAuth.

    Web

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

    Web

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

    Информацию о параметрах, поддерживаемых Yahoo, можно найти в документации по Yahoo OAuth. Обратите внимание, что с помощью setCustomParameters() нельзя передавать параметры, обязательные для Firebase. Это параметры client_id, redirect_uri, response_type, scope и state.

  3. Необязательно. Укажите дополнительные области действия OAuth 2.0, помимо profile и email, которые вы хотите запросить у поставщика услуг аутентификации. Если вашему приложению требуется доступ к закрытым пользовательским данным из Yahoo API, вам нужно запросить разрешения для Yahoo API в разделе API Permissions консоли разработчика Yahoo. Запрашиваемые области действия OAuth должны точно соответствовать предварительно настроенным областям в разрешениях API приложения. Например, если приложению требуется доступ на чтение и запись к контактам пользователя и это разрешение предварительно настроено в API приложения, то вместо области действия OAuth sdct-r (только чтение) необходимо передать значение sdct-w. В противном случае процесс будет прерван и конечному пользователю будет показано сообщение об ошибке.

    Web

    // 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

    // 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

      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

      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:

    При использовании signInWithRedirect, linkWithRedirect или reauthenticateWithRedirect следуйте рекомендациям.

      firebase.auth().signInWithRedirect(provider);
      

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

    Web

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

    Web

    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

    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

    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

    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

    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, ознакомьтесь с руководством по работе с документами вне экрана.

Дальнейшие действия

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

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

  • В Firebase Realtime Database и Cloud Storage правилах безопасности можно получить уникальный идентификатор пользователя, выполнившего вход, из переменной auth и использовать его, чтобы контролировать, к каким данным у пользователя есть доступ.

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

Чтобы выйти из аккаунта пользователя, вызовите функцию signOut:

Web

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

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

Web

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