Передача електронної пошти для входу в Google від Vue.js до Lumen

Інтеграція Google Auth у Vue.js і Lumen

Vue.js з Axios і Lumen API

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

Реалізація серверної частини Lumen для автентифікації JWT

PHP із фреймворком Lumen

<?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 Authentication

1. Як безпечно зберігати токени, отримані від Google?
2. Використовуйте захищені файли cookie лише HTTP та переконайтеся, що серверна частина перевіряє цілісність маркера, перевіряючи його підпис.
3. Що таке потік OAuth 2.0 і як він працює?
4. The OAuth 2.0 flow — це протокол, який дозволяє користувачеві надавати сторонньому веб-сайту чи додатку доступ до своєї інформації, що зберігається в іншого постачальника послуг, не відкриваючи свої облікові дані.
5. Як я можу керувати сеансами користувачів у Vue.js за допомогою входу Google?
6. Керуйте сеансами, зберігаючи отриманий маркер OAuth і використовуючи його для надсилання автентифікованих запитів до серверної частини.
7. Чому я отримую повідомлення про помилку «Електронна адреса не зареєстрована»?
8. Ця помилка зазвичай виникає, якщо електронний лист, отриманий із процесу OAuth, не існує у вашій базі даних. Переконайтеся, що ви правильно обробляєте нових і тих, хто повертається.
9. Які найкращі методи безпеки в реалізації OAuth?
10. Передові практики включають використання HTTPS для всіх комунікацій, безпечне зберігання токенів і додавання параметра стану до запитів OAuth для запобігання атакам CSRF.

Останні думки щодо впровадження Google Auth за допомогою Vue.js і Lumen

Успішна інтеграція автентифікації Google у веб-програми за допомогою Vue.js і Lumen підвищує безпеку користувачів і спрощує процес входу. Це дозволяє розробникам використовувати надійну систему безпеки Google, зменшуючи ризик витоку даних. Точна реалізація та обробка помилок є важливими для забезпечення бездоганної взаємодії з користувачем і для захисту інформації користувача від несанкціонованого доступу, що робить глибоке розуміння кожного кроку в процесі OAuth критичним.