Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Аутентификация с помощью 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 .

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

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

Управляйте входом с помощью Firebase SDK

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

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

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

    Веб-версия 9

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

    Веб-версия 8

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

    Веб-версия 9

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

    Веб-версия 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, объем и состояние.

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

    Веб-версия 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');

    Веб-версия 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 SCOPES документации .

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

    • Для того, чтобы войти в всплывающем окне, вызов signInWithPopup :

      Веб-версия 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.
        });

      Веб-версия 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 .

      Веб-версия 9

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

      Веб-версия 8

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

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

    Веб-версия 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.
        });

    Веб-версия 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 , которые могут быть использованы для получения свежих учетных данных для чувствительных операций, требующих последней регистрацию.

    Веб-версия 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.
        });

    Веб-версия 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

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

В расширении Chrome в файле манифеста убедитесь , что вы добавляете https://apis.google.com URL в content_security_policy allowlist.

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

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

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

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

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

Чтобы выйти пользователь, вызовите signOut :

Веб-версия 9

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

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

Веб-версия 8

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