소셜로그인 수업내용 21.07.09 . Facebook 로그인

오늘은 Facebook로그인을 구현할 예정이다.

참고할 링크

https://developers.facebook.com/docs/development/register

페이스북 개발자 문서

 

---

https://developers.facebook.com/?locale=ko_KR 

Facebook for Developers

• 우선 페이스북 개발자페이지에서 로그인을 하자.

• '내 앱'을 들어가서 앱을 만들자.

• 게임으로 만들고 앱이름을 정하자.
• 주의할 점은 앱 이름에 'FB', "Facebook" 같이 페이스북을 지칭하는이름이 들어가면 거부된다.
• 앱 만들기.

• 설정 - 기본설정에서 나중에 우리는 앱ID와 시크릿코드가 필요하다. 알아두자.

• 일단 Facebook SDK를 받아주자. 
• 문서의 Getting Started 부분에 있다.

• 최신버전으로 받았다.

그리고 해당 SDK를 프로젝트에 import하자.

• import를 시키면 백업이 있냐고 물어보는 창이 뜨는데 진행하자.
• import하면 GPGS때처럼 의존성을 해결해주는 창이 뜬다.
• 사진처럼 완료되면 꺼주자.

• 우선 예제를 보자.
• Build Setting에서 MainMenu와 LogView를 넣어주자.
• SDK에 동봉된 Examples에서 Mainmenu를 실행시켜보았다.

• FB Init을 누르면 버튼들이 활성화된다.(왼쪽)
• Classic Login을 누르면 해당 오른쪽 창이 나온다.

• 여기서 Find Access Token을 하면 해당 창이 뜨는데, 여기서 앱토큰을 이용해서 유저토큰을 만들어야한다.
• 여기서 유저토큰의 '권한을 부여해야합니다'를 눌러러 절차를 진행한다.

• 앱토큰을 기입하고 Generate AccessToken을 하고 로그인을 하면 유저 토큰이생성된다.

• 생성된 유저토큰을 복사하여 유니티에디터에서 가동되고 있는 FB로그인 예제에 붙여넣어주자.
• 그리고 Send Success 클릭.

• 성공했다면 Status : Success가 출력된다.

• 그렇다면 해당 화면처럼 나의 로그가 출력된다.
• JSON형식으로 된 데이터도 보이며 액세스 토큰의 정보, 에러정보, 시간, 날짜등이 출력된다.

• 모든씬을 다 빌드해주자.

•  
• 문서에서는 API레벨을 15이상으로 하라고 했는데, UniWebView랑 쓰는 경우가 잦다보니 21로 설정해주었다.(UniWebView는 21이상 요구)
•  그리고 패키지 이름을 앱이름과 같게 해주었다.
•  

• 핸들러가 뜰 텐데 이 전과 마찬가지로 에러없이 완료되면 꺼주자.
• 그리고 Facebook Settings의 PackageName을 보면 내가 설정한 Package Name으로 바뀌어있을것이다.

• 그리고 개발자페이지의 설정-기본설정에서 아래로 스크롤하여 안드로이드 플랫폼을 추가해준다.

• 추가했다면 다음과같은 화면이 보일텐데 Unity Editor에 있는 FacebookSettings에서 값들을 가져오면 된다.

• 만약 키해시가 생성되지 않는다면 Unity Editor에서 기본값으로 지정한 SDK가 아닌 Android Studio의 SDK를 사용해야한다.

• Android Studio에서는 안드로이드 API레벨을 페이스북이 요구하는 15레벨 이상을 모두 체크한 뒤 Apply를 해준다.
• 이후 모두 설치를 해주자.

• 만약 다음과 같이 OpenSSL오류가 출력된다면 OpenSSL다운받아야한다.

https://code.google.com/archive/p/openssl-for-windows/downloads

Google Code Archive - Long-term storage for Google Code Project Hosting.

• 해당 링크로 들어가서 0.9.8k X64버전을 다운받자.
• 압축을 풀고 C드라이브로 옮겨준다.
• 환경변수를 OpenSSL폴더의 bin폴더로 경로를 잡아주자.
• * 주의 환경변수를 잡고나서는 윈도우를 재부팅 해주는 것이 좋다. 

• 그리고 cmd창을 열어 버전이 출력된다면 제대로 경로가 잡힌것이다.

• 그리고 이번엔 Java tool 경로를 잡아달라고 뜰 것이다.

• 그렇다면 JDK의 bin하위에 가서 cmd를 열어 keytool이 되는지를 확인하자.
• 위 사진과 같이 나온다면 해당 bin폴더에서는 keytool실행이 가능하기 때문에 해당 폴더를 환경변수로 잡아주면 된다.

• 잘 잡혔으니 해당 설정값들을 개발자페이지에 할당해주자.
• 그리고 페이지 변경사항 저장을 하고 빌드를 한다.
• 빌드할 때 메인메뉴가 첫번째로 실행되도록 주의하자.

---

자 이제 만들어보자.

• Facebook - Edit Setting을 누르면 페이스북 세팅이 인스펙터에 나온다.
• AppId가 없다고 나올것이다.

• AppId는 페이스북 개발자페이지의 왼쪽 상단에 노출되어있다.

• 해당 아이디를 기입하고 앱 이름을 우리가 페이지에서 만든 이름으로 바꿔주자.

• 그리고 간단하게 dim과 button UI를 만들어 버튼을 누르면 로그가 출력되게 만들어보자.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using Facebook.Unity;

public class App : MonoBehaviour
{
    public Button btnLogin;
    List<string> perms = new List<string>() { "public_profile", "email" };

    void Awake()
    {
        if (!FB.IsInitialized)
        {
            // Initialize the Facebook SDK
            FB.Init(InitCallback, OnHideUnity);
        }
        else
        {
            // Already initialized, signal an app activation App Event
            FB.ActivateApp();
        }
    }

    private void InitCallback()
    {
        if (FB.IsInitialized)
        {
            // Signal an app activation App Event
            FB.ActivateApp();
            // Continue with Facebook SDK
            // ...
        }
        else
        {
            Debug.Log("Failed to Initialize the Facebook SDK");
        }
    }

    private void OnHideUnity(bool isGameShown)
    {
        if (!isGameShown)
        {
            // Pause the game - we will need to hide
            Time.timeScale = 0;
        }
        else
        {
            // Resume the game - we're getting focus again
            Time.timeScale = 1;
        }
    }      

    private void AuthCallback(ILoginResult result)
    {
        if (FB.IsLoggedIn)
        {
            // AccessToken class will have session details
            var aToken = Facebook.Unity.AccessToken.CurrentAccessToken;
            // Print current access token's User ID
            Debug.Log(aToken.UserId);
            // Print current access token's granted permissions
            foreach (string perm in aToken.Permissions)
            {
                Debug.Log(perm);
            }
        }
        else
        {
            Debug.Log("User cancelled login");
        }        

        void Start()
        {
            this.btnLogin.onClick.AddListener(() =>
            {
                Debug.Log("Facebook Login");
                FB.LogInWithReadPermissions(perms, AuthCallback);
            });
        }
    }
}

• 버튼을 제대로 만들었다면 코드를 다음과 같이 작성하고 실행해보자.
• 그리고 빌드를 하여 APK를 돌려보자.

• 로그인화면이 뜨고 로그인을 하면 다음과 같은 창이 나온다.
• '계속'을 누르면 오른쪽 사진처럼 처음화면으로 돌아온다.