java - Masalah dengan memisahkan kod pengesahan dari hadapan ke hujung belakang

Question

Premis

Andaikan saya mempunyai antara muka untuk mendapatkan kod pengesahan Ia di bawah https://api.b.com/captcha.

Cara yang saya bayangkan untuk memuat semula kod pengesahan

Dalam imaginasi saya, fungsi muat semula kod pengesahan dilaksanakan dengan menambah cap waktu selepas url, contohnya, menukar url kepada sesuatu seperti ini

https://api.b.com/captcha?149...

Kaedah tradisional untuk mengesahkan kod pengesahan

Kod pengesahan tradisional harus dilakukan terutamanya melalui sesi Bahagian hadapan akan merekodkan id sesi dalam kuki.

Bahagian belakang juga akan merekodkan id sesi ini dan kod pengesahan yang sepadan dalam redis.

Hujung hadapan mempunyai fungsi untuk menyegarkan semula kod pengesahan dengan mengklik padanya Setiap kali anda mengklik, kod pengesahan baharu akan dijana, dan nilai kod pengesahan yang sepadan dengan ID sesi akan dikemas kini dalam redis setiap kali.

Kaedah pengesahan dilengkapkan dengan menanyakan sama ada nilai id sesi dalam redis konsisten dengan nilai bahagian hadapan.

Masalah yang dihadapi setakat ini

Sekarang, saya sedang mengusahakan projek yang memisahkan hujung depan dan belakang.

Kemudian terdapat masalah kuki merentas domain yang saya tidak tahu cara untuk menyelesaikannya.

Senario adalah seperti berikut: projek bahagian hadapan adalah di bawah nama domain www.a.com, dan projek bahagian belakang adalah di bawah nama domain api.b.com.

Bahagian hadapan dan bahagian belakang berada di bawah nama domain yang berbeza (malah, kedua-dua projek juga boleh diletakkan di bawah nama domain yang sama, tetapi ini tidak dilakukan untuk tujuan pembelajaran), jadi kuki tidak boleh dikongsi, dengan kata lain, saya tidak boleh mendapatkan id sesi. Kemudian kaedah tradisional nampaknya tidak mungkin lagi.

PS: Pelayan bahagian hadapan akan menggunakan nginx, dan bahagian belakang akan menggunakan but spring.

Fikiran saya

Idea 1

Saya ingin menjana token mudah Token hanya mengandungi uuid, yang digunakan untuk mengenal pasti pengguna. Saya membandingkan uuid toekn ini dengan uuid dalam redis untuk menentukan sama ada nilai kod pengesahan adalah betul. Jadi saya akan kembalikan hasil seperti ini

{
   image : base64转码后的图片,
   token : uuid
}

Mengenai sebab kami menyiarkan imej yang ditranskodkan base64, ini terutamanya kerana teg img bahagian hadapan menyokong base64. Tiada masalah untuk memaparkan ini secara langsung (ia bukan projek yang tidak mengambil kira pelayar purba).

Tetapi nampaknya tidak munasabah untuk melakukannya dengan cara ini. Kerana dengan cara ini, apabila anda mengakses alamat kod pengesahan, anda tidak akan dapat melihat gambar kod pengesahan. Ia menyusahkan untuk menyahpepijat dan melihat gaya kod pengesahan Sebenarnya, ia tidak menyusahkan, cuma saya perlu menulis js untuk menetapkan src img itu.

Idea 2

Letakkan token di tajuk jawapan. js boleh membaca kandungan pengepala respons. Kemudian gambar kod pengesahan juga boleh dipaparkan terus melalui alamat. Tapi sial, rasa bodoh juga. Kerana saya tidak boleh menggunakan cara yang saya bayangkan untuk memuat semula kod pengesahan. Cuma tambah cap masa kemudian dan ubah suainya.

Idea 3

Saya tidak peduli tentang kod pengesahan. Biarkan pelayan bahagian hadapan melakukan ini Apabila log masuk, sahkan kod pengesahan pada pelayan bahagian hadapan saya hanya mengesahkan sama ada kata laluan akaun itu betul dan kembali sebuah token. Hanya bawa token setiap kali anda mengakses API lain.

---

Saya benar-benar tidak dapat memikirkan cara untuk melakukannya dan saya tidak dapat mencari sebarang maklumat yang berkaitan (mungkin ada yang tidak kena dengan kaedah carian saya), jadi saya meminta bantuan...

Saya menyemak dengan teliti dan masalah ini sepatutnya menjadi masalah log masuk tunggal, bukan?

Answer 1

Apa yang anda perlu selesaikan ialah masalah membawa kuki merentas domain. Pertama, pastikan anda menggunakan teknologi cors merentas domain boleh menghantar bukti kelayakan identiti berdasarkan kuki HTTP dan maklumat pengesahan HTTP. Kuki dihantar ke pelayan dengan menetapkan bendera withCredentials XMLHttpRequest kepada benar.

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

Selain menambah denganKredential pada permintaan bahagian hadapan, pengepala respons pelayan juga perlu ditambahAccess-Control-Allow-Credentials: true. Selain itu, pengepala respons tidak boleh menetapkan nilai Access-Control-Allow-Origin kepada "*" dan mesti menetapkannya kepada sumber tertentu http://foo.example.