mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-28 13:37:36 +08:00
Merge pull request #78 from nagisa77/codex/integrate-google-registration-and-login
Add Google auth integration
This commit is contained in:
@@ -45,6 +45,7 @@ OpenIsle 基于 Spring Boot 构建,提供社区后台常见的注册、登录
|
|||||||
- `RESEND_API_KEY`:Resend 邮件服务 API Key
|
- `RESEND_API_KEY`:Resend 邮件服务 API Key
|
||||||
- `COS_BASE_URL`:腾讯云 COS 访问域名
|
- `COS_BASE_URL`:腾讯云 COS 访问域名
|
||||||
- `GOOGLE_CLIENT_ID`:Google OAuth 客户端 ID
|
- `GOOGLE_CLIENT_ID`:Google OAuth 客户端 ID
|
||||||
|
- `VUE_APP_GOOGLE_CLIENT_ID`:前端 Google OAuth 客户端 ID
|
||||||
- `JWT_SECRET`:JWT 签名密钥
|
- `JWT_SECRET`:JWT 签名密钥
|
||||||
- `JWT_EXPIRATION`:JWT 过期时间(毫秒)
|
- `JWT_EXPIRATION`:JWT 过期时间(毫秒)
|
||||||
- `PASSWORD_STRENGTH`:密码强度(LOW、MEDIUM、HIGH)
|
- `PASSWORD_STRENGTH`:密码强度(LOW、MEDIUM、HIGH)
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<script src="https://accounts.google.com/gsi/client" async defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { checkToken, clearToken } from './utils/auth'
|
|||||||
export const API_DOMAIN = 'http://127.0.0.1'
|
export const API_DOMAIN = 'http://127.0.0.1'
|
||||||
export const API_PORT = 8081
|
export const API_PORT = 8081
|
||||||
export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
|
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()
|
export const toast = useToast()
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|||||||
32
open-isle-cli/src/utils/google.js
Normal file
32
open-isle-cli/src/utils/google.js
Normal 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()
|
||||||
|
}
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="other-login-page-content">
|
<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" />
|
<img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
|
||||||
<div class="login-page-button-text">Google 登录</div>
|
<div class="login-page-button-text">Google 登录</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,6 +57,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { API_BASE_URL, toast } from '../main'
|
import { API_BASE_URL, toast } from '../main'
|
||||||
import { setToken } from '../utils/auth'
|
import { setToken } from '../utils/auth'
|
||||||
|
import { googleSignIn } from '../utils/google'
|
||||||
export default {
|
export default {
|
||||||
name: 'LoginPageView',
|
name: 'LoginPageView',
|
||||||
data() {
|
data() {
|
||||||
@@ -87,6 +88,11 @@ export default {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.error('登录失败')
|
toast.error('登录失败')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
loginWithGoogle() {
|
||||||
|
googleSignIn(() => {
|
||||||
|
this.$router.push('/')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -91,7 +91,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="other-signup-page-content">
|
<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" />
|
<img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
|
||||||
<div class="signup-page-button-text">Google 注册</div>
|
<div class="signup-page-button-text">Google 注册</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -101,6 +101,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { API_BASE_URL, toast } from '../main'
|
import { API_BASE_URL, toast } from '../main'
|
||||||
|
import { googleSignIn } from '../utils/google'
|
||||||
export default {
|
export default {
|
||||||
name: 'SignupPageView',
|
name: 'SignupPageView',
|
||||||
|
|
||||||
@@ -187,6 +188,11 @@ export default {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.error('注册失败')
|
toast.error('注册失败')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
signupWithGoogle() {
|
||||||
|
googleSignIn(() => {
|
||||||
|
this.$router.push('/')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user