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

المصادقة باستخدام Twitter في JavaScript

يمكنك السماح للمستخدمين بالمصادقة باستخدام حساباتهم على Twitter من خلال دمج ميزة المصادقة على Twitter في تطبيقك. ويمكنك دمج ميزة المصادقة على Twitter إما باستخدام Firebase SDK لتنفيذ عملية تسجيل الدخول، أو من خلال تنفيذ عملية Twitter OAuth يدويًا وتمرير رمز الدخول المميز والرمز السري الناتجَين إلى Firebase.

قبل البدء

أضِف Firebase إلى مشروع JavaScript.
في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.
في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر تسجيل الدخول Twitter.
أضِف مفتاح واجهة برمجة التطبيقات وسر واجهة برمجة التطبيقات من وحدة تحكّم المطوّرين الخاصة بموفّر الخدمة إلى إعدادات موفّر الخدمة:
1. سجِّل تطبيقك كتطبيق مطوّر على Twitter واحصل على مفتاح واجهة برمجة التطبيقات وسر واجهة برمجة التطبيقات لتطبيقك.
2. تأكَّد من ضبط معرّف الموارد المنتظم (URI) لإعادة التوجيه في بروتوكول OAuth في Firebase (مثلاً، my-app-12345.firebaseapp.com/__/auth/handler) كـ عنوان URL لبرنامج معالجة نتائج التفويض في صفحة إعدادات تطبيقك على إعدادات تطبيقك على Twitter.
انقر على حفظ.

التعامل مع عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) من Firebase

إذا كنت بصدد إنشاء تطبيق ويب، فإنّ أسهل طريقة لمصادقة المستخدمين باستخدام حساباتهم على Twitter هي التعامل مع عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) الخاصة بمنصة Firebase بلغة JavaScript. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى غير المتصفح، عليك التعامل مع عملية تسجيل الدخول يدويًا).

للتعامل مع عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) من Firebase JavaScript، اتّبِع الخطوات التالية:

أنشئ مثيلاً لعنصر موفّر Twitter:

Web

import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js

Web

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

اختياري: لتحديد لغة عملية OAuth الخاصة بموفّر الخدمة لتتطابق مع اللغة المفضّلة لدى المستخدم بدون تمرير مَعلمات OAuth المخصّصة ذات الصلة بشكل صريح، عدِّل رمز اللغة في مثيل Auth قبل بدء عملية OAuth. على سبيل المثال:

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

اختياري: حدِّد مَعلمات إضافية مخصّصة لمزوّد خدمة OAuth تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، استدعِ الدالة setCustomParameters على مقدّم الخدمة الذي تمّت تهيئته باستخدام عنصر يحتوي على المفتاح كما هو محدّد في مستندات مقدّم خدمة OAuth والقيمة المقابلة. على سبيل المثال:
Web
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
لا يُسمح باستخدام مَعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. لمزيد من التفاصيل، يُرجى الاطّلاع على مرجع موفّر المصادقة.

يمكنك المصادقة باستخدام Firebase من خلال عنصر موفّر Twitter. يمكنك أن تطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Twitter إما من خلال فتح نافذة منبثقة أو من خلال إعادة التوجيه إلى صفحة تسجيل الدخول. يُفضّل استخدام طريقة إعادة التوجيه على الأجهزة الجوّالة.

لتسجيل الدخول باستخدام نافذة منبثقة، استخدِم الأمر 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

يُرجى أيضًا العِلم أنّه يمكنك استرداد رمز OAuth المميز الخاص بمزوّد خدمة Twitter والذي يمكن استخدامه لجلب بيانات إضافية باستخدام واجهات برمجة التطبيقات الخاصة بمنصة Twitter.

يمكنك أيضًا رصد الأخطاء ومعالجتها من خلالها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على مستندات Auth المرجعية.

لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول، استدعِ الدالة signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام الدالة `signInWithRedirect`.

Web

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

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

Web

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

بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بمقدّم خدمة Twitter من خلال طلب getRedirectResult عند تحميل صفحتك:

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

التعامل مع أخطاء account-exists-with-different-credential

إذا فعّلت الإعداد حساب واحد لكل عنوان بريد إلكتروني في وحدة تحكّم Firebase، عندما يحاول مستخدم تسجيل الدخول إلى مقدّم خدمة (مثل Twitter) باستخدام عنوان بريد إلكتروني مستخدَم من قبل لمقدّم خدمة آخر لمستخدم Firebase آخر (مثل Google)، سيظهر الخطأ auth/account-exists-with-different-credential مع كائن AuthCredential (الرمز المميز وكلمة المرور السرية لمصادقة OAuth على Twitter). لإكمال عملية تسجيل الدخول إلى مقدّم الخدمة المطلوب، على المستخدم أولاً تسجيل الدخول إلى مقدّم الخدمة الحالي (Google) ثم الربط بمقدّم الخدمة السابق AuthCredential (الرمز المميز وكلمة المرور السرية لمصادقة OAuth على Twitter).

إذا كنت تستخدم signInWithPopup، يمكنك التعامل مع أخطاء auth/account-exists-with-different-credential باستخدام رمز مثل المثال التالي:

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) {
  // ...
}

وضع إعادة التوجيه

يتم التعامل مع هذا الخطأ بطريقة مشابهة في وضع إعادة التوجيه، مع الاختلاف في أنّه يجب تخزين بيانات الاعتماد المعلقة مؤقتًا بين عمليات إعادة توجيه الصفحات (على سبيل المثال، باستخدام مساحة التخزين المؤقت للجلسة).

التعامل مع مسار تسجيل الدخول يدويًا

يمكنك أيضًا المصادقة باستخدام Firebase من خلال حساب على Twitter عن طريق معالجة عملية تسجيل الدخول من خلال استدعاء نقاط نهاية Twitter OAuth:

يمكنك دمج ميزة المصادقة على Twitter في تطبيقك باتّباع مستندات المطوّرين. في نهاية عملية تسجيل الدخول باستخدام Twitter، ستتلقّى رمز دخول عبر OAuth وسر OAuth.
إذا كنت بحاجة إلى تسجيل الدخول إلى تطبيق Node.js، أرسِل رمز الدخول المميز OAuth وكلمة سر OAuth إلى تطبيق Node.js.
بعد أن يسجّل المستخدم الدخول بنجاح باستخدام Twitter، استبدِل رمز الدخول وسر OAuth ببيانات اعتماد Firebase على النحو التالي:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

يمكنك المصادقة باستخدام Firebase من خلال بيانات اعتماد 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

المصادقة باستخدام Firebase في إضافة Chrome

إذا كنت بصدد إنشاء تطبيق إضافة Chrome، يُرجى الاطّلاع على دليل المستندات خارج الشاشة.

عند إنشاء مشروع، ستوفّر Firebase نطاقًا فرعيًا فريدًا لمشروعك: https://my-app-12345.firebaseapp.com.

سيتم استخدام هذا النطاق أيضًا كآلية إعادة توجيه لتسجيل الدخول باستخدام OAuth، ويجب السماح به لجميع موفّري OAuth المتوافقين. ومع ذلك، يعني هذا أنّ المستخدمين قد يرون هذا النطاق أثناء تسجيل الدخول إلى Twitter قبل إعادة التوجيه إلى التطبيق: متابعة إلى: https://my-app-12345.firebaseapp.com.

لتجنُّب عرض نطاقك الفرعي، يمكنك إعداد نطاق خاص باستخدام Firebase Hosting باتّباع الخطوات التالية:

اتّبِع الخطوات من 1 إلى 3 في إعداد نطاقك لخدمة Hosting. عند إثبات ملكية نطاقك، توفّر Hosting شهادة طبقة المقابس الآمنة (SSL) لنطاقك المخصّص.
أضِف نطاقك المخصّص إلى قائمة النطاقات المسموح بها في وحدة تحكّم Firebase: auth.custom.domain.com.
في "وحدة تحكّم مطوّري Twitter" أو صفحة إعداد OAuth، أضِف عنوان URL الخاص بصفحة إعادة التوجيه إلى القائمة البيضاء، والذي يمكن الوصول إليه على نطاقك المخصّص: https://auth.custom.domain.com/__/auth/handler.

عند إعداد مكتبة JavaScript، حدِّد نطاقك المخصّص باستخدام الحقل 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);

الخطوات التالية

بعد تسجيل المستخدم الدخول للمرة الأولى، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد، أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات مقدّم خدمة المصادقة التي سجّل المستخدم الدخول بها. يتم تخزين هذا الحساب الجديد كجزء من مشروع 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.
});auth_sign_out.js

Web

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

المصادقة باستخدام Twitter في JavaScript تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.