구글 로그인 추가

2026-01-29 15:43:10 +09:00
parent 54216198e1
commit 03766b1c97
6 changed files with 81 additions and 1 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 VUE_APP_API_URL=https://test-api.sodalive.net
 NODE_ENV=development
+VUE_APP_GOOGLE_CLIENT_ID=758414412471-mosodbj2chno7l1j0iihldh6edmk0gk9.apps.googleusercontent.com
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,3 @@
 VUE_APP_API_URL=https://api.sodalive.net
 NODE_ENV=production
+VUE_APP_GOOGLE_CLIENT_ID=983594297130-5hrmkh6vpskeq6v34350kmilf74574h2.apps.googleusercontent.com
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
    <title>보이스온 크리에이터 관리자</title>
    <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">
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
  </head>
  <body>
    <noscript>
--- a/src/api/member.js
+++ b/src/api/member.js
@@ -8,4 +8,16 @@ async function 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 }
--- a/src/store/accountStore.js
+++ b/src/store/accountStore.js
@@ -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}) {
            let result = false
            let errorMessage = null
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -32,6 +32,13 @@
              로그인
            </v-btn>
          </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-container>
    </v-main>
@@ -48,7 +55,40 @@ export default {
    password: '',
  }),

+  mounted() {
+    this.initGoogleLogin();
+  },
+
  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) {
      await this.$dialog.notify.error(message)
    },