유니티 Webgl 파이어베이스(firebase) - 페이스북 로그인 #5

---

1. 오늘 공부할 내용

오늘은 유니티Webgl 파이어베이스로 페이스북 로그인에 대해 다룹니다.

---

2. 동영상 강좌

---

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

1) Assets\FirebaseWebGL\Plugins\firebaseauth.jslib 파일에 아래의 함수를 추가합니다.

    SignInWithFacebook: function (objectName, callback, fallback) {
        var parsedObjectName = Pointer_stringify(objectName);
        var parsedCallback = Pointer_stringify(callback);
        var parsedFallback = Pointer_stringify(fallback);

        try {
            var provider = new firebase.auth.FacebookAuthProvider();
            firebase.auth().signInWithPopup(provider).then(function (unused) {
                window.unityInstance.SendMessage(parsedObjectName, parsedCallback, "Success: signed in with Facebook!");
            }).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)));
        }
    },

#코드 설명

Pointer_stringify 자바스크립트 문자로 변환하는 헬퍼 함수입니다.

new firebase.auth.FacebookAuthProvider(); 파이어베이스 자바스크립트 코드입니다. Facebook 의 객체 인스턴스를 참조합니다.

firebase.auth().signInWithPopup(provider) 페이스북 로그인 팝업창을 띄웁니다. 팝업이 아닌 페이지 변경으로 할 경우 사이트의 환경에 따라 오류가 발생할 수 있습니다. 

---

4. 유니티 스크립트 수정

1) Assets\FirebaseWebGL\Scripts\FirebaseAuth.cs 에 아래의 함수를 추가합니다.

        [DllImport("__Internal")]
        public static extern void SignInWithFacebook(string objectName, string callback, string fallback);

#코드 설명

[DllImport("__Internal")] 자바스크립트 라이브러리에 있는 함수를 링크할때 사용합니다. 링크할 함수의 이름과 매개변수는 자바스크립트 라이브러리에 작성된 함수와 동일해야 합니다.

extern 외부 변수를 참조할때 사용합니다.

 

2) \Assets\FirebaseWebGL\Scripts\AuthHandler.cs 에 아래의 함수를 추가합니다.

        public void SignInWithFacebook() =>
            FirebaseAuth.SignInWithFacebook(gameObject.name, "DisPlayInfo", "DisplayError");

#코드 설명

FirebaseAuth.cs 에서 방금 작성한 스테틱함수를 호출하는 코드입니다.

---

5. UI 작업

Facebook Login 버튼을 만들고 AuthHandler.cs의 SignInWithFacebook() 를 클릭이벤트로 연결합니다.

---

6. 빌드 후 Index.html 파일 수정

SDK 설정 및 구성 요소를 </body>위에 추가합니다.

      <!-- The core Firebase JS SDK is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>

      <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>

      <script>
          // Your web app's Firebase configuration
          // For Firebase JS SDK v7.20.0 and later, measurementId is optional
          var firebaseConfig = {
              apiKey: "본인의 apiKey",
              authDomain: "fir-webgl-study.firebaseapp.com",
              projectId: "fir-webgl-study",
              storageBucket: "fir-webgl-study.appspot.com",
              messagingSenderId: "348876701541",
              appId: "1:348876701541:web:39746e4b6edfb18f2e2b8c",
              measurementId: "G-W803ZS40ML",
              googleWebId: "본인의 ID.apps.googleusercontent.com"
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
          firebase.analytics();
      </script>

 

2) window.unityInstance = unityInstance; 를 }).then((unityInstance) => { 아래 추가합니다.

          var script = document.createElement("script");
          script.src = loaderUrl;
          script.onload = () => {
              createUnityInstance(canvas, config, (progress) => {
                  progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  window.unityInstance = unityInstance;
                  loadingBar.style.display = "none";
                  fullscreenButton.onclick = () => {
                      unityInstance.SetFullscreen(1);
                  };
              }).catch((message) => {
                  alert(message);
              });
          };
          document.body.appendChild(script);
      </script>

---

7. 페이스북 개발자 페이지에 앱 등록

1) https://developers.facebook.com/?locale=ko_KR 로 이동합니다.

2) 내 앱 등록을 합니다. 페이스북 개발자 콘솔에 앱 등록하는 방법에 대해 모르시는 분들은 아래의 링크를 클릭하세요.

[프로그램 강좌/ 유니티 + 뒤끝서버] - 뒤끝서버 + 유니티 #5 페이스북 로그인

3) 설정 - 기본 설정에서 앱ID 와  앱 시크릿 코드를 복사합니다. 

앱 스크릿 코드를 복사하실 때는 반드시 보기 버튼을 누른 후에 하세요.

---

8. 파이어베이스 콘솔창 설정

1) Authentication - Sign-in-method 로 이동합니다.

2) 페이스북 로그인을 활성화합니다. 위에서 복사한 페이스북 앱ID와 시크릿 코드를 입력합니다.

3) OAuth 리디렉션 URL를 페이스북 개발자 콘솔에서 내 앱 -> 페이스북 로그인 -> 설정 -> 유효한 OAth 리디렉션 URL 에 입력합니다.

---

8. 웹 등록 후 테스트하기

1) https://itch.io/ 로 이동해서 앱 폴더를 복사해서 업로드 후 페이스북 로그인 테스트를 진행합니다.