Vue.js|Firebasev9의 Authentication을 통해 트위터 인증 후 트위터 프로필 정보 얻기

이런 기사를 썼고Firebasev9의 Authentication에서 트위터 인증을 실시했다.
https://zenn.dev/knj/articles/b5694a5309ad5e
다만, 인증된 정보를 이용해 트위터 API를 두드려 이용자 정보(프로필과 트위터 등)를 추가로 얻으려 한다.말하자면 트위터 API를 두드리는 데 쓰이는 유일한 트위터 아이디 등을 얻으려고 했다.
하지만 정보가 별로 떨어지지 않아서 메모입니다.

하고 싶은 일


Firebasev9의 Authentication에서 트위터 인증을 한 후, 트위터 API를 두드리는 데 사용되는 유일한 트위터 ID와 상세한 프로필 정보를 얻으려고 합니다.

안녕히 계십시오.


인증 처리는 여기 있습니다.
src/views/Login.vue
<template>
<!-- 省略|↑のリンクにあります -->
</template>

<script>
// import firebaseApp from '@/src/main.js'
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";

export default {
  name: 'Login',
  methods: {
    signin: () => {
      const provider = new TwitterAuthProvider();
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
        const user = result.user;
        if (user) {
          console.log(user);
        } else {
          alert('有効なアカウントではありません')
        }
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode + "@@@" + errorMessage);
      });
    }
  }
}
</script>
상기 처리에서 사용자 정보const user = result.user;에 접근할 수 있으나 충분하지 않다.안에 있는 물건을 보면 알 수 있다.user.uid도 Firebase인가요?트위터의 고유 ID가 아닙니다.
그럼 어떡하지?

getAddional UserInfo() 활용


https://firebase.google.com/docs/reference/js/auth#additionaluserinfo
기존 코드를 사용하여 getAdditionalUserInfoimport이 되도록 합니다.
src/views/Login.vue
import { getAuth, signInWithPopup, TwitterAuthProvider, getAdditionalUserInfo} from "firebase/auth";
그리고 이렇게 하세요.
src/views/Login.vue
const details = getAdditionalUserInfo(result);
console.log(details);
로그인한 사용자의 트위터 계정의 고유 ID, 화면 ID, 프로필 등 다양한 정보를 얻을 수 있다.트위터 API 신청을 완료하면 id를 이용해 더 많은 정보를 얻을 수 있다.기쁘고 축하할 만하다.
이 근처에서 나는 네가 더 친절하게 Firebase 문서를 쓸 수 있기를 바란다.

최종 전체 코드


src/views/Login.vue
<template>
<!-- 省略|↑のリンクにあります -->
</template>

<script>
// import firebaseApp from '@/src/main.js'
import { getAuth, signInWithPopup, TwitterAuthProvider, getAdditionalUserInfo } from "firebase/auth";

export default {
  name: 'Login',
  methods: {
    signin: () => {
      // const provider = new firebaseApp.auth.TwitterAuthProvider()
      const provider = new TwitterAuthProvider();
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
        // The signed-in user info.
        const user = result.user;
        if (user) {
          console.log(user);
	  const details = getAdditionalUserInfo(result);
	   console.log(details);
        } else {
          alert('有効なアカウントではありません')
        }
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode + "@@@" + errorMessage);
      });
    }
  }
}
</script>

좋은 웹페이지 즐겨찾기