المصادقة باستخدام 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:

    الويب v8

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

    الويب الإصدار 9

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

    الويب v8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    الويب الإصدار 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();
  3. اختياري: حدد معلمات إضافية مزود أوث المخصصة التي تريد إرسالها مع طلب أوث. لإضافة معلمة مخصصة، والدعوة setCustomParameters على مزود تهيئة مع كائن تحتوي على المفتاح كما هو محدد من قبل وثائق مزود أوث والقيمة المقابلة. على سبيل المثال:

    الويب v8

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

    الويب الإصدار 9

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

      الويب v8

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

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

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

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

      الويب v8

      firebase.auth().signInWithRedirect(provider);

      الويب الإصدار 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      بعد ذلك، يمكنك أيضا استرداد رمز أوث مقدم تويتر عن طريق استدعاء getRedirectResult عند تحميل الصفحة الخاصة بك:

      الويب v8

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

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

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

يمكنك أيضًا المصادقة مع 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:

    الويب v8

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

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

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

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

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

عمليات المنبثقة فقط ( signInWithPopup و linkWithPopup هي) المتاحة لملحقات كروم، وملحقات كروم لا يمكن استخدام HTTP الموجهات. يجب عليك استدعاء هذه الأساليب من برنامج نصي في الخلفية بدلاً من نافذة منبثقة لإجراء المتصفح ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة.

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

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

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

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

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

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

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

الويب v8

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

الويب الإصدار 9

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

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