[Android/안드로이드] 페이스북로그인 버튼 커스텀/Facebook Login Button Custom

이전 글에서는 페이스북 로그인을 하기 위해서 페이스북에서 제공하는 로그인 버튼을 사용해서 연동을 했었습니다.

이번에 글에서는 페이스북에서 제공하는 로그인 버튼이 아니라 다른 이미지도 넣고 마음대로 꾸밀 수 있는 커스텀 버튼을 생성해 연동하겠습니다.

 

버튼을 커스텀하는 것이기 때문에 App Key발급 및 등록과 manifest부분과 string.xml에 대해서는 이전 글을 참조해주시기 바랍니다.

 

2019/12/17 - [Android/유용한 기술] - [Android/안드로이드] 페이스북 로그인 / Facebook Login 연동

[Android/안드로이드] 페이스북 로그인 / Facebook Login 연동

 

로그인 버튼 구현

activity_main.xml

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:orientation="vertical"
      tools:context=".MainActivity">
  
      <Button
          android:background="@drawable/facebook_icon"
          android:id="@+id/btn_custom_login"
          android:layout_width="72dp"
          android:layout_height="72dp"/>
  
  </LinearLayout>
  

여기서 android:background="@drawable/facebook_icon" 에는 오류가 나올 수 있습니다. 저는 예시로 이미지 리소스 파일을 넣은 것이므로 당황하지 말고 자신이 넣고싶은 이미지 리소스를 넣으시면 됩니다.

 

Facebook Custom Button 로그인 연동

 

이제 로그인 버튼도 만들었고, Callback 클래스도 구현을 했으니 이제 이를 연결을 해줍니다.

 

MainActicity.java

  
  package com.example.facebooklogin;
  
  import androidx.appcompat.app.AppCompatActivity;
  
  import android.content.Intent;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;
  
  import com.facebook.CallbackManager;
  import com.facebook.login.LoginManager;
  
  import java.util.Arrays;
  
  public class MainActivity extends AppCompatActivity {
  
      private Button btn_custom_login;
  
      private LoginCallback mLoginCallback;
      private CallbackManager mCallbackManager;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          mCallbackManager = CallbackManager.Factory.create();
          mLoginCallback = new LoginCallback();
  
          btn_custom_login = (Button) findViewById(R.id.btn_custom_login);
          btn_custom_login.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View view) {
                  LoginManager loginManager = LoginManager.getInstance();
                  loginManager.logInWithReadPermissions(MainActivity.this,
                          Arrays.asList("public_profile", "email"));
                  loginManager.registerCallback(mCallbackManager, mLoginCallback);
              }
          });
      }
  
      @Override
      protected void onActivityResult(int requestCode, int resultCode, Intent data) {
          mCallbackManager.onActivityResult(requestCode, resultCode, data);
          super.onActivityResult(requestCode, resultCode, data);
      }
  }
  

버튼을 클릭 했을 경우 LoginManager를 통해 권한 요청과 콜백을 연결시켜주면 됩니다.

 

여기서 주의할 점은 페이스북에서 제공하는 버튼의 경우 페이스북 로그인을 했을 경우 자동으로 로그아웃 버튼으로 바뀌게 되는데, 저희는 단순히 안드로이드에서 제공하는 버튼에 이미지를 입히고 기능을 입힌것 뿐이라 UI변경까진 지원하지 않습니다. 그래서 커스텀 버튼의 경우 UI도 따로 변경을 해주어야 합니다.

 

Facebook Logout

  
  btn_custom_logout = (Button) findViewById(R.id.btn_custom_logout);
  btn_custom_logout.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
          LoginManager.getInstance().logOut();
      }
  });
          

앞서 페이스북에서 지원하는 버튼의 경우 로그아웃을 지원해 주지만 커스텀 버튼의 경우 지원해주지 않기 때문에 위 코드와 같이 로그아웃을 따로 추가해주어야 합니다.

 

로그아웃 처리는 LoginManager를 통해 logOut()메소드만 호출해주면 됩니다.