본문 바로가기
내일배움캠프 TIL

2023-11-24 본 캠프 37일차 / 56일차 TIL

by KMS_99 2023. 11. 27.

2023-11-24 본 캠프 37일차 / 56일차 TIL

주요 진행사항

- 팀프로젝트 진행


이전 글과 이어서 google Authentication 소셜로그인 활성화 방법을 정리하고자 한다.

 

google Authentication 소셜로그인

 

기본적으로 코드상에서 OAuth를 활성화 시키는 코드는 공통적인 모습을 보인다.

import {initializeApp} from 'firebase/app'
import {
	getAuth,
    FacebookAuthProvider,
      GithubAuthProvider,
      GoogleAuthProvider,
      signInWithPopup,
} from 'firebase/auth'

const firebaseConfig = {
	// config
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

const {/*각종 플랫폼*/}LoginHandler = () => {
	const provider = new {/*각종 플랫폼*/}AuthProvider()
    const SocialLoginHandler = async()=>{
    	try{
        	await signInWithPopup(auth,provider)
            
        }catch(err){
        	const credential =provider.credentialFromError(err)
            console.log(credential)
        }
    }
}

 

1. github

    1) github 홈페이지에서 setting tab 클릭

 

    2) 좌측 메뉴의 Developer settings 클릭

    3) OAuth Apps 메뉴 클릭 후 New OAuth App 생성

 

    4) firebase auth sign in method에 해당 apps 정보에 있는 id와 비밀번호 입력

        * 이때 콜백 URL은 github apps에 입력