klaus/sodalive-vuejs-creator-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

구글, 카카오 로그인 추가 #33

Merged
klaus merged 2 commits from test into main 2026-01-29 08:08:49 +00:00
Conversation 0 Commits 2 Files Changed 7 +81 -1
6 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 03766b1c97 - Show all commits

1
.env.development
View File

@@ -1,2 +1,3 @@
VUE_APP_API_URL=https://test-api.sodalive.net VUE_APP_API_URL=https://test-api.sodalive.net
NODE_ENV=development NODE_ENV=development
VUE_APP_GOOGLE_CLIENT_ID=758414412471-mosodbj2chno7l1j0iihldh6edmk0gk9.apps.googleusercontent.com

1
.env.production
View File

@@ -1,2 +1,3 @@
VUE_APP_API_URL=https://api.sodalive.net VUE_APP_API_URL=https://api.sodalive.net
NODE_ENV=production NODE_ENV=production
VUE_APP_GOOGLE_CLIENT_ID=983594297130-5hrmkh6vpskeq6v34350kmilf74574h2.apps.googleusercontent.com

1
public/index.html
View File

@@ -8,6 +8,7 @@
<title>보이스온 크리에이터 관리자</title> <title>보이스온 크리에이터 관리자</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head> </head>
<body> <body>
<noscript> <noscript>

14
src/api/member.js
View File

@@ -8,4 +8,16 @@ async function logout() {
return Vue.axios.post('/creator-admin/member/logout'); return Vue.axios.post('/creator-admin/member/logout');
} }
export { login, logout } async function loginGoogle(idToken) {
return Vue.axios.post(
"/member/login/google",
{ container: "api" },
{
headers: {
Authorization: `Bearer ${idToken}`,
},
}
);
}
export { login, logout, loginGoogle }

25
src/store/accountStore.js
View File

@@ -87,6 +87,31 @@ const accountStore = {
}); });
}, },
async LOGIN_GOOGLE({commit}, {idToken}) {
let result = false
let errorMessage = null
try {
let res = await memberApi.loginGoogle(idToken)
if (res.data.success === true) {
commit("LOGIN", res.data.data)
result = true
} else {
errorMessage = res.data.message
}
} catch (e) {
errorMessage = '구글 로그인 정보를 확인해주세요.'
}
return new Promise((resolve, reject) => {
if (result) {
resolve();
} else {
reject(errorMessage)
}
});
},
async LOGOUT({commit}) { async LOGOUT({commit}) {
let result = false let result = false
let errorMessage = null let errorMessage = null

40
src/views/Login/Login.vue
View File

@@ -32,6 +32,13 @@
로그인 로그인
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
<v-divider />
<v-card-text class="text-center">
<div
id="google-login-btn"
style="display: flex; justify-content: center;"
/>
</v-card-text>
</v-card> </v-card>
</v-container> </v-container>
</v-main> </v-main>
@@ -48,7 +55,40 @@ export default {
password: '', password: '',
}), }),
mounted() {
this.initGoogleLogin();
},
methods: { methods: {
initGoogleLogin() {
/* global google */
if (typeof google !== 'undefined') {
google.accounts.id.initialize({
client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
callback: this.handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("google-login-btn"),
{ theme: "outline", size: "large" }
);
} else {
setTimeout(() => {
this.initGoogleLogin();
}, 500);
}
},
handleCredentialResponse(response) {
const idToken = response.credential;
this.$store.dispatch('accountStore/LOGIN_GOOGLE', { idToken })
.then(() => {
this.$router.push(this.$route.query.redirect || '/')
})
.catch((message) => {
this.notifyError(message);
})
},
notifyError: async function (message) { notifyError: async function (message) {
await this.$dialog.notify.error(message) await this.$dialog.notify.error(message)
}, },