9. mylog 로그인

mylog 로그인은 계정 등록에서 이미 구글에 계정을 등록하였으므로 로그인 폼에 이메일과 패스워드를 입력하고 로그인 버튼을 누르면 mylog는 구글 계정에 로그인 한 다음 구글 계정의 uid를 받아 이것으로 mylog의 계정에서 사용자 정보를 가져옵니다. 이것은 사용자 인증은 구글을 이용하고 mylog 에서 사용해야 하는 계정 정보는 mylog의 계정에 저장하기 때문입니다.

로그인 UI를 만들고, 구글 로그인하여 구글 uid로 mylog 계정 정보를 가져오는 과정을 만들어 봅시다. 그리고 google auth의 Google Login을 이용하여 로그인하는 방법과 자동 로그인 기능도 함께 구현합니다.

먼저 로그인 화면을 만들어 봅시다.

ChatGPT에게 물었습니다.

Create a login screen using vuetify.

vuetify를 사용하여 로그인 화면을 만들어 줘.

ChatGPT

To create a login screen using Vuetify, we will build a Vue component with a simple form that includes fields for the user's email and password. The form will have validation and a button to submit the login credentials. We'll use Vuetify components like v-container, v-row, v-col, v-card, v-text-field, and v-btn to structure and style the form.

Vuetify를 사용하여 로그인 화면을 만들기 위해 사용자의 이메일 및 비밀번호 필드가 포함된 간단한 양식으로 Vue 구성 요소를 구축합니다. 양식에는 유효성 검사와 로그인 자격 증명을 제출하는 버튼이 있습니다. v-container, v-row, v-col, v-card, v-text-field 및 v-btn과 같은 Vuetify 구성 요소를 사용하여 구조화하고 폼 스타일을 지정합니다.

Step-by-Step Guide 단계별 가이드

1. Install Vuetify: If you haven't already installed Vuetify in your Vue project, you can do so using npm.
   Vuetify 설치: Vue 프로젝트에 Vuetify를 아직 설치하지 않은 경우 npm을 사용하여 설치할 수 있습니다.
2. Create the Login Component: We'll create a new component named Login.vue that contains our login form.
   로그인 구성 요소 생성: 로그인 양식이 포함된 'Login.vue'라는 새 구성 요소를 생성합니다.
3. Add Form Validation: We'll add some basic validation to ensure the fields are filled out correctly.
   양식 유효성 검사 추가: 필드가 올바르게 작성되었는지 확인하기 위해 몇 가지 기본 유효성 검사를 추가하겠습니다.

1. Install Vuetify

1. Vuetify 설치

If Vuetify is not installed in your Vue project, install it using npm:
Vuetify가 Vue 프로젝트에 설치되어 있지 않으면 npm을 사용하여 설치하십시오.

npm install vuetify@next

 

Then, set up Vuetify in your Vue project (if you haven’t done it already) by modifying your main entry file, typically main.js or main.ts:
그런 다음 기본 항목 파일(일반적으로 main.js 또는 main.ts)을 수정하여 Vue 프로젝트에서 Vuetify를 설정합니다(아직 수행하지 않은 경우).

// main.js or main.ts
import { createApp } from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';

const app = createApp(App);

app.use(vuetify);

app.mount('#app');

 

Create a Vuetify plugin file src/plugins/vuetify.js:
Vuetify 플러그인 파일 src/plugins/vuetify.js를 만듭니다.

// src/plugins/vuetify.js
import { createVuetify } from 'vuetify';
import 'vuetify/styles';

export default createVuetify();

2. Create the Login Component

2. 로그인 구성 요소 생성

Create a new file named Login.vue in the src/components directory:
src/comComponents 디렉터리에 Login.vue라는 새 파일을 만듭니다.

touch src/components/Login.vue

 

Now, add the following code to Login.vue:
이제 Login.vue에 다음 코드를 추가하세요.

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" md="6" lg="4">
        <v-card class="pa-4">
          <v-card-title>
            <span class="text-h5">Login</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-text-field
                label="Email"
                v-model="email"
                :rules="[rules.required, rules.email]"
                prepend-icon="mdi-email"
                type="email"
                required
              ></v-text-field>

              <v-text-field
                label="Password"
                v-model="password"
                :rules="[rules.required]"
                prepend-icon="mdi-lock"
                type="password"
                required
              ></v-text-field>
            </v-form>
          </v-card-text>

          <v-card-actions>
            <v-btn color="primary" @click="login" :disabled="!valid">
              Login
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      password: "",
      valid: false,
      rules: {
        required: (value) => !!value || "Required.",
        email: (value) =>
          /.+@.+\..+/.test(value) || "E-mail must be valid.",
      },
    };
  },
  methods: {
    login() {
      if (this.$refs.form.validate()) {
        // Handle the login logic here
        console.log("Logging in with:", this.email, this.password);
        // You would typically call a Vuex action or directly interact with a backend service
      }
    },
  },
};
</script>

<style scoped>
.fill-height {
  height: 100vh;
}
</style>

3. Explanation of the Login Component

3. 로그인 구성 요소에 대한 설명

• <v-container>: This provides a container for the form, allowing us to center it both vertically and horizontally using fill-height, align="center", and justify="center".
  <v-container>: 이는 양식에 대한 컨테이너를 제공하여 fill-height, align="center" 및 justify="center"를 사용하여 수직 및 수평 모두 중앙에 배치할 수 있게 해줍니다.
• <v-card>: Used to contain the login form and give it a styled, elevated look.
  <v-card>: 로그인 양식을 포함하고 세련된 스타일을 제공하는 데 사용됩니다.
• <v-form>: Manages the form validation state and provides a way to validate the entire form using its validate method.
  <v-form>: 양식 유효성 검사 상태를 관리하고 validate 메서드를 사용하여 전체 양식을 유효성 검사하는 방법을 제공합니다.
• <v-text-field>: Provides inputs for the email and password. These fields are bound to the email and password data properties.
  <v-text-field>: 이메일 및 비밀번호에 대한 입력을 제공합니다. 이 필드는 email 및 password 데이터 속성에 바인딩됩니다.
• rules: An object containing validation rules for the form fields:
  rules: 양식 필드에 대한 유효성 검사 규칙을 포함하는 개체:
• required: Checks if a field has a value.
  필수: 필드에 값이 있는지 확인합니다.
• email: Ensures the email field contains a valid email format.
  email: 이메일 필드에 유효한 이메일 형식이 포함되어 있는지 확인합니다.
• login() method: Called when the user clicks the "Login" button. It validates the form and then logs the email and password to the console (this is where you would implement your actual login logic, such as calling a Vuex action or interacting with a backend service).
  login() 메소드: 사용자가 "로그인" 버튼을 클릭하면 호출됩니다. 양식의 유효성을 검사한 다음 이메일과 비밀번호를 콘솔에 기록합니다(여기서 Vuex 작업 호출 또는 백엔드 서비스와의 상호 작용과 같은 실제 로그인 로직을 구현하게 됩니다).

4. Use the Login Component

4. 로그인 구성 요소 사용

To use the Login component in your application, include it in your App.vue or any other parent component.
애플리케이션에서 Login 구성 요소를 사용하려면 이를 App.vue 또는 다른 상위 구성 요소에 포함하세요.

Update App.vue

Include the Login component in your App.vue:
App.vue에 Login 구성 요소를 포함합니다.

<template>
  <v-app>
    <v-main>
      <Login />
    </v-main>
  </v-app>
</template>

<script>
import Login from "./components/Login.vue";

export default {
  components: {
    Login,
  },
};
</script>

5. Run Your Application

5. 애플리케이션 실행

After completing these steps, run your Vue application:
다음 단계를 완료한 후 Vue 애플리케이션을 실행하세요.

npm run serve

Summary 요약

You have created a login screen using Vuetify that includes a card-based layout, form fields for email and password, and validation. This basic setup can be extended with more functionality such as connecting to a backend service, handling login errors, and providing user feedback.

카드 기반 레이아웃, 이메일 및 비밀번호를 위한 양식 필드, 유효성 검사가 포함된 Vuetify를 사용하여 로그인 화면을 만들었습니다. 이 기본 설정은 백엔드 서비스 연결, 로그인 오류 처리, 사용자 피드백 제공과 같은 더 많은 기능으로 확장될 수 있습니다.