Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Uwierzytelniaj przy użyciu Twittera w JavaScript

Możesz umożliwić użytkownikom uwierzytelnianie w Firebase za pomocą kont Twittera, integrując uwierzytelnianie Twittera z aplikacją. Możesz to zrobić, używając pakietu SDK Firebase do przeprowadzenia procesu logowania lub ręcznie przeprowadzając proces OAuth Twittera i przekazując wynikowy token dostępu i klucz tajny do Firebase.

Zanim zaczniesz

Dodaj Firebase do projektu JavaScript.
W konsoli Firebase otwórz Bezpieczeństwo > Uwierzytelnianie.
Na karcie Metoda logowania włącz dostawcę logowania Twitter.
Dodaj klucz interfejsu API i tajny klucz interfejsu API z konsoli deweloperskiej tego dostawcy do konfiguracji dostawcy:
1. Zarejestruj aplikację jako aplikację deweloperską na Twitterze i uzyskaj klucz interfejsu API oraz tajny klucz interfejsu API OAuth.
2. Sprawdź, czy adres URI przekierowania OAuth Firebase (np.my-app-12345.firebaseapp.com/__/auth/handler) jest ustawiony jako adres URL wywołania zwrotnego autoryzacji na stronie ustawień aplikacji w konfiguracji aplikacji Twitter.
Kliknij Zapisz.

Obsługa procesu logowania za pomocą pakietu SDK Firebase

Jeśli tworzysz aplikację internetową, najprostszym sposobem uwierzytelniania użytkowników w Firebase za pomocą ich kont na Twitterze jest obsługa procesu logowania za pomocą pakietu Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku przeglądarki, musisz ręcznie obsłużyć proces logowania).

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

Utwórz instancję obiektu dostawcy Twittera:

Web

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web

var provider = new firebase.auth.TwitterAuthProvider();twitter.js

Opcjonalnie: aby dostosować proces OAuth dostawcy do preferowanego języka użytkownika bez jawnego przekazywania odpowiednich niestandardowych parametrów OAuth, zaktualizuj kod języka w instancji Auth przed rozpoczęciem procesu OAuth. Przykład:

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

Opcjonalnie: określ dodatkowe parametry niestandardowego dostawcy OAuth, które chcesz wysyłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters w przypadku zainicjowanego dostawcy, używając obiektu zawierającego klucz określony w dokumentacji dostawcy OAuth i odpowiednią wartość. Przykład:
Web
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
Zarezerwowane wymagane parametry OAuth są niedozwolone i będą ignorowane. Więcej informacji znajdziesz w dokumentacji dostawcy uwierzytelniania.

Uwierzytelnij się w Firebase za pomocą obiektu dostawcy Twitter. Możesz poprosić użytkowników o zalogowanie się na konta Twittera, otwierając wyskakujące okienko lub przekierowując ich na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.

Aby zalogować się w wyskakującym okienku, wywołaj funkcję signInWithPopup:

Web

import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_popup.js

Web

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    var token = credential.accessToken;
    var secret = credential.secret;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

Zwróć też uwagę, że możesz pobrać token OAuth dostawcy Twittera, którego można użyć do pobierania dodatkowych danych za pomocą interfejsów API Twittera.

W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej Uwierzytelniania.

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect. Podczas korzystania z funkcji `signInWithRedirect` postępuj zgodnie ze sprawdzonymi metodami.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Web

firebase.auth().signInWithRedirect(provider);index.js

Następnie możesz też pobrać token OAuth dostawcy Twittera, wywołując getRedirectResult po wczytaniu strony:

Web

import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
    // You can use these server side with your app's credentials to access the Twitter API.
    const credential = TwitterAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    const secret = credential.secret;
    // ...

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = TwitterAuthProvider.credentialFromError(error);
    // ...
  });auth_twitter_signin_redirect_result.js

Web

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = credential.accessToken;
      var secret = credential.secret;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });twitter.js

W tym miejscu możesz też wykrywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji referencyjnej dotyczącej Uwierzytelniania.

Obsługa błędów account-exists-with-different-credential

Jeśli w Firebase konsoli włączysz ustawienie Jedno konto na adres e-mail, gdy użytkownik spróbuje zalogować się u dostawcy (np. Twitter) za pomocą adresu e-mail, który jest już używany przez innego użytkownika Firebase (np. Google), zostanie zgłoszony błąd auth/account-exists-with-different-credential wraz z obiektem AuthCredential (token OAuth i klucz tajny Twittera). Aby zalogować się u wybranego dostawcy, użytkownik musi najpierw zalogować się u obecnego dostawcy (Google), a następnie połączyć się z poprzednim dostawcąAuthCredential (token OAuth i klucz tajny Twittera).

Jeśli używasz signInWithPopup, możesz obsługiwać błędy auth/account-exists-with-different-credential za pomocą kodu podobnego do tego przykładu:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Tryb przekierowania

W trybie przekierowania ten błąd jest obsługiwany w podobny sposób, z tą różnicą, że oczekujące dane logowania muszą być przechowywane w pamięci podręcznej między przekierowaniami stron (np. przy użyciu pamięci sesji).

Ręczne obsługiwanie procesu logowania

Możesz też uwierzytelniać się w Firebase za pomocą konta Twittera, obsługując proces logowania przez wywoływanie punktów końcowych Twitter OAuth:

Zintegruj uwierzytelnianie na Twitterze z aplikacją, postępując zgodnie z dokumentacją dla deweloperów. Po zakończeniu procesu logowania przez Twittera otrzymasz token dostępu OAuth i tajny klucz protokołu OAuth.
Jeśli musisz zalogować się w aplikacji Node.js, wyślij do niej token dostępu protokołu OAuth i tajny klucz protokołu OAuth.
Gdy użytkownik zaloguje się w Twitterze, wymień token dostępu OAuth i klucz tajny OAuth na dane logowania Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Uwierzytelnij się w Firebase za pomocą danych logowania Firebase:

Web

import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";

// Sign in with the credential from the Facebook user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    const credential = FacebookAuthProvider.credentialFromResult(result);
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = FacebookAuthProvider.credentialFromError(error);
    // ...
  });auth_facebook_signin_credential.js

Web

// Sign in with the credential from the Facebook user.
firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // Signed in       
    var credential = result.credential;
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });facebook.js

Uwierzytelnianie za pomocą Firebase w rozszerzeniu do Chrome

Jeśli tworzysz aplikację rozszerzenia do Chrome, zapoznaj się z przewodnikiem po dokumentach poza ekranem.

Podczas tworzenia projektu Firebase udostępni dla niego unikalną subdomenę:https://my-app-12345.firebaseapp.com.

Będzie on też używany jako mechanizm przekierowania podczas logowania za pomocą OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że podczas logowania się w Twitterze użytkownicy mogą zobaczyć tę domenę, zanim zostaną przekierowani z powrotem do aplikacji: Kontynuuj: https://my-app-12345.firebaseapp.com.

Aby uniknąć wyświetlania subdomeny, możesz skonfigurować domenę niestandardową za pomocą Firebase Hosting:

Wykonaj kroki 1–3 w artykule Konfigurowanie domeny pod kątem Hosting. Gdy potwierdzisz własność domeny, Hosting udostępni certyfikat SSL dla Twojej domeny niestandardowej.
Dodaj domenę niestandardową do listy autoryzowanych domen w Firebase konsoli: auth.custom.domain.com.
W konsoli dewelopera Twittera lub na stronie konfiguracji OAuth dodaj do listy dozwolonych adres URL strony przekierowania, która będzie dostępna w Twojej domenie niestandardowej:https://auth.custom.domain.com/__/auth/handler.

Podczas inicjowania biblioteki JavaScript określ domenę niestandardową w polu authDomain:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

Dalsze kroki

Po pierwszym zalogowaniu się użytkownika tworzone jest nowe konto użytkownika, które jest powiązane z danymi logowania, czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania, za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane w ramach projektu w Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

Zalecanym sposobem sprawdzania stanu uwierzytelniania użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.
W Firebase Realtime Database i Cloud Storage regułach bezpieczeństwa możesz pobrać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może mieć dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

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

Web

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

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

Web

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

Uwierzytelniaj przy użyciu Twittera w JavaScript Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.