تمرير رمز الحامل في طلبات جلب

في تطوير الويب الحديث، تعتبر التواصل الآمن بين العميل والخادم أمرًا حيويًا. إحدى الطرق الشائعة لضمان هذه الأمان هي استخدام رمز الوصول (Bearer Token) للمصادقة على واجهة برمجة التطبيقات (API). ستوجهك هذه المدونة خلال ما هو رمز الوصول، ولماذا هو مهم، وكيفية تمرير رمز الوصول في طلبات Fetch.

ما هو رمز الوصول؟

رمز الوصول (bearer token) هو نوع من رموز الوصول يسمح لحامل الرمز بالوصول إلى مورد معين. وعادةً ما يُستخدم في المصادقة باستخدام OAuth 2.0. يتم إصدار الرمز من قبل خادم المصادقة ويجب تضمينه في رؤوس طلب HTTP عند إجراء مكالمات API إلى نقاط النهاية المحمية.

لماذا تستخدم رموز الوصول؟

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

ما هي طلبات Fetch؟

طلبات Fetch هي وسيلة لإجراء طلبات الشبكة في JavaScript، وغالبًا ما تستخدم لجلب الموارد من الخادم. توفر واجهة برمجة تطبيقات Fetch واجهة حديثة ومرنة لإجراء طلبات HTTP، وتقدم مجموعة ميزات أكثر قوة ومرونة مقارنة بـ XMLHttpRequest الأقدم.

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

البنية الأساسية

البنية الأساسية لطلب Fetch هي كما يلي:

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('كان هناك مشكلة في استجابة الشبكة');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('كان هناك مشكلة في عملية fetch الخاصة بك:', error));

• url: عنوان URL للمورد الذي ترغب في جلبه.
• options: كائن اختياري يحتوي على أي إعدادات مخصصة للطلب (مثل، الطريقة، الرؤوس، الجسم).

مثال

إليك مثال بسيط على طلب GET باستخدام واجهة برمجة تطبيقات Fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('خطأ:', error));

يسترجع هذا الطلب البيانات من عنوان URL المحدد ويدونها في وحدة التحكم.

الحصول على رمز وصول لطلبات Fetch

قبل إجراء الطلبات، تحتاج إلى الحصول على رمز وصول. يتضمن ذلك عادةً المصادقة مع خادم OAuth 2.0. إليك مثال مبسط للحصول على رمز:

const tokenUrl = 'https://auth.server.com/token';
const clientId = 'معرف العميل الخاص بك';
const clientSecret = 'سر العميل الخاص بك';

async function getToken() {
    const response = await fetch(tokenUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
    });
    const data = await response.json();
    return data.access_token;
}

تمرير رمز الوصول في طلبات Fetch

بمجرد الحصول على رمز الوصول، يمكنك استخدامه لإجراء طلبات API مصادق عليها. يجب تضمين الرمز في رأس Authorization لطلب Fetch الخاص بك.

async function fetchData() {
    const token = await getToken();
    const apiUrl = 'https://api.server.com/data';

    const response = await fetch(apiUrl, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
        },
    });

    if (!response.ok) {
        throw new Error(`خطأ: ${response.statusText}`);
    }

    const data = await response.json();
    console.log(data);
}

مثال: جلب بيانات محمية

دعونا نتناول مثالاً كاملاً حيث نقوم بجلب بيانات محمية من واجهة API باستخدام رمز وصول.

1. احصل على الرمز: أولاً، نحتاج إلى الحصول على الرمز من خادم المصادقة.
2. قم بإجراء الطلب: بعد ذلك، نستخدم الرمز لإجراء طلب GET إلى نقطة النهاية المحمية لواجهة API.

إليك الكود الكامل:

async function getToken() {
    const tokenUrl = 'https://auth.server.com/token';
    const clientId = 'معرف العميل الخاص بك';
    const clientSecret = 'سر العميل الخاص بك';

    const response = await fetch(tokenUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`,
    });

    if (!response.ok) {
        throw new Error('فشل في الحصول على الرمز');
    }

    const data = await response.json();
    return data.access_token;
}

async function fetchData() {
    try {
        const token = await getToken();
        const apiUrl = 'https://api.server.com/data';

        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json',
            },
        });

        if (!response.ok) {
            throw new Error(`خطأ: ${response.statusText}`);
        }

        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('خطأ في جلب البيانات:', error);
    }
}

fetchData();

كيفية تمرير رموز الوصول في طلبات Fetch باستخدام Apidog

عند العمل مع واجهات برمجة التطبيقات التي تتطلب المصادقة، تعتبر تمرير رموز الوصول في طلبات Fetch مهمة شائعة. بينما يمكن القيام بذلك يدويًا من خلال إضافة الرمز إلى رؤوس الطلب، توفر Apidog وسيلة أكثر ملاءمة للتعامل مع رموز الوصول دون كتابة كود. في هذه المدونة، سنستكشف كيف تبسط Apidog عملية تمرير رموز الوصول في طلبات Fetch.

ما هو Apidog؟

Apidog هو أداة قوية لاختبار واجهات برمجة التطبيقات، وتصميمها، ووثائقها تتيح للمطورين اختبار والتفاعل بسهولة مع واجهات API. يوفر واجهة سهلة الاستخدام لإرسال طلبات HTTP، وإدارة المصادقة، وفحص الاستجابات. تدعم Apidog طرق المصادقة المختلفة، بما في ذلك رموز الوصول.

استخدم Apidog للحصول على رمز وصول

الحصول على رمز وصول صالح هو الخطوة الأولى لإرسال الطلب. يعد استخدام Apidog للحصول على رمز وصول لطلبات API الخاصة بك سهلاً دون الحاجة للبرمجة. إليك كيف:

المتطلبات المسبقة:
قبل أن نبدأ، تأكد من أن لديك ما يلي:

• الوصول إلى وثائق واجهة API أو نقاط النهاية الخاصة بالمصادقة
• البيانات اللازمة (مثل، اسم المستخدم، كلمة المرور، معرف العميل، سر العميل)
• تثبيت Apidog على جهازك

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا
قم بتشغيل تطبيق Apidog وأنشئ طلبًا جديدًا من خلال النقر على زر "طلب جديد".

الخطوة 2: تكوين طلب المصادقة
في لوحة تكوين الطلب، أدخل عنوان URL الخاص بنقطة النهاية الخاصة بالمصادقة المقدمة من وثائق واجهة API أو ببساطة استورد cURL إلى Apidog. تكون هذه النقطة في العادة مسؤولة عن إصدار رموز الوصول عند المصادقة الناجحة.

قم بتعيين طريقة HTTP إلى POST (أو الطريقة المناسبة التي تحددها وثائق واجهة API).

الخطوة 3: تعيين رؤوس الطلب
إذا كانت واجهة API تتطلب أي رؤوس محددة لطلب المصادقة، أضفها في علامة "الرؤوس" في لوحة تكوين الطلب. تتضمن الرؤوس الشائعة Content-Type و Accept.

الخطوة 4: تكوين جسم الطلب
في علامة "الجسم" في لوحة تكوين الطلب، اختر نوع الجسم المناسب (مثل، JSON، بيانات النموذج) وأدخل المعلمات اللازمة للمصادقة. تتضمن هذه المعلمات عادة:

• اسم المستخدم وكلمة المرور
• معرف العميل وسر العميل
• نوع المنح (مثل، "كلمة المرور"، "client_credentials")

ارجع إلى وثائق واجهة API للمعلمات المحددة وصيغها.

الخطوة 5: إرسال طلب المصادقة
بمجرد تكوين طلب المصادقة، انقر على زر "إرسال" لإرسال الطلب إلى خادم API.

الخطوة 6: فحص الاستجابة
بعد إرسال الطلب، ستعرض Apidog استجابة API في لوحة الاستجابة. ابحث عن رمز الوصول في جسم الاستجابة. عادة ما يتم إرجاعه ككائن JSON مع مفتاح باسم "access_token" أو ما شابه.

الخطوة 7: نسخ رمز الوصول
حدد موقع رمز الوصول في جسم الاستجابة وانسخه إلى الحافظة الخاصة بك. ستحتاج إلى هذا الرمز لمصادقة الطلبات المستقبلية لـ API.

الخطوة 8: حفظ رمز الوصول (اختياري)
إذا كنت ترغب في إعادة استخدام رمز الوصول للطلبات المستقبلية، يمكنك حفظه في متغيرات البيئة في Apidog. يتيح لك ذلك الإشارة بسهولة إلى الرمز في الطلبات الأخرى دون الحاجة إلى نسخه ولصقه يدويًا في كل مرة.

تمرير رمز الوصول باستخدام Apidog

يسهل Apidog تمرير رموز الوصول في طلبات Fetch. إليك كيف يمكنك القيام بذلك:

الخطوة 1. افتح Apidog: قم بتشغيل تطبيق Apidog وأنشئ طلبًا جديدًا.

الخطوة 2. تكوين المصادقة: في لوحة تكوين الطلب، حدد علامة "المصادقة". من القائمة المنسدلة، اختر "رمز الوصول" كنوع المصادقة.

الخطوة 3. أدخل رمز الوصول: في حقل الإدخال المقدم، أدخل رمز الوصول الخاص بك. يخزن Apidog الرمز بأمان ويضيفه تلقائيًا إلى رؤوس الطلب عند إرسال الطلب.

الخطوة 4: إرسال الطلب: مع تكوين رمز الوصول، يمكنك الآن إرسال الطلب إلى نقطة النهاية لإدارة API. سيشمل Apidog الرمز تلقائيًا في رأس Authorization للطلب، بتنسيق Bearer your-bearer-token.

الخطوة 5: عرض الاستجابة: بمجرد إرسال الطلب، سيعرض Apidog استجابة API. يمكنك فحص جسم الاستجابة، والرؤوس، ورمز الحالة للتحقق من نجاح المصادقة والوصول إلى المورد المحمي.

فوائد استخدام Apidog لرموز الوصول:

1. تبسيط المصادقة:

يقضي Apidog على الحاجة إلى إضافة رمز الوصول يدويًا إلى رؤوس الطلب في الكود الخاص بك. يعالج المصادقة بسلاسة، مما يوفر لك الوقت والجهد.

2. اختبار وتصحيح الأخطاء بسهولة

مع Apidog، يمكنك اختبار وتصحيح واجهات API التي تتطلب مصادقة رمز الوصول بسرعة. يمكنك بسهولة التبديل بين الرموز المختلفة، وفحص الطلبات والاستجابات، وحل أي مشكلات متعلقة بالمصادقة.

3. التعاون والمشاركة

تسمح لك Apidog بمشاركة طلبات واجهة API والمستندات مع أعضاء الفريق. يمكنك التعاون في تطوير واجهة API، والاختبار، والتوثيق، مما يضمن وصول الجميع إلى تفاصيل المصادقة اللازمة.

الخاتمة

يعد تمرير رموز الوصول في طلبات Fetch متطلبًا شائعًا عند العمل مع واجهات API المصادق عليها. بينما يمكن القيام بذلك يدويًا في الكود، تقدم Apidog حلاً خاليًا من المتاعب. من خلال الاستفادة من ميزة مصادقة رموز الوصول في Apidog، يمكنك تضمين الرموز بسهولة في طلباتك دون كتابة أي كود. يقوم ذلك بتبسيط عملية المصادقة، وتعزيز الأمان، وتسهيل اختبار وتصحيح واجهات API. جرب Apidog واختبر راحة مصادقة رموز الوصول بلا جهد في سير العمل الخاص بتطوير واجهات API الخاصة بك.