본문 바로가기
개발일기/스타일판다

Facebook으로 로그인하기

by 유주원 2016. 6. 14.

이번에 개발하는 앱은 Facebook 로그인 기능을 넣어보기로 했다. 

Facebook 로그인 기능을 넣음으로써 사용자 분석도 해보고 싶은 욕망이 예전부터 꿈틀댔었기에...


각설하고, Facebook sdk를 어떻게 사용해서 로그인 하는지를 살펴보자.


우선 Facebook sdk를 사용하려면 Facebook 개발자 센터에 가서 등록을 해주어야 한다.


Facebook 개발자 센터


우선 Facebook sdk를 사용하려면 Facebook 개발자 센터에 가서 등록을 해주어야 한다.


해당 사이트 들어가면 오른쪽 상단에 메뉴가 있고 해당 메뉴 안에 앱 추가라는 항목이 존재한다. 해당 항목을 클릭해서 추가하려는 앱 정보를 기입하면 된다.



해당 항목을 완료하면 AppID가 생성되고 이렇게 생성된 AppID를 코드에 작성해야 한다.


이제 sdk 코드를 살펴보자.


우선 facebook sdk를 사용하기 위해 gradle을 추가해 준다.


dependencies {

    ....

    compile 'com.facebook.android:facebook-android-sdk:4.8.2'

    ....

}


AndroidManifest.xml 파일을 열고 아래의 코드를 추가해준다.


<application

    ...

    <activity android:name="com.facebook.FacebookActivity"

              android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"

              android:theme="@android:style/Theme.Translucent.NotitleBar"

              android:label="@string/app_name" />

    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="appID" />


위의 meta-data 부근에 기존에 facebook 개발자 센터에서 만든 appID를 기입하면 된다.


이제 실제 login 버튼을 만들고 해당 login 버튼을 클릭해서 facebook login 창을 호출할 수 있도록 만들어 보자.


우선 onCreate 함수에서 처음 facebooksdk를 초기화 하고, 사용자가 기존에 token을 발행한 적 있는지를 확인한다. 발행 한 적이 없다면 loginButton을 클릭했을시 facebook 로그인 창으로 가게 만들고, 저장된 token이 있다면 따로 로그인 창을 가게 하지 않고 곧바로 다음 액션을 취하게 한다.




아래는 해당 코드이다.



다음은 xml 코드이다.




<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" 

    android:layout_width="match_parent"

    android:layout_height="match_parent" 

    android:gravity="center">

    <com.facebook.login.widget.LoginButton

        android:id="@+id/login_button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textSize="17sp"

        android:paddingBottom="15dp"

        android:paddingTop="15dp"

        android:layout_marginBottom="30dp"

        android:layout_alignParentBottom="true" />

</RelativeLayout>


xml에서 로그인 버튼 크기를 늘리기 위해 height값을 아무리 늘려도 ui 변화가 발생하지 않는다. 만약 로그인 버튼 크기를 늘리기 위해서는 padding 값을 조절 해서 크기를 늘려야 한다.


위의 코드를 적용하면 아래와 같은 결과 화면을 확인할 수 있다.



  


로그인 된 상태를 프로그램 적으로 강제로 로그아웃 하고 싶다면 아래의 코드를 넣어주면 된다.


LoginManager.getInstance().logOut();