Google ログインメールを Vue.js から Lumen に渡す

Vue.js と Lumen への Google 認証の統合

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

JWT 認証のための Lumen バックエンドの実装

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 認証に関するよくある質問

1. Google から受け取ったトークンを安全に保管するにはどうすればよいですか?
2. 安全な HTTP 専用 Cookie を使用し、バックエンドが署名を検証してトークンの整合性を検証するようにします。
3. OAuth 2.0 フローとは何ですか?またそれはどのように機能しますか?
4. の OAuth 2.0 フローは、ユーザーが資格情報を公開することなく、サードパーティの Web サイトまたはアプリケーションに、別のサービス プロバイダーに保存されている自分の情報へのアクセスを許可するプロトコルです。
5. Google ログインを使用して Vue.js でユーザー セッションを処理するにはどうすればよいですか?
6. 受信した OAuth トークンを保存し、それを使用してバックエンドに認証済みのリクエストを行うことで、セッションを管理します。
7. 「電子メールが登録されていません」というエラーが表示されるのはなぜですか?
8. このエラーは通常、OAuth プロセスから取得した電子メールがデータベースに存在しない場合に発生します。新規ユーザーとリピーター ユーザーを正しく処理するようにしてください。
9. OAuth 実装におけるセキュリティのベスト プラクティスは何ですか?
10. ベスト プラクティスには、すべての通信に HTTPS を使用すること、トークンを安全に保存すること、CSRF 攻撃を防ぐために OAuth リクエストに状態パラメータを追加することが含まれます。

Vue.js と Lumen を使用した Google 認証の実装に関する最終的な考え

Vue.js と Lumen を使用して Web アプリケーションに Google 認証を統合することに成功すると、ユーザーのセキュリティが強化され、ログイン プロセスが合理化されます。これにより、開発者は Google の堅牢なセキュリティ フレームワークを活用し、データ侵害のリスクを軽減できます。シームレスなユーザー エクスペリエンスを確保し、ユーザー情報を不正アクセスから保護するには、正確な実装とエラー処理が不可欠であり、OAuth プロセスの各ステップを完全に理解することが重要になります。