شروع سریع جاوا اسکریپت

این راهنمای سریع توضیح می‌دهد که چگونه یک صفحه ساده راه‌اندازی کنید که درخواست‌هایی را به API داده یوتیوب ارسال کند. این راهنمای سریع در واقع نحوه ارسال دو درخواست API را توضیح می‌دهد:

  1. شما از یک کلید API که برنامه شما را شناسایی می‌کند، برای بازیابی اطلاعات مربوط به کانال یوتیوب GoogleDevelopers استفاده خواهید کرد.
  2. شما از یک شناسه کلاینت OAuth 2.0 برای ارسال درخواست مجاز که اطلاعات مربوط به کانال یوتیوب شما را بازیابی می‌کند، استفاده خواهید کرد.

پیش‌نیازها

برای اجرای این شروع سریع، به موارد زیر نیاز دارید:

  • Node.js و npm (برای اجرای یک وب سرور محلی)
  • دسترسی به اینترنت و مرورگر وب.
  • یک حساب گوگل.

مرحله ۱: پروژه و اعتبارنامه‌های خود را تنظیم کنید

یک پروژه در کنسول Cloud ایجاد یا انتخاب کنید. وظایف زیر را در کنسول Cloud برای پروژه خود انجام دهید:

  1. در پنل کتابخانه ، YouTube Data API نسخه ۳ را جستجو کنید. روی فهرست مربوط به آن API کلیک کنید و مطمئن شوید که API برای پروژه شما فعال شده است.

  2. در پنل اعتبارنامه‌ها ، دو اعتبارنامه ایجاد کنید:

    1. ایجاد کلید API شما از کلید API برای ارسال درخواست‌های API که نیازی به مجوز کاربر ندارند استفاده خواهید کرد. به عنوان مثال، برای بازیابی اطلاعات مربوط به یک کانال عمومی YouTube نیازی به مجوز کاربر ندارید.

    2. یک شناسه کلاینت OAuth 2.0 ایجاد کنید. نوع برنامه را روی برنامه وب تنظیم کنید. برای درخواست‌هایی که نیاز به مجوز کاربر دارند، باید از اعتبارنامه‌های OAuth 2.0 استفاده کنید. به عنوان مثال، برای بازیابی اطلاعات مربوط به کانال یوتیوب کاربر احراز هویت شده فعلی، به مجوز کاربر نیاز دارید.

      در فیلد Authorized JavaScript origins ، آدرس اینترنتی http://localhost:8000 را وارد کنید. می‌توانید فیلد Authorized redirect URIs را خالی بگذارید.

مرحله ۲: نمونه را تنظیم و اجرا کنید

از ویجت APIs Explorer در پنل کناری برای دریافت کد نمونه جهت بازیابی اطلاعات مربوط به کانال یوتیوب GoogleDevelopers استفاده کنید. این درخواست از یک کلید API برای شناسایی برنامه شما استفاده می‌کند و نیازی به تأیید کاربر یا هیچ مجوز خاصی از سوی کاربری که نمونه را اجرا می‌کند، ندارد.

  1. مستندات مربوط به متد channels.list مربوط به API را باز کنید.
  2. در آن صفحه، بخش «موارد استفاده رایج» شامل جدولی است که چندین روش رایج استفاده از این روش را توضیح می‌دهد. اولین فهرست در جدول مربوط به فهرست کردن نتایج بر اساس شناسه کانال است.

    برای باز کردن و نمایش تمام صفحه API Explorer، روی نماد کد در اولین فهرست کلیک کنید.

    تصویری که محل پیوند نماد کد را در جدولی که موارد استفاده برای مستندات channels.list را فهرست می‌کند، مشخص می‌کند. متن جایگزین برای آن تصویر، تصویر را به عنوان یک نماد کد شناسایی می‌کند و مورد استفاده مرتبط با آن پیوند را مشخص می‌کند.

  3. سمت چپ API Explorer تمام صفحه موارد زیر را نشان می‌دهد:

    1. در زیر هدر پارامترهای درخواست ، لیستی از پارامترهایی که متد پشتیبانی می‌کند، وجود دارد. مقادیر پارامترهای part و id باید تنظیم شوند. مقدار پارامتر id ، UC_x5XG1OV2P6uZZ5FSM9Ttw ، شناسه کانال یوتیوب GoogleDevelopers است.

    2. در زیر پارامترها، بخشی به نام Credentials وجود دارد. منوی کشویی در آن بخش باید مقدار کلید API را نمایش دهد. APIs Explorer به طور پیش‌فرض از اعتبارنامه‌های آزمایشی استفاده می‌کند تا شروع کار آسان‌تر شود. اما شما از کلید API خودتان برای اجرای نمونه به صورت محلی استفاده خواهید کرد.

      تصویری که «اعتبارنامه‌ها» را در مرورگر APIهای تمام‌صفحه و منوی کشویی با گزینه «کلید API» انتخاب‌شده نشان می‌دهد.

  4. سمت راست API Explorer تمام صفحه، تب‌هایی با نمونه کدها به زبان‌های مختلف را نشان می‌دهد. تب جاوا اسکریپت را انتخاب کنید.

  5. نمونه کد را کپی کرده و آن را در فایلی با نام example.html ذخیره کنید.

  6. در نمونه‌ای که دانلود کرده‌اید، رشته YOUR_API_KEY را پیدا کنید و آن را با کلید API که در مرحله ۱ این راهنمای سریع ایجاد کرده‌اید، جایگزین کنید.

  7. وب سرور را با استفاده از دستور زیر از دایرکتوری کاری خود شروع کنید:

    npx http-server -p 8000
    
  8. فایل example.html را در مرورگر خود باز کنید. همچنین ابزارهای توسعه‌دهنده مرورگر، مانند «ابزارهای توسعه‌دهنده» در مرورگر کروم را نیز باز کنید.

    1. برای بارگذاری کتابخانه کلاینت APIهای گوگل برای جاوا اسکریپت، روی دکمه بارگذاری در صفحه کلیک کنید. پس از کلیک روی دکمه، کنسول توسعه‌دهنده باید یادداشتی را نشان دهد که نشان می‌دهد کلاینت GAPI بارگذاری شده است.

    2. برای ارسال درخواست API، روی دکمه‌ی اجرا کلیک کنید. سپس کنسول توسعه‌دهنده باید پاسخ API را نمایش دهد.

مرحله ۳: اجرای یک درخواست مجاز

در این مرحله، نمونه کد خود را طوری تغییر خواهید داد که به جای بازیابی اطلاعات مربوط به کانال یوتیوب GoogleDevelopers، اطلاعات مربوط به کانال یوتیوب شما را بازیابی کند. این درخواست نیاز به مجوز کاربر دارد.

  1. به مستندات مربوط به متد channels.list مربوط به API برگردید.

  2. در بخش «موارد استفاده رایج»، روی نماد کد برای سومین مورد در جدول کلیک کنید. آن مورد استفاده، فراخوانی متد list برای «کانال من» است.

  3. دوباره، در سمت چپ API Explorer تمام صفحه، فهرستی از پارامترها و به دنبال آن بخش Credentials را مشاهده خواهید کرد. با این حال، دو تغییر نسبت به مثالی که در آن اطلاعات مربوط به کانال GoogleDevelopers را بازیابی کردید، وجود دارد:

    1. در بخش پارامترها، به جای تنظیم مقدار پارامتر id ، مقدار پارامتر mine باید روی true تنظیم شود. این به سرور API دستور می‌دهد تا اطلاعات مربوط به کانال کاربر احراز هویت شده فعلی را بازیابی کند.

    2. در بخش اعتبارنامه‌ها ، منوی کشویی باید گزینه Google OAuth 2.0 را انتخاب کند.

      علاوه بر این، اگر روی لینک نمایش محدوده‌ها کلیک کنید، محدوده‌ی https://www.googleapis.com/auth/youtube.readonly باید تیک خورده باشد.

      تصویری که محدوده‌ها را در مرورگر API تمام‌صفحه نشان می‌دهد و گزینه استفاده از اعتبارنامه‌های «Google OAuth 2.0» انتخاب شده است.

  4. همانند مثال قبلی، تب جاوا اسکریپت را انتخاب کنید، نمونه کد را کپی کنید و آن را در example.html ذخیره کنید.

    در کد، رشته YOUR_CLIENT_ID را پیدا کنید و آن را با شناسه کلاینتی که در مرحله 1 این راهنمای سریع ایجاد کرده‌اید، جایگزین کنید.

  5. وب سرور را با استفاده از دستور زیر از دایرکتوری کاری خود شروع کنید:

    npx http-server -p 8000
    
  6. در مرورگر خود به آدرس http://localhost:8000/example.html بروید. ابزارهای توسعه‌دهنده مرورگر، مانند «ابزارهای توسعه‌دهنده» در مرورگر کروم را باز کنید.

  7. برای بارگیری کتابخانه کلاینت APIهای گوگل برای جاوا اسکریپت و شروع فرآیند مجوزدهی، روی دکمه «مجوز و بارگذاری» در صفحه کلیک کنید. از شما خواسته می‌شود که به برنامه اجازه خواندن داده‌ها از حساب یوتیوب خود را بدهید.

    اگر این مجوز را اعطا کنید، کنسول توسعه‌دهنده باید پیام‌هایی را نشان دهد که نشان می‌دهد ورود به سیستم موفقیت‌آمیز بوده و کلاینت API بارگیری شده است.

  8. برای ارسال درخواست API، روی دکمه‌ی اجرا کلیک کنید. سپس کنسول توسعه‌دهنده باید پاسخ API را نمایش دهد.

مطالعه بیشتر