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

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

قبل البدء

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

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

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

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

  1. إنشاء مثيل لكائن موفر Twitter:

    واجهة برمجة التطبيقات Web modular API

    import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();
    auth_twitter_provider_create.js

    واجهة برمجة التطبيقات لمساحة الاسم على الويب

    var provider = new firebase.auth.TwitterAuthProvider();
    twitter.js
  2. اختياري: لأقلمة مسار OAuth لدى الموفّر إلى لغة المستخدم المفضّلة بدون تمرير معلَمات OAuth المخصصة ذات الصلة بشكل صريح، يمكنك تعديل رمز اللغة في مثيل المصادقة قبل بدء مسار OAuth. على سبيل المثال:

    واجهة برمجة التطبيقات Web modular API

    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

    واجهة برمجة التطبيقات لمساحة الاسم على الويب

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  3. اختياري: حدِّد المزيد من مَعلمات موفّر OAuth المخصّصة التي تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، يمكنك استدعاء setCustomParameters في موفّر الخدمة الذي تم إعداده باستخدام عنصر يحتوي على المفتاح كما هو محدّد في مستندات موفّر OAuth والقيمة المقابلة. على سبيل المثال:

    واجهة برمجة التطبيقات Web modular API

    provider.setCustomParameters({
  'lang': 'es'
});
    auth_twitter_provider_params.js

    واجهة برمجة التطبيقات لمساحة الاسم على الويب

    provider.setCustomParameters({
  'lang': 'es'
});
    twitter.js
    غير مسموح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. يُرجى الاطّلاع على مرجع موفّر المصادقة لمزيد من التفاصيل.
  4. المصادقة مع Firebase باستخدام كائن موفِّر خدمة Twitter. يمكنك أن تطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Twitter إما من خلال فتح نافذة منبثقة أو إعادة التوجيه إلى صفحة تسجيل الدخول. وننصح باستخدام طريقة إعادة التوجيه على الأجهزة الجوّالة.
    • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:

      واجهة برمجة التطبيقات Web modular API

      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

      واجهة برمجة التطبيقات لمساحة الاسم على الويب

      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.

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

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

      واجهة برمجة التطبيقات Web modular API

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

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

      واجهة برمجة التطبيقات لمساحة الاسم على الويب

      firebase.auth().signInWithRedirect(provider);
      index.js
      يمكنك بعد ذلك استرداد رمز OAuth المميز لموفِّر خدمة Twitter من خلال طلب الرمز getRedirectResult عند تحميل الصفحة:

      واجهة برمجة التطبيقات Web modular API

      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

      واجهة برمجة التطبيقات لمساحة الاسم على الويب

      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
      ويمكنك هنا أيضًا رصد الأخطاء ومعالجتها. للحصول على قائمة برموز الأخطاء، يمكنك الاطّلاع على المستندات المرجعية للمصادقة.

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

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

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

    واجهة برمجة التطبيقات Web modular API

    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

    واجهة برمجة التطبيقات لمساحة الاسم على الويب

    // 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، ويمكن استخدامه لتحديد مستخدم على مستوى كل تطبيق في مشروعك، بغض النظر عن كيفية تسجيل المستخدم للدخول.

  • الطريقة التي ننصح بها في تطبيقاتك لمعرفة حالة المصادقة للمستخدم هي ضبط مراقب على كائن Auth. يمكنك بعد ذلك الحصول على معلومات الملف الشخصي الأساسية للمستخدم من كائن User. يُرجى الاطّلاع على إدارة المستخدمين.

  • في قاعدة بيانات Firebase في الوقت الفعلي وقواعد أمان Cloud Storage، يمكنك الحصول على رقم تعريف المستخدم الفريد للمستخدم الذي سجّل الدخول من المتغيّر auth واستخدامه للتحكّم في البيانات التي يمكن للمستخدم الوصول إليها.

يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام عدة موفِّري مصادقة من خلال ربط بيانات اعتماد موفِّر المصادقة بحساب مستخدم حالي.

لتسجيل خروج مستخدم، يمكنك الاتصال بالرقم signOut:

واجهة برمجة التطبيقات Web modular API

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