„Google“ prisijungimo el. pašto perdavimas iš Vue.js į „Lumen“.

Vartotojo autentifikavimo nustatymas

„Google“ autentifikavimo integravimas į „Vue.js“ sąsają su „Lumen“ kaip užpakaline sistema kelia unikalių iššūkių, ypač tvarkant naudotojo duomenis, pvz., el. pašto adresus. Šis procesas apima el. laiško užfiksavimą prisijungimo sekos metu ir saugų jo perdavimą į serverį tolesniam autentifikavimui ir apdorojimui.

Šiame vadove nagrinėjamas teisingas būdas išgauti el. pašto adresą sėkmingai prisijungus prie „Google“ ir išsiųsti jį į „Lumen“ vidinę programą. Tikslas yra užtikrinti, kad ši svarbi duomenų dalis būtų tvarkoma tiksliai, kad būtų lengviau patikrinti naudotoją ir atlikti tolesnius veiksmus programoje.

komandą	apibūdinimas
google.accounts.oauth2.initCodeClient()	Inicijuoja kliento objektą su OAuth 2.0 nustatymais, reikalingais prieigos kodo suteikimo tipui „Google OAuth“ sraute.
requestCode()	Suaktyvina OAuth seką, apimančią vartotojo sutikimą bendrinti savo el. pašto adresą ir profilio informaciją.
axios.post()	Pateikia HTTP POST užklausą nurodytam URL; dažniausiai naudojamas formos duomenims arba failų įkėlimui pateikti JavaScript.
Auth::login()	Prisijungia identifikuoto vartotojo per Laravel/Lumen autentifikavimo sistemą ir sukuria tam vartotojui seansą.
User::where()	Užklausa duomenų bazėje naudojant Eloquent ORM, kad surastų vartotojo modelį, kuriame tam tikra sąlyga, pvz., el. paštas, atitinka pateiktus kriterijus.
response()->response()->json()	Pateikia JSON atsakymą, dažniausiai naudojamą API duomenims siųsti klientui Lumen / Laravel programose.

Išsamus autentifikavimo srauto suskirstymas naudojant Vue.js ir Lumen

Pateikti scenarijai įgyvendina saugų naudotojo autentifikavimo srautą, integruojantį „Google OAuth“ su „Vue.js“ priekinėje sistemoje ir „Lumen“ užpakalinėje sistemoje. Vue.js komponentas naudoja funkcija, užtikrinanti, kad „Google“ SDK būtų visiškai įkeltas prieš pradedant OAuth procesą. The tada funkcija naudojama norint nustatyti būtinus OAuth parametrus, pvz., kliento ID, apimtis ir peradresavimo URI. Ši sąranka yra labai svarbi, nes ji apibrėžia prašomus leidimus ir kur siųsti naudotoją, kai „Google“ jį autentifikavo.

Kai vartotojas patvirtina prašomus leidimus, OAuth procesas sugeneruoja atsakymą, kuriame yra prieigos teisės kodas. Šis kodas siunčiamas į užpakalinę programą naudojant komanda, kuri atlieka HTTP POST užklausą Lumen API galutiniam taškui. Užpakalinėje dalyje yra metodas patikrina, ar duomenų bazėje yra pateiktas el. Jei taip ir slaptažodžio nereikia, funkcija iškviečiama prisijungti vartotojui ir generuoti JWT, įgalinantį saugų ryšį tarp kliento ir serverio.

import { googleSdkLoaded } from "vue3-google-login";
import axios from "axios";
export default {
  name: "App",
  data() {
    return { userDetails: null };
  },
  methods: {
    login() {
      googleSdkLoaded(google => {
        google.accounts.oauth2.initCodeClient({
          client_id: "YOUR_CLIENT_ID",
          scope: "email profile openid",
          redirect_uri: "http://localhost:8000/api/Google_login",
          callback: response => {
            if (response.code) {
              this.sendCodeToBackend(response.code, response.email);
            }
          }
        }).requestCode();
      });
    },
    async sendCodeToBackend(code, email) {
      try {
        const headers = { Authorization: code, Email: email };
        const response = await axios.post("http://localhost:8000/api/Google_login", null, { headers });
        this.userDetails = response.data;
      } catch (error) {
        console.error("Failed to send authorization code:", error);
      }
    }
  }
};

//php
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
public function Google_login(Request $request) {
  try {
    $user = User::where('email', $request->email)->first();
    if ($user) {
      $token = Auth::login($user);
      return response()->json(['token' => $token]);
    } else {
      return response()->json(['message' => 'Email is not registered'], 401);
    }
  } catch (\Throwable $th) {
    return response()->json(['status' => false, 'message' => $th->getMessage()], 500);
  }
}//

Išplėstinės „Google Auth“ integravimo technologijos su Vue.js ir „Lumen“.

Integruojant „Google“ autentifikavimą į žiniatinklio programą, svarbiausia yra saugiai ir efektyviai tvarkyti vartotojo duomenis. Be pagrindinio „OAuth“ srauto nustatymo, kūrėjai turi atsižvelgti į saugumo patobulinimus, pvz., įdiegti būsenos parametrus, kad sušvelnintų CSRF atakas, ir naudoti saugius, tik HTTP slapukus žetonams saugoti. Taip pat labai svarbu patvirtinti duomenų, gautų iš „Google“ serverių, vientisumą, tikrinant žetonų parašus, kad būtų užtikrinta, jog duomenys nebuvo sugadinti perduodant.

Šis saugumo lygis apsaugo nuo neteisėtos prieigos ir užtikrina, kad naudotojo duomenys, pvz., el. pašto adresai, būtų tvarkomi laikantis privatumo taisyklių. Be to, supaprastindami autentifikavimo procesą, kūrėjai gali pagerinti vartotojo patirtį, sutrumpinti prisijungimo laiką ir supaprastinti prieigos prie savo programų procesą.

1. Kaip saugiai saugoti iš „Google“ gautus žetonus?
2. Naudokite saugius, tik HTTP slapukus ir įsitikinkite, kad jūsų užpakalinė programa patvirtina prieigos rakto vientisumą, patikrindama jo parašą.
3. Kas yra OAuth 2.0 srautas ir kaip jis veikia?
4. The srautas yra protokolas, leidžiantis vartotojui suteikti trečiosios šalies svetainei arba programai prieigą prie savo informacijos, saugomos pas kitą paslaugų teikėją, neatskleidžiant savo kredencialų.
5. Kaip galiu tvarkyti naudotojų seansus Vue.js naudojant „Google Login“?
6. Tvarkykite seansus išsaugodami gautą „OAuth“ prieigos raktą ir naudodami jį autentifikuotoms užklausoms pateikti savo vidinėje programoje.
7. Kodėl gaunu klaidą „El. paštas neregistruotas“?
8. Ši klaida paprastai įvyksta, jei el. laiškas, gautas iš OAuth proceso, jūsų duomenų bazėje neegzistuoja. Įsitikinkite, kad tinkamai elgiatės su naujais ir grįžtančiais vartotojais.
9. Kokia yra geriausia „OAuth“ diegimo saugos praktika?
10. Geriausia praktika apima HTTPS naudojimą visoms komunikacijoms, saugų prieigos raktų saugojimą ir būsenos parametro pridėjimą prie OAuth užklausų, kad būtų išvengta CSRF atakų.

Sėkmingas Google autentifikavimo integravimas į žiniatinklio programas naudojant Vue.js ir Lumen padidina naudotojų saugumą ir supaprastina prisijungimo procesą. Tai leidžia kūrėjams panaudoti tvirtą „Google“ saugos sistemą ir sumažinti duomenų pažeidimų riziką. Tikslus diegimas ir klaidų tvarkymas yra būtini norint užtikrinti sklandžią naudotojo patirtį ir apsaugoti naudotojo informaciją nuo neteisėtos prieigos, todėl labai svarbu išsamiai suprasti kiekvieną OAuth proceso veiksmą.