Vue.jsで開発するシングルページアプリケーション（SPA）に、外部サービスとのOAuth認証を組み込むことで、Googleアカウントを使ったログイン機能を実装できます。本記事では、Googleログインを例に、OAuth 2.0を使った認証の流れと実装方法を解説します。
Google OAuthの仕組みを理解する
OAuth 2.0は、ユーザーの認証情報を外部に預けずに、外部サービスと安全に連携するための認証・認可の仕組みです。Googleログインでは、ユーザーのGoogleアカウントに対して認可を行い、アクセストークンを受け取ってユーザー情報を取得します。
事前準備：Google Cloud Consoleの設定
Googleログインを使うには、Google Cloud ConsoleでOAuthクライアントIDを発行する必要があります。
- Google Cloud Console にアクセスし、新しいプロジェクトを作成
- ナビゲーションメニューから「APIとサービス」→「認証情報」へ進む
- 「OAuth 2.0 クライアント ID」を作成
- 承認済みのリダイレクトURIに、アプリ側のURL（例：
http://localhost:8080）を設定
クライアントIDとクライアントシークレットが発行されるので、これをVue.jsから利用します。
Vue.jsにOAuth認証を実装する
Vue.jsでGoogleログインを実装するには、vue3-google-loginなどのパッケージを使うと手軽に導入できます。
npm install vue3-google-login続いて、VueプロジェクトにGoogleログインを設定します。
main.jsでGoogleログインを有効化
import { createApp } from 'vue';
import App from './App.vue';
import GoogleLogin from 'vue3-google-login';
const app = createApp(App);
app.use(GoogleLogin, {
clientId: 'YOUR_GOOGLE_CLIENT_ID'
});
app.mount('#app');ログインボタンを設置する
<template>
<GoogleLogin
:onSuccess="onSuccess"
:onError="onError"
/>
</template>
<script setup>
const onSuccess = (response) => {
console.log('ログイン成功', response);
// ユーザー情報の取得などをここで行う
};
const onError = () => {
console.log('ログイン失敗');
};
</script>Googleアカウントによる認証に成功すると、トークンとユーザープロフィールが取得できます。
取得した情報で認証管理する
取得したアクセストークンをバックエンドに送信してセッション管理を行ったり、VuexやPiniaでログイン状態をアプリ内に保持することが一般的です。
また、ログアウト処理を行う場合は、セッションの削除やトークンの破棄を行う実装も必要になります。
まとめ
Googleログインの導入は、OAuth 2.0の流れを理解すればVue.jsでもスムーズに実装できます。vue3-google-loginのようなライブラリを使うことで、認証の煩雑な処理を簡略化でき、UXの高いログイン機能を提供できます。セキュリティ面にも配慮しながら、外部認証の活用をぜひ検討してみてください。
