Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Uwierzytelniaj przy użyciu Twittera w JavaScript

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

Zanim zaczniesz

Dodaj Firebase do projektu JavaScript.
W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.
Na karcie Metoda logowania włącz dostawcę logowania Twitter.
Dodaj klucz interfejsu API i tajny klucz interfejsu API z konsoli dewelopera tego dostawcy do konfiguracji dostawcy:
1. Zarejestruj aplikację jako aplikację dewelopera na Twitterze i uzyskaj klucz interfejsu API OAuth oraz tajny klucz interfejsu API.
2. Upewnij się, że identyfikator 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 na Twitterze.
Kliknij Zapisz.

Obsługa procesu logowania za pomocą pakietu Firebase SDK

Jeśli tworzysz aplikację internetową, najłatwiejszym sposobem uwierzytelniania użytkowników w Firebase za pomocą ich kont Twittera jest obsługa procesu logowania za pomocą pakietu Firebase JavaScript SDK. (Jeśli chcesz uwierzytelnić użytkownika w Node.js lub innym środowisku poza przeglądarką, 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 zlokalizować proces OAuth dostawcy na preferowany język użytkownika bez wyraźnego 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 niestandardowe parametry dostawcy OAuth które chcesz wysłać z żądaniem OAuth. Aby dodać parametr niestandardowy, wywołaj setCustomParameters w zainicjowanym dostawcy z obiektem zawierającym 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 Twittera. Możesz poprosić użytkowników o zalogowanie się za pomocą kont Twittera, otwierając wyskakujące okienko lub przekierowując na stronę logowania. Na urządzeniach mobilnych preferowana jest metoda przekierowania.

Aby zalogować się za pomocą wyskakującego okienka, wywołaj 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

Pamiętaj też, ż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ż przechwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji Auth.

Aby zalogować się przez przekierowanie na stronę logowania, wywołaj signInWithRedirect: Podczas korzystania z `signInWithRedirect` postępuj zgodnie z 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ż przechwytywać i obsługiwać błędy. Listę kodów błędów znajdziesz w dokumentacji Auth.

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

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

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

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

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

Ręczna obsługa procesu logowania

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

Zintegruj uwierzytelnianie przez Twittera z aplikacją, postępując zgodnie z dokumentacją dla deweloperów. Na końcu 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 token dostępu protokołu OAuth i tajny klucz protokołu OAuth do aplikacji Node.js.
Gdy użytkownik zaloguje się na Twitterze, wymień token dostępu OAuth i tajny klucz OAuth na dane uwierzytelniające Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Uwierzytelnij się w Firebase za pomocą danych uwierzytelniających 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 w Firebase w rozszerzeniu do Chrome

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

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

Będzie ona też używana jako mechanizm przekierowania na potrzeby logowania OAuth. Ta domena musi być dozwolona w przypadku wszystkich obsługiwanych dostawców OAuth. Oznacza to jednak, że użytkownicy mogą widzieć tę domenę podczas logowania się na Twitterze przed przekierowaniem z powrotem do aplikacji: Kontynuuj do: https://my-app-12345.firebaseapp.com.

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

Wykonaj kroki od 1 do 3 opisane w artykule Konfigurowanie domeny na potrzeby 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 białej listy 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 field:

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

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i połączone z danymi uwierzytelniającymi, 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 jako część projektu w Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od sposobu logowania.

W aplikacjach zalecamy ustawienie obserwatora w obiekcie Auth, aby poznać stan uwierzytelnienia użytkownika. Następnie możesz pobrać 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 pobrać unikalny identyfikator użytkownika zalogowanego z 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 przez połączenie danych uwierzytelniających dostawcy z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj 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.