firebase - Oauth

firebase로 회원가입을 관리 할 수 있는 기능들이 있다. 거기에 google 로그인 github 로그인 처럼 Oauth 기능도 지원을 한다. Oauth 기능을 설명 하면...

기본적으로 설정이 필요하다.

firebase console에 들어와서 개발 밑에 authentication을 클릭해서 들어간다.

그러고 나서 Authentication 밑에 Sign-in method에 들어간다.

기본적으로 상태가 전부 사용중지로 되어있다. 여기서 필요로 하는 Oauth를 선택해서 설정으로 바꿔주면 된다. 이메일/비밀번호는 회원가입을 할 수 있는 auth 기능이다.

Google의 auth는 기본적으로 설정이 되어 있어서 사용설정만 켜주면 사용을 할 수 있다.

Github는 Github에서 주는 보안 key를 입력해야 사용이 가능하다. 창을 열어보면 클라이언트 보안 비밀번호가 비어 있을 것이다. 그래서 github에 있는 보안 key를 받아와야 된다.

github로 로그인을 한 후에 자신의 프로파일을 클릭하면 하단에 리스트가 나온다 거기에 setting > developer settting > Oauth app으로 들어간다. 그리고 new Oauth app을 클릭한다.

그러면 하단 사진처럼 나오면 앱이름을 넣고 Homepage URL은 당장은 없으니 바로 위에 있는 사진에서 http:// 로 시작하는 주소를 복사해서 붙이고 ~~com 까지만 입력한다.

그리고 인증 Authorization callback URL에는 Homepage URL을 넣으려고 복사한 모든 주소를 넣고 Register application을 누른다. 그러고 나면 secret key랑 id를 받아오면 firebase (위에 있는 사진에 빈란에 넣고) 설정을 해주면 된다.

 

설정을 했으니, code에서 로그인 기능을 구현을 하면 firebase를 입력한 파일에 하기변수를 내보내주고, 필요한 곳에서 객체를 생성해서 사용하면 된다.

fbase.js

버튼을 만들고 잘 접속 되는지 firebase에서 확인을 해본다.

const Auth = () => {
  const onSocialClick = async event => {
    const {
      target: { name },
    } = event;
    let provider;
    if (name === "google") {
      provider = new firebaseInstance.auth.GoogleAuthProvider();
    } else if (name === "github") {
      provider = new firebaseInstance.auth.GithubAuthProvider();
    }
    await authService.signInWithPopup(provider);
  };

  return (
    <div className="authContainer">
      <div className="authBtns">
        <button onClick={onSocialClick} name="google" className="authBtn">
          Continue with Google
        </button>
        <button onClick={onSocialClick} name="github" className="authBtn">
          Continue with Github
        </button>
      </div>
    </div>
  );
};

export default Auth;

firebase console에서 아까 들어간 authentication에 들어가고 로그인 됐는지 확인을 해본다. 로그인이 잘되었다면 아래 사진처럼 Google 로그인을 볼 수 있다.