blog

Video Streaming Authentication Architecture Design

NEXTREE.

• 5 min read
Video Streaming Authentication Architecture Design

-ReactPlayer asosida video qo'llanmalar xizmatini yaratish misoli-

1. Loyihaning tavsifi

Ushbu holat PDF asosidagi foydalanuvchi qo'llanmasi tizimini videokontentga asoslangan xizmatga aylantirish uchun amalga oshirilgan loyiha. Mavjud tizimda foydalanuvchi qo'llanma tugmasini bosganda, Frontend AWS S3 ga bevosita kirishib PDF faylini yuklab olish strukturasidan foydalangan. Ushbu usulning amalga oshirilishi oddiy edi, lekin foydalanuvchiga haqiqiy ish ekranini va qo'llanmani bir vaqtda ko'rish qiyin bo'lib, murakkab protseduralarni intuitiv tarzda yetkazish cheklovlari mavjud edi.

Mijoz uzatishni davom ettirish tizimda foydalanuvchi ish ekranini saqlab qolgan holda qo'llanma videolarini birgalikda ko'rish imkonini beruvchi PIP (Rasmda rasm) funktsiyasini talab qildi. Shu bilan birga, xavfsizlik siyosati bo'yicha AWS S3 ga bevosita kirishni cheklashimiz kerak edi va URL parametrlarida sezgir autentifikatsiya ma'lumotlarini o'z ichiga olmaslik cheklovlari ham mavjud edi. Shuning uchun ushbu loyihaning asosiy vazifasi oddiy video qayta o'ynash funksiyasini amalga oshirish emas, balki brauzerga asoslangan video qayta o'ynash tuzilmasi va xavfsizlik talablari bilan birgalikda muvofiq keladigan autentifikatsiya va oqim tuzilmasini loyihalashdir.

2. Texnika tanlash va loyihalash yo'nalishi

Frontend sohasida ReactPlayer nomli React asosidagi video o'ynatuvchi kutubxonasi joriy etildi. ReactPlayer HTML5 video tegi asosida ishlaydi va React muhitiga yuqori moslikka ega, shuningdek, PIP funksiyasi va qayta o'ynash holatini boshqarish nisbatan oson bo'lgan afzalliklarga ega.

Faqat ReactPlayer ichki jihatidan video tegining so''rov usulidan foydalanadi, shuning uchun videoni o''z ichiga olgan fayl so''rovi asosan GET usulida amalga oshiriladi. Oddiy API chaqirishi kabi so''rov tanasida autentifikatsiya ma'lumotlarini joylashtirish yoki boshni erkin tashkil etish qiyinligi tufayli, autentifikatsiya jarayoni va haqiqiy video o''ynash so''rovini ajratish dizayni zarur bo'ldi.

Namuna koodi 1. ReactPlayer chaqirishi misoli

<ReactPlayer
  url={videoEndpoint}
  controls
  pip
  playing={false}
  width="100%"
  height="100%"
/>

Ushbu misol ReactPlayer serverdan olingan video pleerligi nuqtasida videoni qayta o'ynash tuzilmasini ko'rsatadi. Tasdiqlash ma'lumotlari URLga kiritilmagan, balki oldindan tasdiqlash bosqichida berilgan vaqtinchalik tokenni Cookie orqali uzatish usuli bilan boshqarilgan.

3. Arxitekturani qayta loyihalash

Mavjud tuzilma Frontend-ning AWS S3 ga to'g'ridan-to'g'ri kirish usuli edi. Biroq, video mazmunini taqdim etishda bir xil tuzilmani saqlash, xotira yo'lini oshkor qilish, URLni qayta ishlatish, kirish nazoratini chetlab o'tish xavfini keltirib chiqarishi mumkin edi. Shu sababli, quyidagi tarzda serverning rolini ajratdik.

Frontend
  -> Server A (사용자 인증 및 스트리밍 요청 중계)
  -> Server B (파일 조회 전용 서버)
  -> AWS S3

Server A foydalanuvchi autentifikatsiyasi, huquqni tekshirish, vaqtinchalik token ishlab chiqarish, streaming so'rovlarini o'rnatishga mas'uldir. Server B haqiqiy video fayllarni ko'rish va faqat AWS S3 ga kirishni ta'minlash uchun ajratildi. Bu orqali mijoz xotira yo'lini to'g'ridan-to'g'ri bilishiga to'sqinlik qiladi va barcha video so'rovlari serverning autentifikatsiya nazoratidan o'tishi uchun tashkil etilgan.

4. Tasdiq va qayta tiklash oqimi

Foydalanuvchi qo'lda tugmachasini bosganda, video pleerni darhol chaqirmasdan oldin, avvalo Server A ga foydalanuvchini tasdiqlash API'sini so'raydi. Tasdiqlashning tugashi bilan Server A video o'ynatish uchun endpoint va amal qilish muddati cheklangan vaqtinchalik tokenni chiqaradi. Vaqtinchalik token brauzer Cookie'sida saqlanadi va keyinchalik ReactPlayer video endpointni chaqirganda birga uzatiladi.

Namuna kod 2. Video o'ynatish ma'lumotlarini so'rash

const openManualVideo = async (manualId: string) => {
  const response = await api.get(`/api/videos/${manualId}/authorize`);
  setVideoEndpoint(response.data.videoEndpoint);
  setManualModalOpen(true);
};

Ushbu kod, qo'llanma tugmasini bosganida video o'ynatish endpointini avval so'ragan misoldir. Ushbu bosqichda server foydalanuvchi huquqlarini tekshiradi va vaqtinchalik tokenni Cookiega saqlashni javob beradi.

Namuna kod 3. Vaqtiy token Cookie taqdimoti misoli

ResponseCookie cookie = ResponseCookie.from("VIDEO_ACCESS_TOKEN", token)
    .httpOnly(true)
    .secure(true)
    .path("/api/videos/")
    .maxAge(Duration.ofMinutes(30))
    .sameSite("Strict")
    .build();

return ResponseEntity.ok()
    .header(HttpHeaders.SET_COOKIE, cookie.toString())
    .body(new VideoAuthorizeResponse(videoEndpoint));

Cookie'lar uchun HttpOnly, Secure, SameSite parametrlarini qo'llash orqali skript kirishi va keraksiz tashqi uzatmalarni cheklash amalga oshirildi. Shuningdek, path va maxAge belgilab, videolarni so'rashga cheklangan tarzda foydalanilishi ko'zda tutilgan.

5. Streaming translyatsiyasi

Videoni oqimda tarqatish oddiy faylni yuklab olishdan farqli o'laroq, katta hajmdagi ma'lumotlarni uzluksiz uzatadi va foydalanuvchi ijro joyini o'zgartirganda Range Headerga asoslangan qism so'rovi yuzaga kelishi mumkin. Shuning uchun Server A mijozning Range Headerini Server B ga uzatishi va Server B ning javob holati va asosiy sarlavhalarini yana mijozga uzatishi kerak.

Namuna kodi 4. Range Header asosidagi oqim ko'chirish

@GetMapping("/api/videos/{manualId}/stream")
public Mono>> stream(
    @PathVariable String manualId,
    @RequestHeader(value = HttpHeaders.RANGE, required = false) String range
) {
  return webClient.get()
      .uri("/internal/files/{manualId}", manualId)
      .headers(headers -> {
        if (range != null) headers.set(HttpHeaders.RANGE, range);
      })
      .exchangeToMono(response -> {
        Flux body = response.bodyToFlux(DataBuffer.class);
        ResponseEntity.BodyBuilder builder = ResponseEntity.status(response.statusCode());
        response.headers().asHttpHeaders().forEach((name, values) -> {
          if (isStreamingHeader(name)) builder.header(name, values.toArray(String[]::new));
        });
        return Mono.just(builder.body(body));
      });
}

Bu usulning asosiy tamoyili bodyToMono(Resource.class) yoki bodyToMono(byte[].class) kabi butun faylni xotiraga yuklamaslikdir. bodyToFlux(DataBuffer.class) dan foydalanish orqali video ma'lumotlarini chunk (bo'lak) ko'rsatkichida etkazib berish mumkin, bu esa katta hajmli video ishlov berish uchun mos keladi.

Namuna kodi 5. Asosiy oqim sarlavhalarini filtrlash

private boolean isStreamingHeader(String name) {
  return HttpHeaders.CONTENT_TYPE.equalsIgnoreCase(name)
      || HttpHeaders.CONTENT_LENGTH.equalsIgnoreCase(name)
      || HttpHeaders.CONTENT_RANGE.equalsIgnoreCase(name)
      || HttpHeaders.ACCEPT_RANGES.equalsIgnoreCase(name)
      || HttpHeaders.CACHE_CONTROL.equalsIgnoreCase(name);
}

Content-Range, Accept-Ranges, Content-Length kabi sarlavhalar brauzerga videoning uzunligini va qism javob diapazonini aniqlash uchun zarur. Ayniqsa, navigatsiya funksiyasi va barqaror rekvizitlarni ta'minlash uchun ushbu sarlavhalarni saqlash muhimdir.

6. Natija va ta'sirlar

Ijro natijalariga ko'ra, foydalanuvchilar brauzerda darhol videoni o'ynata olishdi, va PIP funksiyasi orqali haqiqiy ish ekranini va video qo'llanmani bir vaqtning o'zida ishlatish imkoniyatiga ega bo'lishdi. Shuningdek, AWS S3 ga to'g'ridan-to'g'ri kirishni olib tashlab, server asosidagi kirishni boshqarishni qo'llagan holda, xavfsizlik talablari bajarildi.

• AWS S3 dan to'g'ridan-to'g'ri ochishni olib tashlash

• URL asosidagi noaniq ma'lumotlarni uzatishni olib tashlash

• Foydalanuvchilarni tasdiqlagandan so'ng videoga o'tish imkonini berish

• Vaqtinchalik token asosida cheklangan kirish nazorati

• Diapazon sarlavhasi asosida video ijro etish va qidirish qo'llab-quvvatlash

7. Xulosa

Ushbu misolda oddiygina video pleerni qo'shish jarayoni emas, balki ReactPlayer va HTML5 video teglarining ishlash uslubi, mijoz kompaniyasining xavfsizlik siyosati, serverlar o'rtasidagi ro'lni ajratish, oqimni qayta ishlash usuli kabi bir qator jihatlarni hisobga olgan holda loyihalash tajribasini olish imkoniyatini yaratdi. Sertifikatlashtirish va qayta o'ynash jarayonlarini ajratgan holda, Server A va Server B javobgarliklarini aniq ajratish orqali foydalanuvchi tajribasi va xavfsizlikni bir vaqtning o'zida ta'minlash mumkin bo'ldi.

Xususan, amaliy muhitda funktsiyalarni amal qilishdan ko'ra xavfsizlik siyosati va brauzerning ish vaqtidagi cheklovlarini tushunish muhim ekanligini his qildim. Ushbu loyiha orqali video asosidagi qo'llanma xizmatlarida sertifikatlash tuzilmasi, ma'lumot oqimi, oqim sarlavhasi bilan ishlash, operatsion xavfsizlik siyosatini hisobga olmasdan barqaror xizmat ko'rsatish mumkin emasligini aniqladim.

NZ

Site footer