[Android] 페이스북 계정으로 로그인하기(2020.04.07)

안녕하세요 초보개발자 시아아빠입니다.

 

어제 포스팅을 하다 마무리를 지어가는 단계에서 임시저장을 하고 껐는데요. 

 

오늘 켜보니 날라갔습니다. ㅠㅠ 다시 처음부터 쓰는 페이스북 계정으로 로그인하기 ㅠㅠ 알아보겠습니다.

 

 

I 프로젝트에 Facebook SDK 추가하기

우선 페이스북 로그인 하기위해서는 페이스북 SDK를 이용해야 합니다.

이에 2가지 방법이 있습니다.

 

1)  페이스북 디펠로퍼에서 다운받기 (https://developers.facebook.com/docs/facebook-login/android/?locale=en_US)

2)  Gradle에서 설정하기

 

여기서는 2번 Gradle을 통해 설정하는 방법을 알아보겠습니다.

 

build.gradle(Project: MyApp)파일을 열어줍니다.

 

 

1. 다음과 같이 mavenCentral(  )을 추가해줍니다.

(카카오톡 계정으로 로그인하기를 보시고 추가해주셨던 분들은 안해주셔도 됩니다. 또한 jcenter()가 있는지 확인해주세요.)

 

> build.gradle(Project: MyApp)

allprojects {
    repositories {
        google()
        jcenter()     
        
        //추가
        mavenCentral()        
    }
}

 

 

2. build.gradle(Module: app)의 dependencies에 다음과 같이 추가해줍니다.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.google.android.material:material:1.0.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    
    //페이스북 SDK 추가
    implementation 'com.facebook.android:facebook-login:[5,6)'

    // 카카오톡 SDK 추가
    api group: 'com.kakao.sdk', name: 'usermgmt', version: '1.14.0'
}

implementation 'com.facebook.android:facebook-login:[5,6)' 을 추가해줍니다. 완료하셨으면 Rebuild Project 해줍니다.

또는

implementation 'com.facebook.android:facebook-login:5.15.3'

(2020.04.07기준 최신인듯 합니다.)

 

참고로 Facebook 로그인 SDK를 사용할 때 자동 이벤트 로깅을 비활성화하지 않으면 앱의 이벤트가 Facebook 분석을 위해 자동으로 로깅되고 수집됩니다.

 

 

I App Key 발급 및 등록하기

App Key를 발급받아 프로젝트에 등록해주어야 합니다.

App Key 발급을 위한 방법을 알아보겠습니다.

 

1) Facebook For Developers에 접속합니다.

 

 

 

2) 등록 버튼을 눌러줍니다.

이어서 자신에 맞게 선택한 뒤 제출합니다.

 

 

3) 앱 ID와 연락처 이메일을 작성한 뒤 앱 ID 만들기 버튼을 클릭합니다.

 

4) 제품 중 Facebook 로그인 부분에 설정을 눌러줍니다.

5) 이어서 Android부분을 클릭해줍니다. 그 외의 이용자이실 경우 그에 맞게 선택해주시면 됩니다.

그 뒤에 순서에 맞게 다 작성해줍니다.

 

 

 

6) 작성중 4번을 보시면

저번에 HashKey 구하는 법을 포스팅했는데 이번에는 다른 방법으로 구해보겠습니다.

그 방법에 대해서는 추후 포스팅후 링크를 걸어드리겠습니다.

 

7) Android Studio로 돌아와 res>values>strings.xml에 아래와 같이 추가해줍니다.

<resources>    
    //페이스북 앱 키
    <string name="facebook_app_id">앱 ID</string>   //해당 앱 ID와 스키마는 아래 사진을 참고
    <string name="fb_login_protocol_scheme">login_protocol_scheme</string>
</resources>

 

앱 ID는 페이스북 디벨로퍼에서 상단에 부여받은 해당 앱 ID가 있습니다.

아니면 아래 박스에 있는 소스를 코드복사 버튼을 누른뒤 strings.xml 파일에 붙여줍니다.

 

 

8) 추가가 완료되었으면 Manifest.xml 파일을 엽니다.

application 요소 뒤에 user-permission을 추가해줍니다.

<uses-permission android:name="android.permission.INTERNET"/>

 

9) 다음내용을 application 요소 내에 추가합니다.

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

    <activity
        android:name="com.facebook.FacebookActivity"
        android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE" />
           <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>

 

 

10) 다음으로 버튼을 만들어줍니다.

 

Login 버튼을 추가해줄 xml을 엽니다.

 

> login.xml

<com.facebook.login.widget.LoginButton
    android:id="@+id/facebook_login"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_weight="1"
    android:layout_gravity="center_horizontal"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/com_kakao_login"/>

 

11) 이제 java에서 로그인 요청 후 받을 결과를 받을 Callback클래스를 만들어줍니다.

 

> LoginCallback.java

import android.os.Bundle;
import android.util.Log;

import com.facebook.AccessToken;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginResult;

import org.json.JSONObject;


public class LoginCallack implements FacebookCallback<LoginResult>
{

    @Override
    public void onSuccess(LoginResult loginResult)
    {
        Log.e("Callback :: ", "onSuccess");
        requestMe(loginResult.getAccessToken());
    }

    @Override
    public void onCancel()
    {
        Log.e("Callback :: ", "onCancel");
    }

    @Override
    public void onError(FacebookException error)
    {
        Log.e("Callback :: ", "onError : " + error.getMessage());
    }

    // 사용자 정보 요청
    public void requestMe(AccessToken token)
    {
        GraphRequest graphRequest = GraphRequest.newMeRequest(token,
                                      new GraphRequest.GraphJSONObjectCallback()
        {
             @Override
             public void onCompleted(JSONObject object, GraphResponse response)
             {
                 Log.e("result",object.toString());
             }
        });

        Bundle parameters = new Bundle();
        parameters.putString("fields", "id,name,email,gender,birthday");
        graphRequest.setParameters(parameters);
        graphRequest.executeAsync();
    }

}

이 클래스는 FacebookCallback<LoginResult>를 상속합니다.

 

그리하여 로그인에 대하여 성공시 onSuccess( ), 실패시 onError( ), 취소시 onCancel( )을 호출하는 LoginCallback 클래스를 새로 생성해줍니다. 

 

 

또한 사용자에 대한 정보를 요청하는 requestMe 메서드를 추가해줍니다.

 

 

12) LoginActivity.java

login을 구현하는 곳으로 돌아가줍니다.

 

> LoginActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;

import java.util.Arrays;

import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;

public class LoginActivtiy extends AppCompatActivity
{
    private EditText userId, userPwd;
    private long lastTimeBackPressed;
    private Context mContext;

    private LoginButton btn_Facebook_Login;
    private CallbackManager callbackManager;
    private LoginCallback loginCallack;

    private SessionCallback kakaoCallback;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_activity);

        callbackManager = CallbackManager.Factory.create();
        loginCallack = new LoginCallback();

        btn_Facebook_Login = (LoginButton) findViewById(R.id.facebook_login);
        btn_Facebook_Login.setReadPermissions(Arrays.asList("public_profile", "email"));
        btn_Facebook_Login.registerCallback(callbackManager, loginCallack);

        // logger.logPurchase(BigDecimal.valueOf(4.32), Currency.getInstance("USD"));  구매메서드
    }
    
    protected void onActivityResult(int requestCode, int resultCode, Intent data)
    {
        callbackManager.onActivityResult(requestCode, resultCode, data);
        super.onActivityResult(requestCode, resultCode, data);
    }
}

 

Callbackmanager를 통해서 데이터를 주고받습니다.

 

로그인 버튼을 눌렀을 때 요청하는 결과 값을 onActivityResult() 메소드를 통해 받고

CallbackManager를 통해 로그인 결과를 넘겨줍니다. 

 

 

도움이 되셨다면 하트 한번 눌러주시면 감사하겠습니다.