유니티 Webgl 파이어베이스(firebase) - 이메일 로그인 #3

---

가. 오늘 공부할 내용

https://tv.kakao.com/channel/3265468/cliplink/419304090

---

나. 동영상 강좌

https://tv.kakao.com/channel/3265468/cliplink/419308709

---

다. 자바스크립트 라이브러리 수정

1) firebaseauth.jslib 을 열고 수정합니다. SignInWithEmailAndPassword 함수가 추가되었습니다.

mergeInto(LibraryManager.library, {

	CreateUserWithEmailAndPassword: function(email, password, objectName, callback, fallback) {

	    var parsedEmail = Pointer_stringify(email);
        var parsedPassword = Pointer_stringify(password);
        var parsedObjectName = Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try {

            firebase.auth().createUserWithEmailAndPassword(parsedEmail, parsedPassword).then(function (unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: signed up for " + parsedEmail);
            }).catch(function (error) {
                window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)));
            });

        } catch (error) {
            window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)) );
        }
	},

    SignInWithEmailAndPassword: function (email, password, objectName, callback, fallback) {

        var parsedEmail = Pointer_stringify(email);
        var parsedPassword = Pointer_stringify(password);
        var parsedObjectName = Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try {

            firebase.auth().signInWithEmailAndPassword(parsedEmail, parsedPassword).then(function (unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: signed in for " + parsedEmail);
            }).catch(function (error) {
                window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)) );
            });

        } catch (error) {
            window.unityInstance.SendMessage(parsedObjectName, parsedFallback, JSON.stringify(error, Object.getOwnPropertyNames(error)) );
        }
    }

});

#코드설명

signInWithEmailAndPassword 는 파이어베이스 자바스크립트 코드입니다. 이메일, 비밀번호 로그인을 할 때 사용됩니다.

 

---

라. 유니티 스크립트 수정

1) Assets\FirebaseWebGL\Scripts 폴더에 있는 FirebaseAuth.cs를 수정합니다.

using System.Runtime.InteropServices;

namespace FirebaseWebGL.Scripts.FirebaseBridge
{
    public static class FirebaseAuth
    {
        [DllImport("__Internal")]
        public static extern void CreateUserWithEmailAndPassword(string email, string password, string objectName, string callback, string fallback);

        [DllImport("__Internal")]
        public static extern void SignInWithEmailAndPassword(string email, string password, string objectName, string callback, string fallback);
    }
}

#코드 설명

자바스크립트 라이브러리인 signInWithEmailAndPassword 함수를 실행하는 SignInWithEmailAndPassword함수가 추가되었습니다. 

 

2) \Assets\Scripts 폴더에 있는 AuthHandler.cs 에 아래 함수를 추가합니다.

public void SignWithEmailAndPassword() =>
            FirebaseAuth.SignInWithEmailAndPassword(emailInput.text, passwordInput.text, gameObject.name, "DisPlayInfo", "DisplayError");

#코드 설명

위에서 만든 FirebaseAuth.SignInWithEmailAndPassword 를 호출하는 함수입니다. 로그인 성공시 DisPlayInfo함수를 호출하고 로그인이 실패하면 DisplayError함수를 실행합니다.

---

마. UI 작업

로그인 버튼을 만들고 클릭이벤트로 위에서 만든 AuthHandler.cs의 SignWithEmailAndPassword함수가 실행되도록 연결합니다.

---

바. 빌드 후 Index.html 수정

1) Webgl빌드를 진행합니다.

2) Index.html 에 파이어베이스 웹 구성 코드와 Firebase JS SDK 인증 코드를 넣습니다. 어제 메모장에 보관하라고 말씀드린 그 코드입니다. 기억이 안나신 분들은 이전 강좌를 다시 한번 봐주세요.

[프로그램 강좌/유니티 + 파이어베이스] - 유니티 Webgl 파이어베이스(firebase) - 이메일 가입 #2

유니티 Webgl 파이어베이스(firebase) - 이메일 가입 #2

 

---

사. 웹사이트에 올려서 테스트하기

1) Webgl 파일이 있는 폴더를 압축합니다. 

2) https://itch.io/ 로 가서 압축한 파일을 업로드하고 테스트합니다.