Vue.js|Firebasev9의 Authentication을 통해 트위터 인증 후 트위터 프로필 정보 얻기
다만, 인증된 정보를 이용해 트위터 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() 활용
기존 코드를 사용하여
getAdditionalUserInfo
import이 되도록 합니다.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>
Reference
이 문제에 관하여(Vue.js|Firebasev9의 Authentication을 통해 트위터 인증 후 트위터 프로필 정보 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/knj/articles/ab7a7424d2a311텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)