Uwierzytelnij się za pomocą Yahoo z JavaScript

Możesz zezwolić swoim użytkownikom na uwierzytelnianie w Firebase przy użyciu dostawców OAuth, takich jak Yahoo, integrując ogólne logowanie OAuth ze swoją aplikacją za pomocą pakietu SDK Firebase, aby przeprowadzić pełny proces logowania.

Zanim zaczniesz

Aby logować użytkowników przy użyciu kont Yahoo, musisz najpierw włączyć Yahoo jako dostawcę logowania dla swojego projektu Firebase:

1. Dodaj Firebase do swojego projektu JavaScript .
2. W konsoli Firebase otwórz sekcję Auth .
3. Na karcie Metoda logowania włącz dostawcę Yahoo .
4. Dodaj identyfikator klienta i klucz tajny klienta z konsoli programisty tego dostawcy do konfiguracji dostawcy:

   1. Aby zarejestrować klienta Yahoo OAuth, postępuj zgodnie z dokumentacją programisty Yahoo dotyczącą rejestracji aplikacji internetowej w Yahoo .

      Pamiętaj, aby wybrać dwa uprawnienia OpenID Connect API: profile i e- email .

   2. Rejestrując aplikacje u tych dostawców, pamiętaj, aby zarejestrować domenę *.firebaseapp.com swojego projektu jako domenę przekierowania dla swojej aplikacji.
5. Kliknij Zapisz .

Obsługuj proces logowania za pomocą Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu ich kont Yahoo jest obsłużenie całego procesu logowania za pomocą Firebase JavaScript SDK.

Aby obsłużyć proces logowania za pomocą Firebase JavaScript SDK, wykonaj te czynności:

1. Utwórz instancję OAuthProvider przy użyciu identyfikatora dostawcy yahoo.com .

   Web version 9

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

   Web version 8

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.

   Web version 9

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

   Web version 8

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

   Parametry obsługiwane przez Yahoo znajdziesz w dokumentacji Yahoo OAuth . Pamiętaj, że nie możesz przekazać parametrów wymaganych przez Firebase za pomocą setCustomParameters() . Te parametry to client_id , redirect_uri , response_type , scope i state .

3. Opcjonalnie : określ dodatkowe zakresy OAuth 2.0 poza profile i adresem email -mail, o które chcesz poprosić dostawcę uwierzytelniania. Jeśli Twoja aplikacja wymaga dostępu do prywatnych danych użytkownika z interfejsów API Yahoo, musisz poprosić o uprawnienia do interfejsów API Yahoo w obszarze Uprawnienia interfejsu API w konsoli programisty Yahoo. Żądane zakresy OAuth muszą dokładnie odpowiadać zakresom wstępnie skonfigurowanym w uprawnieniach interfejsu API aplikacji. Na przykład jeśli dostęp do odczytu/zapisu jest wymagany do kontaktów użytkownika i wstępnie skonfigurowany w uprawnieniach interfejsu API aplikacji, sdct-w musi zostać przekazany zamiast tylko do odczytu zakresu OAuth sdct-r . W przeciwnym razie przepływ zakończy się niepowodzeniem, a użytkownikowi końcowemu zostanie wyświetlony komunikat o błędzie.

   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');
   auth_yahoo_provider_scopes.js

   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-oauth.js

   Aby dowiedzieć się więcej, zapoznaj się z dokumentacją zakresów Yahoo .

4. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth. Możesz poprosić użytkowników o zalogowanie się przy użyciu ich kont Yahoo, otwierając wyskakujące okienko lub przekierowując na stronę logowania. Metoda przekierowania jest preferowana na urządzeniach mobilnych.

   • Aby zalogować się za pomocą wyskakującego okienka, wywołaj 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.
       });
     auth_yahoo_signin_popup.js

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

   • Aby zalogować się przez przekierowanie do strony logowania, wywołaj signInWithRedirect :

   Postępuj zgodnie z najlepszymi praktykami podczas korzystania z signInWithRedirect , linkWithRedirect lub reauthenticateWithRedirect .

     firebase.auth().signInWithRedirect(provider);
     

   Gdy użytkownik zakończy logowanie i powróci na stronę, możesz uzyskać wynik logowania, wywołując getRedirectResult .

   Web version 9

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

   Web version 8

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   Po pomyślnym zakończeniu token identyfikatora OAuth i token dostępu powiązany z dostawcą można pobrać ze zwróconego obiektu firebase.auth.UserCredential .

   Korzystając z tokena dostępu OAuth, możesz wywołać interfejs API Yahoo .

   Na przykład, aby uzyskać podstawowe informacje o profilu, można wywołać następujący interfejs API REST:

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

   Gdzie YAHOO_USER_UID to identyfikator użytkownika Yahoo, który można pobrać z pola firebase.auth().currentUser.providerData[0].uid lub z result.additionalUserInfo.profile .

5. Chociaż powyższe przykłady skupiają się na przepływach logowania, możesz także połączyć dostawcę Yahoo z istniejącym użytkownikiem za pomocą linkWithPopup / linkWithRedirect . Na przykład możesz połączyć wielu dostawców z tym samym użytkownikiem, umożliwiając im logowanie się za pomocą jednego z nich.

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

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

6. Tego samego wzorca można użyć z reauthenticateWithPopup / reauthenticateWithRedirect , którego można użyć do pobrania świeżych poświadczeń dla poufnych operacji wymagających niedawnego logowania.

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

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

// Step 1.
// User tries to sign in to Yahoo.
auth.signInWithPopup(new firebase.auth.OAuthProvider('yahoo.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Yahoo credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Yahoo credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Yahoo account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Uwierzytelnij się za pomocą Firebase w rozszerzeniu Chrome

Jeśli tworzysz aplikację rozszerzającą Chrome, musisz dodać swój identyfikator rozszerzenia Chrome:

1. Otwórz swój projekt w konsoli Firebase .
2. W sekcji Uwierzytelnianie otwórz stronę Metoda logowania .
3. Dodaj identyfikator URI podobny do następującego do listy autoryzowanych domen:

   chrome-extension://CHROME_EXTENSION_ID

Tylko operacje wyskakujące ( signInWithPopup , linkWithPopup i reauthenticateWithPopup ) są dostępne dla rozszerzeń Chrome, ponieważ rozszerzenia Chrome nie mogą używać przekierowań HTTP. Powinieneś wywoływać te metody ze skryptu strony w tle, a nie z wyskakującego okienka akcji przeglądarki, ponieważ wyskakujące okienko uwierzytelniania anuluje wyskakujące okienko akcji przeglądarki. Metody wyskakujące mogą być używane tylko w rozszerzeniach korzystających z Manifest V2 . Nowszy Manifest V3 zezwala tylko na skrypty działające w tle w postaci service workerów, które w ogóle nie mogą wykonywać operacji wyskakujących okienek.

W pliku manifestu rozszerzenia Chrome dodaj adres URL https://apis.google.com do listy dozwolonych content_security_policy .

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika, które jest łączone z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się logował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikacji użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, jak użytkownik się loguje.

• W twoich aplikacjach zalecanym sposobem poznania statusu autoryzacji użytkownika jest ustawienie obserwatora na obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

• W regułach bezpieczeństwa Firebase Realtime Database i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się do Twojej aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj signOut :

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

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

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