Google 계정을 이용해서 회원가입 및 로그인

Google 계정을 이용해서 회원가입 및 로그인

Google 계정은 Android 스마트폰 사용자나 Gmail 사용자라면 누구나 가지고 있습니다. 이 Google 계정을 이용해 간편하게 사이트에 가입하고, 이용할 수 있다는건 방문자들에게 큰 매력포인트이죠.

이번 섹션에서는 Google 계정을 이용해서 회원가입 하는 방법과, 로그인 처리하는 방법을 알아보겠습니다.

사전 준비

Email과 암호를 이용해서 인증할 때와 마찬가지로 Firebase 콘솔에서 Google 인증을 활성화 해야합니다.

좌측 메뉴에서 Auth를 선택하고, 로그인 방법 탭을 선택합니다. 아래 목록에서 Google을 클릭하고 사용 설정을 저장합니다.

Popup을 이용해서 처리

Google 인증은 두 가지 방법으로 구현할 수 있습니다. 먼저 새 창을 띄워서 처리하는 방식을 확인해보겠습니다. 먼저, 지난번 예제와 동일한 구조로 파일을 구성합니다.

각 파일의 코드는 아래와 같습니다.

ex2/index.html

<!doctype html>
<html>
    <head>
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
        <script src="../firebase/init.js"></script>
        <script src="js/index.js"></script>
        <style>
            #authorized > div:nth-child(1) { font-size: 50px; }
            #authorized img#photo { height: 50px; border-radius: 25px; vertical-align: middle; }
        </style>
    </head>
    <body>
        <div id="signIn">
            <button onclick="signIn()">Sign In With Google</button>
        </div>
        <div id="authorized">
            <div>Hello, <img id="photo" src="" /><span id="displayName"></span></div>
            <div>
                Email: <span id="email"></span><br />
                RefreshToken: <span id="refreshToken"></span><br />
                uid: <span id="uid"></span>
            </div>
            <div><button onclick="signOut()">Sign Out</button></div>
        </div>
        <div id="error">
            An error occurred: <span id="errmsg"></span><br />
            <button onclick="back();">Back</button>
        </div>
    </body>
</html>

ex2/js/index.js

$(document).ready(function() {
    $("#authorized").hide();
    $("#error").hide();
    
    firebase.auth().getRedirectResult().then(signInSucceed).catch(signInError);
});

function signIn() {
    var provider = new firebase.auth.GoogleAuthProvider();
    
    firebase.auth().signInWithPopup(provider)
        .then(signInSucceed)
        .catch(signInError);
}

function signInSucceed(result) {
    if (result.credential) {
        googleAccountToken = result.credential.accessToken;
        user = result.user;

        $("#photo").attr("src", user.photoURL);
        $("#displayName").html(user.displayName);
        $("#email").html(user.email);
        $("#refreshToken").html(user.refreshToken);
        $("#uid").html(user.uid);

        $("#authorized").show();
        $("#signIn").hide();
    }
}

function signInError(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    var email = error.email;
    var credential = error.credential;

    var errmsg = errorCode + " " + errorMessage;

    if(typeof(email) != 'undefined') {
        errmsg += "<br />";
        errmsg += "Cannot sign in with your google account: " + email;
    }

    if(typeof(credential) != 'undefined') {
        errmsg += "<br />";
        errmsg += credential;
    }

    lastWork = "signIn";
    $("#error #errmsg").html(errmsg);
    $("#error").show();
    $("#signIn").hide();
    return;
}

function signInWithRedirect() {
    var provider = new firebase.auth.GoogleAuthProvider();
    
    firebase.auth().signInWithRedirect(provider);
}

function back() {
    $("#" + lastWork).show();
    $("#error").hide();
}

firebase/init.js

* 이전 예제와 동일

화면에 표시되는 Sign In With Google 버튼을 누르면 새 창이 표시됩니다. 해당 창에서 Google 계정으로 로그인에 성공하면 화면에 아래와 같이 계정 정보가 표시됩니다. 아래와 같은 화면이 표시되지 않고 오류가 발생한다면 아래 오류 처리를 참고해보세요.

만약 로그인 시도하는 계정의 Email이 등록되어 있지 않다면 회원가입까지 자동으로 처리합니다. Google 계정으로 가입한 계정은 Firebase 콘솔에서 아래와 같이 제공업체 열에 Google 로고가 표시되는걸 확인할 수 있습니다.

주목할 코드

ex2/js/index.js:7: Google 인증 처리를 할 수 있는 Provider를 반환 받습니다.

ex2/js/index.js:9: 7번째 줄에서 반환받은 Provider로 로그인 처리를 진행합니다.

ex2/js/index.js:10~11: 성공하면 실행할 작업과 실패하면 실행할 작업을 별도 함수로 분리하여 전달합니다.

ex2/js/index.js:15: 로그인에 성공하면 결과 객체를 매개변수로 전달받습니다. 전달받은 결과에 자격 증명이 존재하면 로그인 처리를 진행합니다.

ex2/js/index.js:16~17: 자격 증명에는 AccessToken과 사용자 정보가 포함됩니다.

ex2/js/index.js:19~26: 자격 증명에 포함된 사용자 정보를 출력하며 로그인 처리를 완료합니다.

ex2/js/index.js:30~53: 오류 정보를 출력하는 과정입니다.

Redirect를 이용해서 처리

Redirect를 이용한 처리도 아주 간단하게 구현할 수 있습니다. 각 파일을 아래와 같이 수정합니다.

ex2/index.html

<!doctype html>
<html>
    <head>
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
        <script src="../firebase/init.js"></script>
        <script src="js/index.js"></script>
        <style>
            #authorized > div:nth-child(1) { font-size: 50px; }
            #authorized img#photo { height: 50px; border-radius: 25px; vertical-align: middle; }
        </style>
    </head>
    <body>
        <div id="signIn">
            <button onclick="signIn()">Sign In With Google(Popup)</button>
            <button onclick="signInWithRedirect()">Sign In With Google(Redirect)</button>
        </div>
        <div id="authorized">
            <div>Hello, <img id="photo" src="" /><span id="displayName"></span></div>
            <div>
                Email: <span id="email"></span><br />
                RefreshToken: <span id="refreshToken"></span><br />
                uid: <span id="uid"></span>
            </div>
            <div><button onclick="signOut()">Sign Out</button></div>
        </div>
        <div id="error">
            An error occurred: <span id="errmsg"></span><br />
            <button onclick="back();">Back</button>
        </div>
    </body>
</html>

ex2/js/index.js

$(document).ready(function() {
    $("#authorized").hide();
    $("#error").hide();
    
    firebase.auth().getRedirectResult()
        .then(signInSucceed)
        .catch(signInError);
});

function signIn() {
    var provider = new firebase.auth.GoogleAuthProvider();
    
    firebase.auth().signInWithPopup(provider)
            .then(signInSucceed)
            .catch(signInError);
}

function signInSucceed(result) {
    if (result.credential) {
        googleAccountToken = result.credential.accessToken;
        user = result.user;

        $("#photo").attr("src", user.photoURL);
        $("#displayName").html(user.displayName);
        $("#email").html(user.email);
        $("#refreshToken").html(user.refreshToken);
        $("#uid").html(user.uid);

        $("#authorized").show();
        $("#signIn").hide();
    }
}

function signInError(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    var email = error.email;
    var credential = error.credential;

    var errmsg = errorCode + " " + errorMessage;

    if(typeof(email) != 'undefined') {
        errmsg += "<br />";
        errmsg += "Cannot sign in with your google account: " + email;
    }

    if(typeof(credential) != 'undefined') {
        errmsg += "<br />";
        errmsg += credential;
    }

    lastWork = "signIn";
    $("#error #errmsg").html(errmsg);
    $("#error").show();
    $("#signIn").hide();
    return;
}

function signInWithRedirect() {
    var provider = new firebase.auth.GoogleAuthProvider();
    
    firebase.auth().signInWithRedirect(provider);
}

function back() {
    $("#" + lastWork).show();
    $("#error").hide();
}

주목할 코드

ex2/index.html:17: Redirect로 로그인하는 버튼이 추가되었습니다.

ex2/js/index.js:5: 페이지가 로드될 때, Redirect 인증이 되었는지 확인합니다. 로그인 처리와 오류 처리는 Popup을 이용해서 로그인 할 때 만든 함수를 그대로 사용할 수 있습니다.

ex2/js/index.js:59~63: Provider를 생성한 뒤 Redirect 인증을 요청합니다.

오류 처리

auth/unauthorized-domain

This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.

허용되지 않은 도메인에서 인증을 요청할 때 발생하는 오류입니다. Firebase는 프로젝트를 생성할 때 승인된 도메인 목록에 localhost와 AppName.firebaseapp.com 도메인을 추가합니다. 위 스크린샷을 보면 127.0.0.1로 접속한 것을 확인할 수 있습니다. 만약 별도 서버에 프로젝트를 업로드하고 작업하고 있다면, 해당 서버의 도메인을 추가해야 위와 같은 오류를 피할 수 있습니다. 아래 지침에 따라 도메인을 승인 목록에 추가할 수 있습니다.