Firebase: Facebook Sign-In Authentication FIREBASE

Firebase: Facebook Sign-In Authentication  

Firebase: Facebook Sign-In Authentication

Firebase: Facebook Sign-In Authentication

Facebook sign-in authentication is quite typical to implement. The users can authenticate with Firebase using their Facebook accounts by integrating Facebook logging into our application.

13 steps to implement Facebook sign-in authentication. with image examples.

Step1:

Let's create an Android and Firebase project, and then add the Firebase project with the application. Also, add SHA-1 and SHA-256 keys in the Firebase console. After that, add all the required dependencies, i.e., firebase-core, firebase-auth, and plugin in 'app.build.gradle' file and classpath in 'build.gradle' file.

And let's add the Facebook login dependency in the 'app.build.gradle' file'.

 

Step2:

Now, we have to create an application on 'Facebook for developer' website. For creating a request, you have a Facebook account. Login with the Facebook account. Then, go to the Facebook developer site with the help of the following link:

https://developers.facebook.com/

Once your developer account is logged in, then click on Docs to move on to the document page.

 

Step3:

In the document page, scroll down and click on the Facebook login. And from the Facebook login page, select Android to move an android page from there, now select an app or create a new app.

If we are not a developer, then we have to register as a developer by clicking on Register.

Click on next to register as a Facebook developer.

After clicking on the next, a new screen will be visible from where select the developer option.

After selecting the developer, the welcome page will be opened.

From the welcome page, select Create First App and give it a name for display and contact email and click on Create App ID.

Perform a security check.

Now, go to Home->Doc->facebook login->android and select the app which we have created before and copied the App ID.

 

Step 4:

Now, move to the 'string.xml' file of Android Studio and create two strings, i.e., facebook_app_id and fb_login_protocol_scheme. For facebook_app_id, and paste the app id, which we have copied before, and for fb_login_protocol_scheme, we will add prefix FB in our app_id and use it as a protocol string.

Step 5:

You need to add permission for the Internet to our Android Manifest file.

Step 6:

Now add the Metadata. For this, and go to the Facebook developer site and copy the code of step 5.

After copying the code, now paste it in Manifest files after the MainActivity code.

Step 7:

Now, associate our package name and default class with our app. So add the package name and default activity class name in the developer site.

Step 8:

In the next step, add the Development Key Hashes for our app. For this, you need OpenSSL open library. If you don't have this library, then we first have to download the OpenSSL library. And after that we will execute the following command in the command prompt:

keytool -export cert -alias androiddebugkey - Keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64  

Now copy this key and paste it in the developer site's Key Hashes.

Step 9:

Now you have to enable single sign-on for our app in Facebook developer sites.

Step 10:

Now, go to the basic setting of our app on the Facebook developer site. And from here, we have to copy the App Secret that will be used in Firebase console.

Step 11:

The App Secret, which we have copied from the Facebook developer site, will be pasted in the firebase console. When you enable the Facebook sign-in method, it will ask for the App ID and App Secret and provide OAuth redirect URL, which will be added to our app on the Facebook developer site.

Now, let's go to the Facebook setting page. Here, we will add the OAuth redirect URL to Facebook login settings.

Step 12:

Now create a Facebook login button from the SDK. It is a UI element that wraps functionality available in the login manager.

Step 13:

Now modify our MainActivity.java file to perform the authentication using Facebook in the following way:

  1. public class MainActivity extends AppCompatActivity {  
  2.    
  3.     private static final String TAG = "FacebookLogin";  
  4.     private static final int RC_SIGN_IN = 12345;  
  5.    
  6.     private CallbackManager mCallbackManager;  
  7.    
  8.     private FirebaseAuth mAuth;  
  9.    
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.activity_main);  
  14.    
  15.         // Initialize Firebase Auth  
  16.         mAuth = FirebaseAuth.getInstance();  
  17.    
  18.         // Initialize Facebook Login button  
  19.         mCallbackManager = CallbackManager.Factory.create();  
  20.    
  21.         LoginButton loginButton = findViewById(R.id.login_button);  
  22.    
  23.         loginButton.setReadPermissions("email", "public_profile");  
  24.         loginButton.registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() {  
  25.             @Override  
  26.             public void onSuccess(LoginResult loginResult) {  
  27.                 Log.d(TAG, "facebook:onSuccess:" + loginResult);  
  28.                 handleFacebookAccessToken(loginResult.getAccessToken());  
  29.             }  
  30.    
  31.             @Override  
  32.             public void onCancel() {  
  33.                 Log.d(TAG, "facebook:onCancel");  
  34.             }  
  35.    
  36.             @Override  
  37.             public void onError(FacebookException error) {  
  38.    
  39.             }  
  40.    
  41.         });  
  42.     }  
  43.    
  44.     @Override  
  45.     public void onStart() {  
  46.         super.onStart();  
  47.    
  48.         // Checking if the user is signed in (non-null) and update UI accordingly.  
  49.         FirebaseUser currentUser = mAuth.getCurrentUser();  
  50.    
  51.         if (currentUser != null) {  
  52.             Log.d(TAG, "Currently Signed in: " + currentUser.getEmail());  
  53.             Toast.makeText(MainActivity.this, "Currently Logged in: " + currentUser.getEmail(), Toast.LENGTH_LONG).show();  
  54.         }  
  55.     }  
  56.     @Override  
  57.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
  58.         super.onActivityResult(requestCode, resultCode, data);  
  59.    
  60.         // The activity result pass back to the Facebook SDK  
  61.         mCallbackManager.onActivityResult(requestCode, resultCode, data);  
  62.     }  
  63.    
  64.     private void handleFacebookAccessToken(AccessToken token) {  
  65.         Log.d(TAG, "handleFacebookAccessToken:" + token);  
  66.    
  67.         AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());  
  68.    
  69.         mAuth.signInWithCredential(credential)  
  70.                 .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {  
  71.                     @Override  
  72.                     public void onComplete(@NonNull Task<AuthResult> task) {  
  73.                         if (task.isSuccessful()) {  
  74.                             // Sign in success, UI will update with the signed-in user's information  
  75.                             Log.d(TAG, "signInWithCredential:success");  
  76.                             FirebaseUser user = mAuth.getCurrentUser();  
  77.                             Toast.makeText(MainActivity.this, "Authentication Succeeded.", Toast.LENGTH_SHORT).show();  
  78.                         } else {  
  79.                             // If sign-in fails, a message will display to the user.  
  80.                             Log.w(TAG, "signInWithCredential:failure", task.getException());  
  81.                             Toast.makeText(MainActivity.this, "Authentication failed.", Toast.LENGTH_SHORT).show();  
  82.                         }  
  83.                     }  
  84.                 });  
  85.     }  
  86. }  

Output:

#askProgrammers
Learn Programming for Free


Join Programmers Community on Telegram


Talk with Experienced Programmers


Just drop a message, we will solve your queries