Vue.js இலிருந்து Lumen க்கு Google

Daniel Marino

செவ்வாய், 7 மே, 2024 ’அன்று’ பிற்பகல் 9:14:08

பயனர் அங்கீகாரத்தை அமைத்தல்

கூகுள் அங்கீகாரத்தை ஒரு Vue.js முன் முனையில் Lumen உடன் இணைப்பது தனிப்பட்ட சவால்களை ஏற்படுத்துகிறது, குறிப்பாக மின்னஞ்சல் முகவரிகள் போன்ற பயனர் தரவை நிர்வகிக்கும் போது. உள்நுழைவு வரிசையின் போது மின்னஞ்சலைப் படம்பிடித்து, மேலும் அங்கீகாரம் மற்றும் செயலாக்கத்திற்காக அதைச் சேவையகத்திற்குப் பாதுகாப்பாக அனுப்புவது இந்த செயல்முறையை உள்ளடக்கியது.

வெற்றிகரமான Google உள்நுழைவில் மின்னஞ்சல் முகவரியைப் பிரித்தெடுத்து, அதை Lumen பின்தளத்திற்கு அனுப்புவதற்கான சரியான முறையை இந்த வழிகாட்டி ஆராய்கிறது. பயன்பாட்டிற்குள் பயனர் சரிபார்ப்பு மற்றும் அடுத்தடுத்த செயல்களை எளிதாக்குவதற்கு இந்த முக்கியமான தரவு துல்லியமாக கையாளப்படுவதை உறுதி செய்வதே குறிக்கோள்.

கட்டளை	விளக்கம்
google.accounts.oauth2.initCodeClient()	Google OAuth ஓட்டத்தில் அங்கீகாரக் குறியீடு மானிய வகைக்குத் தேவையான OAuth 2.0 அமைப்புகளுடன் கிளையன்ட் பொருளைத் துவக்குகிறது.
requestCode()	பயனரின் மின்னஞ்சல் முகவரி மற்றும் சுயவிவரத் தகவலைப் பகிர்வதற்கான ஒப்புதலை உள்ளடக்கிய OAuth வரிசையைத் தூண்டுகிறது.
axios.post()	குறிப்பிட்ட URL க்கு HTTP POST கோரிக்கையை செய்கிறது; ஜாவாஸ்கிரிப்ட்டில் படிவத் தரவு அல்லது கோப்பு பதிவேற்றங்களைச் சமர்ப்பிக்க பொதுவாகப் பயன்படுத்தப்படுகிறது.
Auth::login()	அடையாளம் காணப்பட்ட பயனரை Laravel/Lumen அங்கீகரிப்பு அமைப்பு மூலம் உள்நுழைந்து அந்த பயனருக்கான அமர்வை உருவாக்குகிறது.
User::where()	Eloquent ORM ஐப் பயன்படுத்தி தரவுத்தளத்தை வினவினால், மின்னஞ்சல் போன்ற ஒரு குறிப்பிட்ட நிபந்தனை வழங்கப்பட்ட அளவுகோல்களை சந்திக்கும் பயனர் மாதிரியைக் கண்டறியும்.
response()->response()->json()	Lumen/Laravel பயன்பாடுகளில் உள்ள கிளையண்டிற்குத் தரவை அனுப்ப, APIகளில் பொதுவாகப் பயன்படுத்தப்படும் JSON பதிலை வழங்குகிறது.

Vue.js மற்றும் Lumen ஐப் பயன்படுத்தி அங்கீகரிப்பு ஓட்டத்தின் விரிவான முறிவு

வழங்கப்பட்ட ஸ்கிரிப்டுகள் Google OAuth உடன் Vue.js உடன் ஒருங்கிணைத்து பாதுகாப்பான பயனர் அங்கீகார ஓட்டத்தை செயல்படுத்துகிறது மற்றும் பின்தளத்தில் Lumen. Vue.js கூறு பயன்படுத்துகிறது googleSdkLoaded OAuth செயல்முறையைத் தொடங்குவதற்கு முன், Google SDK முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதிசெய்யும் செயல்பாடு. தி initCodeClient கிளையன்ட் ஐடி, ஸ்கோப்கள் மற்றும் யூஆர்ஐ வழிமாற்று போன்ற OAuthக்கு தேவையான அளவுருக்களை அமைக்க செயல்பாடு பயன்படுத்தப்படுகிறது. கோரப்படும் அனுமதிகள் மற்றும் அவற்றை Google அங்கீகரித்த பிறகு பயனரை எங்கு அனுப்புவது என்பதை இது வரையறுப்பதால் இந்த அமைப்பு முக்கியமானது.

பயனர் கோரிய அனுமதிகளை அங்கீகரித்தவுடன், OAuth செயல்முறை ஒரு பதிலை உருவாக்குகிறது, இதில் அங்கீகாரக் குறியீடு அடங்கும். இந்தக் குறியீடு பின்தளத்திற்குப் பயன்படுத்தி அனுப்பப்படுகிறது axios.post கட்டளை, இது Lumen API இறுதிப்புள்ளிக்கு HTTP POST கோரிக்கையை செய்கிறது. பின்தளத்தில், தி User::where வழங்கப்பட்ட மின்னஞ்சல் தரவுத்தளத்தில் உள்ளதா என்பதை முறை சரிபார்க்கிறது. அவ்வாறு செய்தால், கடவுச்சொல் தேவையில்லை Auth::login பயனரை உள்நுழைந்து JWT ஐ உருவாக்க, கிளையன்ட் மற்றும் சர்வர் இடையே பாதுகாப்பான தகவல்தொடர்புகளை செயல்படுத்தும் செயல்பாடு அழைக்கப்படுகிறது.

Vue.js மற்றும் Lumen இல் Google Auth ஐ ஒருங்கிணைக்கிறது

Axios மற்றும் Lumen API உடன் Vue.js

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);
      }
    }
  }
};

JWT அங்கீகரிப்புக்கான Lumen பின்தளத்தில் செயல்படுத்தல்

லுமேன் கட்டமைப்புடன் PHP

<?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);
  }
}?>

Vue.js மற்றும் Lumen உடன் Google Authக்கான மேம்பட்ட ஒருங்கிணைப்பு நுட்பங்கள்

கூகுள் அங்கீகாரத்தை இணையப் பயன்பாட்டில் ஒருங்கிணைக்கும் போது, பயனர் தரவைப் பாதுகாப்பாகவும் திறமையாகவும் கையாள்வது மிக முக்கியமானது. அடிப்படை OAuth ஃப்ளோவை அமைப்பதுடன், CSRF தாக்குதல்களைத் தணிக்க மாநில அளவுருக்களை செயல்படுத்துவது மற்றும் டோக்கன்களைச் சேமிக்க பாதுகாப்பான, HTTP-மட்டும் குக்கீகளைப் பயன்படுத்துவது போன்ற பாதுகாப்பு மேம்பாடுகளை டெவலப்பர்கள் கருத்தில் கொள்ள வேண்டும். டோக்கன் கையொப்பங்களைச் சரிபார்ப்பதன் மூலம் Google இன் சேவையகங்களிலிருந்து பெறப்பட்ட தரவின் ஒருமைப்பாட்டைச் சரிபார்ப்பதும் இன்றியமையாதது.

இந்த அளவிலான பாதுகாப்பு அங்கீகரிக்கப்படாத அணுகலைத் தடுக்கிறது மற்றும் மின்னஞ்சல் முகவரிகள் போன்ற பயனர் தரவு தனியுரிமை விதிமுறைகளுக்கு இணங்க கையாளப்படுவதை உறுதி செய்கிறது. மேலும், அங்கீகார செயல்முறையை ஒழுங்குபடுத்துவதன் மூலம், டெவலப்பர்கள் பயனர் அனுபவத்தை மேம்படுத்தலாம், உள்நுழைவு நேரத்தைக் குறைக்கலாம் மற்றும் அவர்களின் பயன்பாடுகளை அணுகும் செயல்முறையை எளிதாக்கலாம்.

Vue.js மற்றும் Lumen Google அங்கீகரிப்பு பற்றிய பொதுவான கேள்விகள்

Google இலிருந்து பெறப்பட்ட டோக்கன்களை எவ்வாறு பாதுகாப்பாக சேமிப்பது?
பாதுகாப்பான, HTTP-மட்டும் குக்கீகளைப் பயன்படுத்துங்கள் மற்றும் டோக்கனின் கையொப்பத்தைச் சரிபார்ப்பதன் மூலம் உங்கள் பின்தளம் அதன் ஒருமைப்பாட்டைச் சரிபார்க்கிறது.
OAuth 2.0 ஓட்டம் என்றால் என்ன, அது எப்படி வேலை செய்கிறது?
தி OAuth 2.0 ஓட்டம் என்பது ஒரு நெறிமுறையாகும், இது ஒரு மூன்றாம் தரப்பு இணையதளம் அல்லது பயன்பாட்டிற்கான அணுகலை மற்றொரு சேவை வழங்குநரிடம் சேமித்து வைத்திருக்கும் பயனர்களுக்கு அவர்களின் நற்சான்றிதழ்களை வெளிப்படுத்தாமல் வழங்க அனுமதிக்கிறது.
Google உள்நுழைவு மூலம் Vue.js இல் பயனர் அமர்வுகளை எவ்வாறு கையாள்வது?
பெறப்பட்ட OAuth டோக்கனைச் சேமித்து, உங்கள் பின்தளத்தில் அங்கீகரிக்கப்பட்ட கோரிக்கைகளைச் செய்ய அதைப் பயன்படுத்துவதன் மூலம் அமர்வுகளை நிர்வகிக்கவும்.
எனக்கு ஏன் 'மின்னஞ்சல் பதிவு செய்யப்படவில்லை' பிழை வருகிறது?
OAuth செயல்முறையிலிருந்து பெறப்பட்ட மின்னஞ்சல் உங்கள் தரவுத்தளத்தில் இல்லை என்றால், இந்தப் பிழை பொதுவாக ஏற்படும். புதிய மற்றும் திரும்பும் பயனர்களை நீங்கள் சரியாகக் கையாளுகிறீர்கள் என்பதை உறுதிப்படுத்தவும்.
OAuth செயலாக்கங்களில் பாதுகாப்பிற்கான சிறந்த நடைமுறைகள் யாவை?
அனைத்து தகவல்தொடர்புகளுக்கும் HTTPS ஐப் பயன்படுத்துதல், டோக்கன்களைப் பாதுகாப்பாகச் சேமித்தல் மற்றும் CSRF தாக்குதல்களைத் தடுக்க OAuth கோரிக்கைகளில் நிலை அளவுருவைச் சேர்ப்பது ஆகியவை சிறந்த நடைமுறைகளில் அடங்கும்.

Vue.js மற்றும் Lumen மூலம் Google Auth ஐ செயல்படுத்துவதற்கான இறுதி எண்ணங்கள்

Vue.js மற்றும் Lumen ஐப் பயன்படுத்தி வலைப் பயன்பாடுகளில் Google அங்கீகரிப்பு வெற்றிகரமாக ஒருங்கிணைக்கப்படுவது பயனர் பாதுகாப்பை மேம்படுத்துகிறது மற்றும் உள்நுழைவு செயல்முறையை ஒழுங்குபடுத்துகிறது. இது Google இன் வலுவான பாதுகாப்பு கட்டமைப்பை மேம்படுத்த டெவலப்பர்களை அனுமதிக்கிறது, தரவு மீறல்களின் அபாயத்தைக் குறைக்கிறது. ஒரு தடையற்ற பயனர் அனுபவத்தை உறுதி செய்வதற்கும், அங்கீகரிக்கப்படாத அணுகலில் இருந்து பயனர் தகவலைப் பாதுகாப்பதற்கும் துல்லியமான செயல்படுத்தல் மற்றும் பிழை கையாளுதல் அவசியம், OAuth செயல்முறையின் ஒவ்வொரு அடியையும் முழுமையாகப் புரிந்துகொள்வது மிகவும் முக்கியமானது.

Vue.js இலிருந்து Lumen க்கு Google உள்நுழைவு மின்னஞ்சலை அனுப்புகிறது