在Android Studio中使用Facebook进行认证

认证对于确保对特定在线内容的访问至关重要。用户必须提供他们的身份证明。

在这篇文章中，我们将讨论如何在Android应用程序中实现Facebook认证。

前提条件

要想继续学习，读者应该具备以下条件

• 安装了Android Studio。
• 一些关于Kotlin 的基本知识。
• 对使用Firebase 的认证有一定了解。

目标

在本文结束时，读者将了解到Facebook认证是如何工作的。

简介

当访问第三方服务时，大多数应用程序要求用户确认自己的身份。其中一个流行的认证框架是Facebook。

这个软件巨头有一个SDK，可以进行身份验证。因此，开发者可以用它来确保个人在访问第三方服务之前进行登录。

Firebase概述

Firebase也是一个用于认证和数据存储的通用系统。它允许用户使用emails 、passwords ，甚至phone numbers ，来认证自己。

firebaseAuth.createUserWithEmailAndPassword(email,password) 方法使用所提供的凭证（电子邮件和密码）来认证一个人。

然而，Firebase认证的实现很繁琐，很有挑战性。这就是为什么一些开发者仍然从头开始建立他们的认证系统。

为什么是Facebook登录？

Facebook认证比其他传统框架有以下优势。

• 当个人使用Facebook登录时，他们授予你的应用程序访问信息或执行不同操作的权限。

• 通过Facebook登录，用户不需要创建一个新的账户来访问你的应用程序的内容。

在本教程中，我们将创建一个使用Facebook认证用户的应用程序。

该应用程序还将显示用户的Facebook详细信息。例如，username, email, birthday, gender, and profile pic 。

第1步：开始

在这一步，我们将用empty activity 模板创建一个项目。

在Android Studio中，导航到左上角，点击文件->新建->新项目->空活动。

第2步：将你的应用程序连接到Firebase

在你的Android Studio 的顶部，点击Tools ，然后点击Firebase 。在你右边出现的助手窗口中选择Authentication 。

你需要选择Facebook 和connect to Firebase 。下一步是将Firebase Authentication 添加到你的应用程序。

在你的浏览器上打开Firebase console ，然后选择你的项目。在authentication ，点击Facebook ，并启用它。

第3步：开发人员的Facebook

导航到developers.facebook.com/，并创建一个帐户（如果你没有）。

然后点击my apps ，创建一个新的应用程序。在下拉菜单中，选择Consumer ，然后点击next 。输入app details ，完成注册。

在你的左边，点击Settings ，然后选择basic 。你现在可以复制App ID 和App Secret 。

将这些信息粘贴到Facebook authentication 下的Firebase console fields 。

现在，点击dashboard ，选择Facebook setup 选项。选择Android ，然后点击下一步。

第4步：添加依赖性

在你的settings.gradle 文件中，在repositories下添加mavenCentral() 。

在应用程序级别的build.gradle 文件中，包括以下依赖项。

//Glide
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
//Facebook
implementation 'com.facebook.android:facebook-android-sdk:12.1.0'

同时，在build.gradle 文件中添加以下设置。

buildFeatures {
        viewBinding true
    }

第5步：生成哈希密钥

使用你的SHA1 密钥，生成一个hash key ，并将其粘贴在key hashes option 。

第6步：编辑Manifest和String文件

在你的Manifest.xml 和string.xml 文件中添加以下几行代码。

Manifest.xml

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

//in 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>

String.xml

<string name="facebook_app_id">214268554165523</string>
<string name="fb_login_protocol_scheme">fb214268554165523</string>

第7步：创建用户界面

我们的用户界面将包括以下组件。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
 tools:context=".MainActivity">

 <ImageView
 android:id="@+id/profile_pic"
 android:layout_width="150dp"
 android:layout_height="150dp"
 android:layout_marginTop="32dp"
 android:scaleType="centerCrop"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 android:src="@drawable/com_facebook_favicon_blue"/>

 <TextView
 android:id="@+id/user_name"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:textColor="@color/black"
 android:padding="10dp"
 android:text="Name"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/profile_pic" />

 <TextView
 android:id="@+id/user_gender"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:textColor="@color/black"
 android:padding="10dp"
 android:text="Gender"
 app:layout_constraintEnd_toEndOf="@+id/user_name"
 app:layout_constraintStart_toStartOf="@+id/user_name"
 app:layout_constraintTop_toBottomOf="@+id/user_name" />

 <TextView
 android:id="@+id/user_b_day"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:padding="10dp"
 android:textColor="@color/black"
 android:text="Birthday"
 app:layout_constraintEnd_toEndOf="@+id/user_gender"
 app:layout_constraintStart_toStartOf="@+id/user_gender"
 app:layout_constraintTop_toBottomOf="@+id/user_gender" />

 <TextView
 android:id="@+id/user_email"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:padding="10dp"
 android:textColor="@color/black"
 android:text="Email"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="@+id/user_b_day"
 app:layout_constraintTop_toBottomOf="@+id/user_b_day" />

 <View
 android:id="@+id/view"
 android:layout_width="150dp"
 android:layout_height="2dp"
 android:layout_marginTop="32dp"
 android:background="@color/black"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/user_email" />

 <TextView
 android:id="@+id/textView5"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginStart="8dp"
 android:text="Sign in with:"
 android:textColor="@color/black"
 android:textSize="16sp"
 android:textStyle="bold"
 app:layout_constraintBottom_toBottomOf="@+id/view"
 app:layout_constraintStart_toEndOf="@+id/view"
 app:layout_constraintTop_toTopOf="@+id/view" />

 <View
 android:id="@+id/view2"
 android:layout_width="150dp"
 android:layout_height="2dp"
 android:layout_marginStart="8dp"
 android:background="@color/black"
 app:layout_constraintBottom_toBottomOf="@+id/view"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toEndOf="@+id/textView5"
 app:layout_constraintTop_toTopOf="@+id/view" />

 <com.facebook.login.widget.LoginButton
 android:id="@+id/login_button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="24dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/textView5" />

</androidx.constraintlayout.widget.ConstraintLayout>

注意，我们已经从Facebook认证包中导入了<com.facebook.login.widget.LoginButton/> 。

第8步：MainActivity

我们需要在MainActivity.kt 文件中包含一些逻辑。请注意，我已经用行内注释解释了以下代码。

import android.content.Intent
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.bumptech.glide.Glide
import com.facebook.*
import com.facebook.login.LoginResult
import com.thecalvary.facebooklogindemo.databinding.ActivityMainBinding
import org.json.JSONObject
import java.util.*

private const val TAG = "MainActivity"
class MainActivity : AppCompatActivity() {

//To avoid findViewById, we use view binding.
    private lateinit var binding: ActivityMainBinding

//Declare the Facebook callbackmanager    
    private lateinit var callBackManager: CallbackManager
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view: View = binding.root
        setContentView(view)
        
//Now initialize the callbackmanager

        callBackManager = CallbackManager.Factory.create()
        
//set the login button with permissions to read and add to a list all user data 

        binding.loginButton.setReadPermissions(listOf("email","public_profile","user_gender","user_birthday"))
        
//A callback is registered when the login button is clicked.
//The callback can return an error or success message. It can also be canceled

        binding.loginButton.registerCallback(callBackManager, object : FacebookCallback<LoginResult>{
            override fun onCancel() { // this method is invoked when the request is cancelled
                Toast.makeText(this@MainActivity,
                    "Cancelled",
                    Toast.LENGTH_SHORT).show() } 

            override fun onError(error: FacebookException) {
                Toast.makeText(this@MainActivity, "$error", Toast.LENGTH_SHORT).show() }
                //Incase of an error, the above message is displayed.
            override fun onSuccess(result: LoginResult) {
                val graphRequest = GraphRequest.newMeRequest(result?.accessToken){`object` ,response ->
                getFacebookData(`object`)
                }
                val parameters = Bundle()
                parameters.putString("fields", "id,email,birthday,gender,name")
                graphRequest.parameters = parameters
                graphRequest.executeAsync()
            } })
    }
//This function gets the users' Facebook data.
//This includes the username, email, birthday, gender, and profile picture.
//As they appear on Facebook

    private fun getFacebookData(jsonObject: JSONObject?) {
        val profilePic = "https://graph.facebook.com/${jsonObject
?.getString("id")}/picture?width=500&height=500"
        Glide.with(this)
            .load(profilePic)
            .into(binding.profilePic)

        val name = jsonObject?.getString("name")
        val birthday = jsonObject?.getString("birthday")
        val gender = jsonObject?.getString("gender")
        val email = jsonObject?.getString("email")

        binding.userName.text = "Name: ${name}"
        binding.userEmail.text = "Email: ${email}"
        binding.userBDay.text = "Birthday: ${birthday}"
        binding.userGender.text = "Gender: ${gender}"
}
     override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        callBackManager.onActivityResult(requestCode, resultCode, data) }
}

当你运行上述应用程序时，你应该能够访问Facebook认证。

总结

在本教程中，我们已经讨论了Facebook认证的一些基本方面。因此，你可以利用这些知识来制作其他漂亮的应用程序。