Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

قبل ان تبدأ

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

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

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

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

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

    إصدار الويب 9

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

    إصدار الويب 8

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

    إصدار الويب 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();

    إصدار الويب 8

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

    إصدار الويب 9

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

    إصدار الويب 8

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

      إصدار الويب 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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      إصدار الويب 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.

      هذا أيضًا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة من رموز الخطأ إلقاء نظرة على مستندات المرجعي أصيل .

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

      إصدار الويب 9

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

      إصدار الويب 8

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

      إصدار الويب 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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

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

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

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

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

    إصدار الويب 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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    إصدار الويب 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 ) متاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الطرق من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. ويمكن استخدام الأساليب المنبثقة الوحيد في التمديدات باستخدام المانيفستو V2 . الأحدث المانيفستو V3 يسمح فقط مخطوطات الخلفية في شكل عمال الخدمات، والتي لا يمكن تنفيذ العمليات المنبثقة على الإطلاق.

في الظاهر جعل ملف تمديد كروم الخاص بك من أن قمت بإضافة https://apis.google.com URL إلى content_security_policy allowlist.

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

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

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

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

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

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

إصدار الويب 9

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

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

إصدار الويب 8

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