المصادقة باستخدام تويتر في جافا سكريبت

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

قبل ان تبدأ

  1. أضف Firebase إلى مشروع JavaScript الخاص بك .
  2. في وحدة تحكم Firebase ، افتح قسم المصادقة .
  3. في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر Twitter .
  4. أضف مفتاح واجهة برمجة التطبيقات (API) وسر واجهة برمجة التطبيقات (API) من وحدة تحكم المطور الخاصة بهذا الموفر إلى تكوين الموفر:
    1. سجل تطبيقك كتطبيق مطور على تويتر واحصل على مفتاح 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 modular API

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

    Web namespaced API

    var provider = new firebase.auth.TwitterAuthProvider();
  2. اختياري : لتوطين تدفق OAuth الخاص بالموفر إلى اللغة المفضلة للمستخدم دون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، قم بتحديث رمز اللغة في مثيل Auth قبل بدء تدفق 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();

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'lang': 'es'
    });
    لا يُسمح بمعلمات 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);
          // ...
        });

      Web namespaced API

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

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

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

      Web modular API

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

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بموفر تويتر عن طريق الاتصال بـ 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);
          // ...
        });

      Web namespaced API

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

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

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

  1. قم بدمج مصادقة 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);
        // ...
      });

    Web namespaced API

    // 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، فراجع دليل المستندات خارج الشاشة .

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

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

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

  • في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير 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.
});

Web namespaced API

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

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

قبل ان تبدأ

  1. أضف Firebase إلى مشروع JavaScript الخاص بك .
  2. في وحدة تحكم Firebase ، افتح قسم المصادقة .
  3. في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر Twitter .
  4. أضف مفتاح واجهة برمجة التطبيقات (API) وسر واجهة برمجة التطبيقات (API) من وحدة تحكم المطور الخاصة بهذا الموفر إلى تكوين الموفر:
    1. سجل تطبيقك كتطبيق مطور على تويتر واحصل على مفتاح 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 modular API

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

    Web namespaced API

    var provider = new firebase.auth.TwitterAuthProvider();
  2. اختياري : لتوطين تدفق OAuth الخاص بالموفر إلى اللغة المفضلة للمستخدم دون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، قم بتحديث رمز اللغة في مثيل Auth قبل بدء تدفق 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();

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'lang': 'es'
    });
    لا يُسمح بمعلمات 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);
          // ...
        });

      Web namespaced API

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

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

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

      Web modular API

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

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بموفر تويتر عن طريق الاتصال بـ 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);
          // ...
        });

      Web namespaced API

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

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

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

  1. قم بدمج مصادقة 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);
        // ...
      });

    Web namespaced API

    // 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، فراجع دليل المستندات خارج الشاشة .

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

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

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

  • في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير 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.
});

Web namespaced API

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

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

قبل ان تبدأ

  1. أضف Firebase إلى مشروع JavaScript الخاص بك .
  2. في وحدة تحكم Firebase ، افتح قسم المصادقة .
  3. في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين موفر Twitter .
  4. أضف مفتاح واجهة برمجة التطبيقات (API) وسر واجهة برمجة التطبيقات (API) من وحدة تحكم المطور الخاصة بهذا الموفر إلى تكوين الموفر:
    1. سجل تطبيقك كتطبيق مطور على تويتر واحصل على مفتاح 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 modular API

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

    Web namespaced API

    var provider = new firebase.auth.TwitterAuthProvider();
  2. اختياري : لتوطين تدفق OAuth الخاص بالموفر إلى اللغة المفضلة للمستخدم دون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، قم بتحديث رمز اللغة في مثيل Auth قبل بدء تدفق 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();

    Web namespaced API

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

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'lang': 'es'
    });
    لا يُسمح بمعلمات 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);
          // ...
        });

      Web namespaced API

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

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

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

      Web modular API

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

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      بعد ذلك، يمكنك أيضًا استرداد رمز 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);
          // ...
        });

      Web namespaced API

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

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

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

  1. قم بدمج مصادقة 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);
        // ...
      });

    Web namespaced API

    // 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، فراجع دليل المستندات خارج الشاشة .

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

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

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

  • في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير 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.
});

Web namespaced API

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