Unity 소셜 로그인 - Google, Firebase 연동

간만에 소셜 로그인 구현을 해볼까 합니다.

 

오늘은 Google 로그인을 구현할 것이고 준비물은 아래와 같습니다

• Google 개발자 계정
• Unity(Android 프로젝트)

구글 로그인은 Naver, Kakao, Google, Facebook(현 Meta) 로그인 4대장 중 가장 쉬운 축에 속합니다.

거기에 간단하게 Firebase로 이벤트 설정도 할 수 있으니 정말 잘 되어있습니다.

 

시작해봅시다.

 

우선 본 게시글은 22.10.04에 작성되었으며

• Unity 21.3.8f1(LTS) 사용
• google login plugin(github) 버전 10.0.4 사용

설정은 위와 같습니다.

 

Unity 에서 씬을 하나 만들어 UI를 구성해봅시다.

Canvas의 렌더 모드는 Screen Space - Camera로 설정하여 UI Camera를 할당했습니다.

UI Camera는 Main Camera를 복사한 뒤 태그와 카메라 설정을 조금 바꾼 카메라입니다.

 

UI Camera 설정

• Main Camera 복사
• Tag > UI Camera 태그 생성 후 설정
• Clear Flags > Solid Color
• Projection > Orthographic
• Culling Mask > UI

정도의 설정이면 됩니다.

 

그리고 Button과 Image, Text를 준비합니다.

• Button - 클릭 시 로그인 시도
• Image - 로그인 되면 프로필 사진을 보여줌
• Text - 로그인 성공시 ID 출력

* TMP를 사용할 땐 반드시 TMP Essentials를 Import해줘야 한다. 안그럼 폰트가 없어서 글씨가 안나온다.

 

기능구현만 할 것이니 버전을 출력할 텍스트UI하나를 더 추가해서 이 정도로 UI구성을 마쳤습니다.

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class LoginManager : MonoBehaviour
{
    public Button btnLogin;
    public Image imgSprite;
    public TMP_Text txtVersion;
    public TMP_Text txtID;
    string gameVersion = "Game Version";

    void Start()
    {        
        gameVersion = Application.version;
        txtVersion.text = gameVersion;        
    }
}

그리고 구글 플러그인이 없어도 게임버전은 출력이 가능하기 때문에 게임버전 출력정도만 작성했습니다.

 

이제 Firebase 콘솔로 가봅시다.

 

Firebase 콘솔에서 프로젝트를 추가하여 알맞게 설정해줍시다.

 

프로젝트 이름 설정 > Google 애널리틱스 사용 설정 > Google 애널리틱스 계정 선택 정도까지만 하면 끝납니다.

나는 애널리틱스를 사용했습니다.

 

프로젝트 개요에서 Unity를 골라줍니다.

 

패키지 이름 할당 후 앱등록

그러면 이런 화면으로 넘어올텐데 여기서 Android 앱으로 등록합니다.

패키지 이름은 Unity 프로젝트에서 Build Settings > Player Settings를 보면 있습니다.

패키지 이름 변경은 Player Settings > Other Settings > Identification 을 보면 있습니다.

 

해당 패키지 이름을 등록해주고 앱 닉네임은 설정해도 좋고 안해도 상관없습니다.

 

그 다음은 json파일을 주는데, 프로젝트의 Assets 폴더 하위에 아무데나 import 해주면 됩니다.

나는 Assets폴더에 바로 할당했습니다.

 

이어서 Firebase SDK를 줍니다.

다운받고 dotnet4에 있는 원하는 SDK를 프로젝트에 Import해줍시다.

• Unity 2017 미만은 dotnet3, 이상은 dotnet4를 사용한다고 합니다.

Firebase Auth와 Analytics를 Import했다.

 

설치 후에는 Auto Android Resolver를 활성화시킬 것이냐고 물어보는데 해주는게 좋습니다.

자동적으로 설정들을 변경해주는 기능이라 굉장히 편합니다.

 

이런 에러가 뜬다면 Unity 모듈에서 IOS Build Support도 설치해줍시다.

 

iOS Build Support를 설치했다면 Assets > External Dependency Manager > Android Resolver > Force Resolve를 실행시킵시다.

 

Resolution Succeeded가 뜨면 안전합니다.

 

Firebase SDK를 Import했으니 구글 콘솔로 넘어가봅시다.

 

앱을 하나 만듭니다.

 

만들었다면 Play 게임즈 서비스 >  설정 및 관리 > 설정 에서 이미 Google API를 사용하고 있다에 체크한다. (Firebase 사용중이니까)

 

클라우드 프로젝트는 알맞게 할당해주고 사용을 눌러줍니다.

 

프로젝트 지정이 끝났으면 위 사진과 같은 창으로 넘어가는데, 여기서 사용자 인증 정보 > 사용자 인증 정보 추가를 눌러 게임 서버를 설정해야 합니다.

 

사용자 인증 정보 추가

• 유형 > 게임 서버
• 이름 > 알아서 정하기
• OAuth 클라이언트 > Web client
  • 만약 OAuth클라이언트가 없다면 새로고침하면 나온다.(Firebase프로젝트를 Google Console에 연동했기 때문에 자동적으로 생성됐음)

 

이어서 리소스 스니펫을 가져오기 위해 업적을 하나 설정해줍시다.

Play 게임즈 서비스 > 설정 및 관리 > 업적 에서 업적을 아무렇게나 하나 만들어주고 저장합니다.

 

이후 Play 게임즈 서비스 > 설정 및 관리 > 설정 or 업적 에서 '리소스 보기'를 누르면 스니펫이 나옵니다.

Android(XML)를 복사하고 잘 보관해둡니다.

 

이제 마저 Firebase 설정을 하러 갑시다.

 

Firebase Console > 내 프로젝트 > Authentication > '시작하기' 로 들어갑니다.

 

인증 방법을 설정하는 페이지가 나올 건데 Play 게임즈로 설정해줍니다.

 

그리고 Google Console > 'Google Cloud Platform에서 보기'를 눌러 클라우드 콘솔 페이지를 엽니다.

 

여기서 Web client 를 클릭하면 웹 클라의 ID와 비밀번호를 볼 수 있습니다.

 

이것을 Firebase의 로그인 제공업체 > 클라이언트 ID와 클라이언트 보안 비밀번호에 할당하고 저장합니다.

 

이어서 Firebase에서 OAuth 동의 화면을 구성해줍시다.

양식에 알맞은 답을 잘 작성하다보면 동의화면 구성이 끝납니다.

 

여기서 OAuth 동의 화면 > 테스트 사용자 > ADD USERS를 눌러 테스터를 추가합니다.

사용자 추가 > 이메일 입력 후 '저장' 을 눌러주면 추가됩니다.

 

이제 Play 게임즈 플러그인을 다운받아봅시다.

GitHub - playgameservices/play-games-plugin-for-unity: Google Play Games plugin for Unity

 

현재 최신 버전인 11.01을 받으면 namespace에러가 나는 것을 확인했습니다.

따라서 페이지 우측에 있는 Releases로 들어가서 10.14버전을 다운받습니다.

 

다운받은 파일의 압축을 풀어주고 play-games-plugin-for-unity-10.14\current-build로 들어갑니다.

unitypackage 플러그인이 존재합니다. 이것을 Unity 프로젝트에 Import 시킵니다.

 

Import가 완료되었다면 Window > Google Play Games > Setup > Android setup...으로 들어갑니다.

 

이전에 Google Play Console에서 '리소스 보기'에서 볼 수 있었던 Android(XML)타입의 스니펫을 ①번에 넣어줍니다.

그리고 Google Cloud Console의 Web client의 ID를 ②번에 넣어줍니다.

 

성공적으로 설정되었습니다.

 

이제 이것을 실제로 사용해보기 위해 C# 스크립트를 작성해봅시다.

 

using System.Collections;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using GooglePlayGames;
using GooglePlayGames.BasicApi;


public class LoginManager : MonoBehaviour
{
    public Button btnLogin;
    public Image imgSprite;
    public TMP_Text txtVersion;
    public TMP_Text txtID;
    public TMP_Text txtUserName;
    public TMP_Text txtState;
    string gameVersion = "Game Version";

    void Start()
    {        
        gameVersion = Application.version;
        txtVersion.text = gameVersion;
        this.btnLogin.onClick.AddListener(() =>
        {
            Init();
        });
    }

    void Init()
    {
        Debug.Log("==================== Init GPGS");

        PlayGamesClientConfiguration config = new PlayGamesClientConfiguration.Builder()
            .Build();

        PlayGamesPlatform.InitializeInstance(config);
        PlayGamesPlatform.DebugLogEnabled = true;
        PlayGamesPlatform.Activate();

        Debug.Log("==================== Authenticate");

        PlayGamesPlatform.Instance.Authenticate(SignInInteractivity.CanPromptAlways, (result) =>
        {
            Debug.Log("====================" + result);
            Debug.Log("====================" + Social.localUser);
            Debug.Log("====================" + Social.localUser.authenticated);
            this.txtID.text = "No Data";
            this.txtUserName.text = "No Data";
            this.txtState.text = result.ToString();

            if (Social.localUser.authenticated)
            {
                this.txtID.text = Social.localUser.id;
                this.txtUserName.text = Social.localUser.userName;
                this.txtState.text = Social.localUser.state.ToString();


                StartCoroutine(WaitForLoadThumb(() =>
                {
                    //이미지 있음
                    Debug.Log("Loaded Image" + Social.localUser.image);

                    Debug.LogFormat("{0} x {1}", Social.localUser.image.width, Social.localUser.image.height);
                    this.imgSprite.sprite = Sprite.Create(Social.localUser.image, new Rect(0, 0, Social.localUser.image.width, Social.localUser.image.height), Vector2.zero);
                }));
            }            
        });
    }

	// 이미지 불러오기
    IEnumerator WaitForLoadThumb(System.Action callback)
    {
        while (true)
        {
            if (Social.localUser.image != null)
            {
                break;
            }
            yield return null;
        }
        callback();
    }
}

apk로 빌드하여 Nox에서 돌려보았습니다.

 

성공적으로 작동하는 모습입니다.

 

만약 정상적으로 로그인이 되지 않는다면 아래 글을 확인해보세요

https://bodong2.tistory.com/571

Unity Google 로그인 Canceled