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

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

قبل ان تبدأ

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

تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK

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

للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK ، اتبع الخطوات التالية:

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

    Web version 9

    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();

    Web version 8

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

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

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

    Web version 9

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

    Web version 8

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

      Web version 9

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

      Web version 8

      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;
          // ...
        }).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;
          // ...
        });
      لاحظ أيضًا أنه يمكنك استرداد رمز OAuth المميز لموفر Twitter والذي يمكن استخدامه لجلب بيانات إضافية باستخدام Twitter APIs.

      هذا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الخطأ ، ألق نظرة على Auth Reference Docs .

    • لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول ، اتصل signInWithRedirect :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      بعد ذلك ، يمكنك أيضًا استرداد رمز OAuth المميز لموفر Twitter عن طريق استدعاء getRedirectResult عند تحميل صفحتك:

      Web version 9

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

      Web version 8

      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;
        }).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;
          // ...
        });
      هذا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الخطأ ، ألق نظرة على Auth Reference Docs .

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

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

  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 version 9

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

    Web version 8

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

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

إذا كنت تقوم بإنشاء تطبيق ملحق Chrome ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:

  1. افتح مشروعك في وحدة تحكم Firebase .
  2. في قسم المصادقة ، افتح صفحة طريقة تسجيل الدخول .
  3. أضف URI مثل ما يلي إلى قائمة المجالات المصرح بها:
    chrome-extension://CHROME_EXTENSION_ID

تتوفر فقط العمليات المنبثقة ( signInWithPopup و linkWithPopup و reauthenticateWithPopup ) لإضافات Chrome ، نظرًا لأن ملحقات Chrome لا يمكنها استخدام عمليات إعادة توجيه HTTP. يجب عليك استدعاء هذه الطرق من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. لا يجوز استخدام الأساليب المنبثقة إلا في الامتدادات التي تستخدم Manifest V2 . يسمح إصدار Manifest V3 الأحدث فقط بنصوص الخلفية في شكل عمال خدمة ، ولا يمكنهم تنفيذ عمليات النوافذ المنبثقة على الإطلاق.

في ملف بيان امتداد Chrome ، تأكد من إضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

بعد أن يقوم المستخدم بتسجيل الدخول لأول مرة ، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - المستخدم الذي قام بتسجيل الدخول باستخدام. يتم تخزين هذا الحساب الجديد كجزء من مشروع Firebase الخاص بك ، ويمكن استخدامه لتحديد هوية مستخدم عبر كل تطبيق في مشروعك ، بغض النظر عن كيفية تسجيل المستخدم للدخول.

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

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

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

لتسجيل خروج مستخدم ، signOut :

Web version 9

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

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

Web version 8

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