ChatGPT가 시키는 대로 했습니다. OAuth 로그인

13. ChatGPT가 시키는 대로 했습니다.

Google OAuth로 로그인하기

구글 OAuth로 로그인을 구현합니다.

1. 사전이 준비되어 있어야 할 것들입니다.

• auth.signInWithPopup(provider)는 팝업 기반 OAuth 인증 흐름을 사용하여 사용자의 로그인을 위해 Firebase 인증에서 제공하는 방법입니다.
• Provider는 google 입니다.
• signInWithPopup 인증을 위하여 구글 회원 가입되어 있어야 합니다.
• signInWithPopup으로 구글 인증을 받고, 사용자 정보를 받아 화면에 나타내는 프로젝트 입니다.
• Google의 경우 firebase.auth.GoogleAuthProvider() 인증 공급자의 인스턴스를 생성해야 합니다.

2. Google Auth 로그인 처리 순서는 다음과 같습니다.

1. 로그인을 위하여 auth.signInWithPopup(provider)를 호출하면 Google 공급자로 인증할 수 있는 새 창(팝업)이 열립니다.
2. 사용자는 팝업 창에 자격 증명을 입력하고 애플리케이션이 자신의 계정 정보를 액세스할 수 있는 권한을 부여합니다.
3. 인증에 성공하면 Firebase는 팝업을 닫고 사용자의 Firebase ID 토큰, 제공업체의 OAuth 토큰, 기본 프로필 정보 등 인증된 사용자 정보가 포함된 'AuthResult' 객체를 반환합니다.

3. 로그인 기능의 구현을 위한 컴포넌트

1. 구글 로그인 버튼이 있고 로그인 결과 사용자 정보를 표시하는 UserAuth 컴포넌트 만들기
2. App.vue에서 UserAuth 호출하기

1. Vue 프로젝트 만들기

vue create user-login

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

2. 프로젝트 디렉토리로 이동

cd user-login

3. 각종 프로그램 설치

npm install firebase

vue add vuetify

? Choose a preset: (Use arrow keys)
Vuetify 2 - Configure Vue CLI (advanced)
Vuetify 2 - Vue CLI (recommended)
Vuetify 2 - Prototype (rapid development)
Vuetify 3 - Vite (preview)
Vuetify 3 - Vue CLI (preview)

4. configure Firebase:

// src/firebaseConfig.js

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

// Your Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export { auth, provider, signInWithPopup };

5. UserAuth.vue

<template>
  <div>
    <button @click="login">Login with Google</button>
    <div v-if="user">
      <h3>User Info</h3>
      <p><strong>Name:</strong> {{ user.displayName }}</p>
      <p><strong>Email:</strong> {{ user.email }}</p>
      <img :src="user.photoURL" alt="User Photo" style="width: 100px; height: 100px;">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { auth, provider, signInWithPopup } from '../firebaseConfig';

export default {
  name: 'UserAuth',
  setup() {
    const user = ref(null);

    const login = async () => {
      try {
        const result = await signInWithPopup(auth, provider);
        user.value = result.user;
      } catch (error) {
        console.error('Error during sign-in:', error);
      }
    };

    return {
      user,
      login,
    };
  },
};
</script>

5. App.vue

<template>
  <div id="app">
    <UserAuth />
  </div>
</template>


<script>
import UserAuth from './components/UserAuth.vue';


export default {
  name: 'App',
  components: {
    UserAuth,
  },
};
</script>

6. Run Application

npm run serve

7. 실행 결과