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 +227 -33
7 changed files with 227 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1,2 +1,4 @@
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
VUE_APP_KAKAO_JS_KEY=2be3c619ed36fd3e138bf45812c57d7f

2
.env.production
View File

@@ -1,2 +1,4 @@
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
VUE_APP_KAKAO_JS_KEY=378e800dd9029907c559390e786157ef

2
public/index.html
View File

@@ -8,6 +8,8 @@
<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>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

26
src/api/member.js
View File

@@ -8,4 +8,28 @@ 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}`,
},
}
);
}
async function loginKakao(accessToken) {
return Vue.axios.post(
"/member/login/kakao",
{ container: "api" },
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
}
export { login, logout, loginGoogle, loginKakao }

BIN
src/assets/kakao_login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

50
src/store/accountStore.js
View File

@@ -87,6 +87,56 @@ 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 LOGIN_KAKAO({commit}, {accessToken}) {
let result = false
let errorMessage = null
try {
let res = await memberApi.loginKakao(accessToken)
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

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

@@ -1,9 +1,16 @@
<template> <template>
<v-app> <v-app>
<v-main> <v-main>
<v-container <v-container fluid>
align-center <v-row
justify-center align="start"
justify="center"
style="padding-top: 10vh;"
>
<v-col
cols="12"
sm="8"
md="4"
> >
<v-card class="elevation-12"> <v-card class="elevation-12">
<v-card-text> <v-card-text>
@@ -32,13 +39,41 @@
로그인 로그인
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
<v-divider />
<v-card-text class="text-center">
<div
style="display: flex; flex-direction: column; align-items: center; gap: 10px;"
>
<div
id="google-login-btn"
style="width: 192px; height: 45px; display: flex; align-items: center; justify-content: center;"
/>
<v-btn
width="192"
height="45"
class="pa-0"
elevation="0"
color="transparent"
@click="loginKakao"
>
<img
src="@/assets/kakao_login.png"
alt="카카오 로그인 버튼"
style="width: 100%; height: 100%; display: block;"
>
</v-btn>
</div>
</v-card-text>
</v-card> </v-card>
</v-col>
</v-row>
</v-container> </v-container>
</v-main> </v-main>
</v-app> </v-app>
</template> </template>
<script> <script>
/* global Kakao */
export default { export default {
name: "Login", name: "Login",
@@ -48,7 +83,86 @@ export default {
password: '', password: '',
}), }),
mounted() {
this.initGoogleLogin();
this.initKakaoLogin();
},
methods: { methods: {
initKakaoLogin() {
if (typeof Kakao !== 'undefined') {
if (!Kakao.isInitialized()) {
Kakao.init(process.env.VUE_APP_KAKAO_JS_KEY);
}
} else {
setTimeout(() => {
this.initKakaoLogin();
}, 500);
}
},
loginKakao() {
if (typeof Kakao !== 'undefined') {
if (!Kakao.isInitialized()) {
this.initKakaoLogin();
this.notifyError('카카오 SDK가 초기화되지 않았습니다. 잠시 후 다시 시도해주세요.');
return;
}
if (Kakao.Auth && typeof Kakao.Auth.login === 'function') {
Kakao.Auth.login({
success: (authObj) => {
this.$store.dispatch('accountStore/LOGIN_KAKAO', { accessToken: authObj.access_token })
.then(() => {
this.$router.push(this.$route.query.redirect || '/')
})
.catch((message) => {
this.notifyError(message);
})
},
fail: (err) => {
this.notifyError('카카오 로그인에 실패했습니다.');
console.error(err);
},
});
} else {
this.notifyError('카카오 인증 모듈을 불러오지 못했습니다. 페이지를 새로고침 해주세요.');
}
} else {
this.initKakaoLogin();
this.notifyError('카카오 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
}
},
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", width: 192 }
);
} 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)
}, },