ফ্লাটার অ্যাপে ফেসবুক অথেনটিকেশন

ফেসবুক ব্যবহার করে অ্যাপে লগিন ফিচার যোগ করার জন্য flutter_facebook_auth ব্যবহার করতে পারি। এর জন্য প্রথমে ফেসবুক ডেভেলপার কনসোল থেকে একটা অ্যাপ তৈরি করে নিতে হবে। Create App বাটনে ক্লিক করলে অ্যাপের তথ্য দিতে পারব।

এর পরের স্টেপে এই অ্যাপের ইউজকেস সিলেক্ট করতে হবে।

আমরা যেহেতু ফেসবুক লগিন ব্যবহার করব, তাই Authenticate and request data from user with Facebook Login সিলেক্ট করে নেক্সট প্রেস করব।

পরের স্টেপে বিজনেস প্রোফাইল সিলেক্ট করতে হবে।

বিসজনেস প্রোফাইল ছাড়া অ্যাপ পাবলিশ করা যাবে না। আর পাবলিশ না করতে পারলে নিজে এবং টেস্ট ইউজার ছাড়া আর কেউ এই অ্যাপ ব্যবহার করতে পারবে না। টেস্টিং এর জন্য I don’t want to connect a business protfolio yet সিলেক্ট করতে পারেন। এরপর নেস্ট এ ক্লিক করুন। রিকোয়ারমেন্ট গুলো দেখাবে। নেক্সট এ প্রেস করার পর অ্যাপের ওভারভিউ দেখাবে। এখান থেকে Go to dashboard এ ক্লিক করলে অ্যাপ তৈরি হয়ে যাবে।

আমরা প্রথমে দেখি কিভাবে iOS এ অথেনটিকেট করা যায়। এটা সহজ। তাই দেখাচ্ছি। এর জন্য নিচের দিকে বাম কোনায় App Settings দেখতে পাবেন। এখান থেকে Basic এ ক্লিক করুন।

এরপর Add platfrom এ ক্লিক করুন।

তারপর iOS সিলেক্ট করুন। আমাদের শুধু মাত্র Bundle ID সেট করতে হবে এখন। প্রজেক্টের বান্ডেল আইডি এখানে সেট করে সেভ করুন।

ফ্লাটার অ্যাপ তৈরি

এবার একটা ফ্লাটার অ্যাপ তৈরি করুন। এরপর flutter_facebook_auth ডিপেন্ডেন্সি যোগ করে নিন। main.dart এ নিচের মত করে কোড লিখতে পারিঃ

import 'package:flutter/material.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Facebook Sign-In Demo',
      home: FacebookLoginDemo(),
    );
  }
}

class FacebookLoginDemo extends StatefulWidget {
  const FacebookLoginDemo({super.key});

  @override
  State<FacebookLoginDemo> createState() => _FacebookLoginDemoState();
}

class _FacebookLoginDemoState extends State<FacebookLoginDemo> {
  Map<String, dynamic>? _userData;
  AccessToken? _accessToken;

  Future<void> _login() async {
    final LoginResult result = await FacebookAuth.instance.login(
      permissions: ['email', 'public_profile'],
    );

    if (result.status == LoginStatus.success) {
      _accessToken = result.accessToken;
      final userData = await FacebookAuth.instance.getUserData();
      setState(() {
        _userData = userData;
      });
    } else {
      print(result.status);
      print(result.message);
    }
  }

  Future<void> _logout() async {
    await FacebookAuth.instance.logOut();
    setState(() {
      _userData = null;
      _accessToken = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Facebook Login')),
      body: Center(
        child: _userData != null
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(_userData!['picture']['data']['url']),
                    radius: 40,
                  ),
                  Text("Name: ${_userData!['name']}"),
                  Text("Email: ${_userData!['email']}"),
                  ElevatedButton(onPressed: _logout, child: const Text('Logout')),
                ],
              )
            : ElevatedButton(
                onPressed: _login,
                child: const Text('Login with Facebook'),
              ),
      ),
    );
  }
}

এবার ios > Runnder > Info.plist ফাইল ওপেন করুন। ঐখানে <dict>…</dict> ট্যাগের এর ভেতর নিচের তথ্য গুলো যোগ করতে হবেঃ

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

যেমনঃ

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb85620836</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>85620836</string>
<key>FacebookClientToken</key>
<string>72647d2f4637eacb3a625a2467d3e</string>
<key>FacebookDisplayName</key>
<string>Auth Demo</string>

 <key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
</array>

অ্যাপের ড্যাশবোর্ড থেকে FacebookAppID আইডি পাবেন। FacebookAppID এবং CFBundleURLSchemes প্রায় একই। শুধু শুরুতে fb যোগ করে দিলেই হবে। FacebookClientToken টোকেন পাবেন  Settings > Advanced > Client Token থেকে। সেটআপ হয়ে গেলো। এবার অ্যাপ রান করলে ফেসবুক ব্যবহার করে লগিন করতে পারবেন।

অফিশিয়াল গাইড পাবেন বামপাশের Use case এ ক্লিক করে ফেসবুক লগিন কাস্টোমাইজ বাটনে ক্লিক করার পর বামপাশে কুইক স্টার্ট বাটন পাবেন। সেখানে গাইডলাইন পাওয়া যাবে।

অ্যান্ড্রয়েড সেটআপ

অ্যান্ড্রয়েড সেটআপ একটু কমপ্লিকেটেড।

AndroidManifest.xml এ Facebook SDK কনফিগার করব প্রথমে। android/app/src/main/AndroidManifest.xml এর <application> ট্যাগের ভিতরে, নিচের কোডগুলো যোগ করব:

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

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

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

strings.xml ফাইলে Facebook App এর ইনফরমেশন গুলো যোগ করতে হবে। android/app/src/main/res/values/strings.xml লোকেশনে ফাইল না থাকলে একটা তৈরি করে নিব। এরপর অ্যাপের নাম, আইডি এবং ক্লায়েন্ট টোকেন যোগ করব। এমনঃ

<resources>
    <string name="app_name">Fb Login</string>
    <string name="facebook_app_id">85638d0836</string>
    <string name="facebook_client_token">72647b9a12fasdfgadfa625a2467d3e</string>
    <string name="fb_login_protocol_scheme">fb85638d0836</string>
</resources>

অ্যাপের ড্যাশবোর্ড থেকে facebook_app_id আইডি পাবেন। facebook_app_id এবং fb_login_protocol_scheme প্রায় একই। শুধু শুরুতে fb যোগ করে দিলেই হবে। facebook_client_token টোকেন পাবেন  Settings > Advanced > Client Token থেকে।

Android Key Hash তৈরি করা

ফেসবুক অ্যাপ অ্যাড্রয়েডের জন্য কনফিগার করতে হলে অ্যাপের কী এর হ্যাস লাগবে। তার জন্য রিলিজ অথবা ডিবাগ কি ব্যবহার করতে পারি। ডিভাগ কী ব্যবহার করে হ্যাস কী তৈরিঃ

ম্যাক বা লিনাক্সে কমান্ড:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

পরের লাইনে পাসওয়ার্ড চাইবে, পাসওয়ার্ড হচ্ছে android

যা আমাদের নিচের মত একটা হ্যাস কি দিবেঃ

vZ0Yzab3y7V9yE/Z1J3xE9x9u9E=

Facebook Developer Console-এ Android Platform যোগ করা

  1. https://developers.facebook.com/apps/ এ গিয়ে অ্যাপ সিলেক্ট করুন।
  2. Settings → Basic এ গিয়ে নিচের দিক থেকে Add platfrom এ ক্লিক করুন এবং এন্ড্রয়েড সিলেক্ট করুন।
  3. এরপর নিচের মত করে তথ্য গুলো দিতে হবে।
    • Package Name: অ্যাপের প্যাকেজ নাম (যেমন com.example.fb_login)
    • Class Name: com.facebook.FacebookActivity
    • Key Hashes: উপরে পাওয়া হ্যাশ কোড
  4. Save Changes ক্লিক করে সেভ করব।

এবার অ্যাপ অ্যান্ড্রয়েডে রান করে দেখতে পারব এবং ফেসবুক ব্যবহার করে লগিন করতে পারব।

Leave a Comment