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

카카오 로그인 추가

Browse Source
This commit is contained in:
Yu Sung
2026-01-29 16:25:59 +09:00
parent 03766b1c97
commit 6bbee48d4d
7 changed files with 155 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@@ -1,3 +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_GOOGLE_CLIENT_ID=758414412471-mosodbj2chno7l1j0iihldh6edmk0gk9.apps.googleusercontent.com
VUE_APP_KAKAO_JS_KEY=2be3c619ed36fd3e138bf45812c57d7f

1
.env.production
View File

@@ -1,3 +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_GOOGLE_CLIENT_ID=983594297130-5hrmkh6vpskeq6v34350kmilf74574h2.apps.googleusercontent.com
VUE_APP_KAKAO_JS_KEY=378e800dd9029907c559390e786157ef

1
public/index.html
View File

@@ -9,6 +9,7 @@
<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://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>

14
src/api/member.js
View File

@@ -20,4 +20,16 @@ async function loginGoogle(idToken) {
); );
} }
export { login, logout, loginGoogle } 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

25
src/store/accountStore.js
View File

@@ -112,6 +112,31 @@ const accountStore = {
}); });
}, },
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

84
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>
@@ -34,18 +41,39 @@
</v-card-actions> </v-card-actions>
<v-divider /> <v-divider />
<v-card-text class="text-center"> <v-card-text class="text-center">
<div
style="display: flex; flex-direction: column; align-items: center; gap: 10px;"
>
<div <div
id="google-login-btn" id="google-login-btn"
style="display: flex; justify-content: center;" 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-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",
@@ -57,9 +85,55 @@ export default {
mounted() { mounted() {
this.initGoogleLogin(); 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() { initGoogleLogin() {
/* global google */ /* global google */
if (typeof google !== 'undefined') { if (typeof google !== 'undefined') {
@@ -69,7 +143,7 @@ export default {
}); });
google.accounts.id.renderButton( google.accounts.id.renderButton(
document.getElementById("google-login-btn"), document.getElementById("google-login-btn"),
{ theme: "outline", size: "large" } { theme: "outline", size: "large", width: 192 }
); );
} else { } else {
setTimeout(() => { setTimeout(() => {