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

يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حساباتهم على Twitter. من خلال دمج مصادقة Twitter في تطبيقك يمكنك دمج Twitter المصادقة إما عن طريق استخدام Firebase SDK لتنفيذ عملية تسجيل الدخول أو من خلال تنفيذ مسار 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) لJavaScript لمنصّة Firebase، اتّبِع الخطوات التالية: الخطوات:

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

   Web

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

   Web

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

2. اختياري: لترجمة مسار OAuth لدى الموفّر إلى الإعدادات المفضّلة للمستخدم بدون تمرير معلمات OAuth المخصصة ذات الصلة بشكل صريح، يمكنك تحديث اللغة الرمز في مثيل Auth قبل بدء مسار OAuth. على سبيل المثال:

   Web

   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

   Web

   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

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

   Web

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

   غير مسموح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. يمكنك الاطّلاع على مرجع موفِّر المصادقة لمزيد من التفاصيل.
4. المصادقة مع Firebase باستخدام كائن موفِّر خدمة Twitter. يمكنك أن تطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Twitter إما من خلال فتح أو عبر إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه هي ويفضلها على الأجهزة المحمولة.
   • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:

     Web

     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

     Web

     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

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

     Web

     firebase.auth().signInWithRedirect(provider);
     index.js

     وبعد ذلك، يمكنك أيضًا استرداد رمز OAuth المميز لموفر Twitter من خلال استدعاء getRedirectResult عند تحميل صفحتك:

     Web

     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

     Web

     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

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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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

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

   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

   Web

   // 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 Realtime Database وCloud Storage قواعد الأمان، تتيح لك الحصول على معرّف المستخدم الفريد للمستخدم الذي سجّل الدخول من المتغير auth، واستخدامها للتحكم في البيانات التي يمكن للمستخدم الوصول إليها

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

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

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