feat: add google auth integration

This commit is contained in:
Tim
2025-07-05 14:51:29 +08:00
parent e5ee4fcabb
commit ed12fb0fc9
6 changed files with 49 additions and 2 deletions

View File

@@ -45,6 +45,7 @@ OpenIsle 基于 Spring Boot 构建,提供社区后台常见的注册、登录
- `RESEND_API_KEY`Resend 邮件服务 API Key
- `COS_BASE_URL`:腾讯云 COS 访问域名
- `GOOGLE_CLIENT_ID`Google OAuth 客户端 ID
- `VUE_APP_GOOGLE_CLIENT_ID`:前端 Google OAuth 客户端 ID
- `JWT_SECRET`JWT 签名密钥
- `JWT_EXPIRATION`JWT 过期时间(毫秒)
- `PASSWORD_STRENGTH`密码强度LOW、MEDIUM、HIGH

View File

@@ -9,6 +9,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<noscript>

View File

@@ -11,6 +11,7 @@ import { checkToken, clearToken } from './utils/auth'
export const API_DOMAIN = 'http://127.0.0.1'
export const API_PORT = 8081
export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
export const GOOGLE_CLIENT_ID = process.env.VUE_APP_GOOGLE_CLIENT_ID || ''
export const toast = useToast()
const app = createApp(App)

View File

@@ -0,0 +1,32 @@
import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
import { setToken } from './auth'
export function googleSignIn(redirect) {
if (!window.google || !GOOGLE_CLIENT_ID) {
toast.error('Google 登录不可用')
return
}
window.google.accounts.id.initialize({
client_id: GOOGLE_CLIENT_ID,
callback: async ({ credential }) => {
try {
const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ idToken: credential })
})
const data = await res.json()
if (res.ok && data.token) {
setToken(data.token)
toast.success('登录成功')
if (redirect) redirect()
} else {
toast.error(data.error || '登录失败')
}
} catch (e) {
toast.error('登录失败')
}
}
})
window.google.accounts.id.prompt()
}

View File

@@ -46,7 +46,7 @@
</div>
<div class="other-login-page-content">
<div class="login-page-button">
<div class="login-page-button" @click="loginWithGoogle">
<img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
<div class="login-page-button-text">Google 登录</div>
</div>
@@ -57,6 +57,7 @@
<script>
import { API_BASE_URL, toast } from '../main'
import { setToken } from '../utils/auth'
import { googleSignIn } from '../utils/google'
export default {
name: 'LoginPageView',
data() {
@@ -87,6 +88,11 @@ export default {
} catch (e) {
toast.error('登录失败')
}
},
loginWithGoogle() {
googleSignIn(() => {
this.$router.push('/')
})
}
}
}

View File

@@ -91,7 +91,7 @@
</div>
<div class="other-signup-page-content">
<div class="signup-page-button">
<div class="signup-page-button" @click="signupWithGoogle">
<img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
<div class="signup-page-button-text">Google 注册</div>
</div>
@@ -101,6 +101,7 @@
<script>
import { API_BASE_URL, toast } from '../main'
import { googleSignIn } from '../utils/google'
export default {
name: 'SignupPageView',
@@ -187,6 +188,11 @@ export default {
} catch (e) {
toast.error('注册失败')
}
},
signupWithGoogle() {
googleSignIn(() => {
this.$router.push('/')
})
}
}
}