3rd Party Setup

Web Push Notification​ #

• Create your own Firebase Web app from https://console.firebase.google.com with your own web domain/any name.
• Generate key pair from under Project Setting->Web configuration.
• Select The Web App from Project Setting->General->Web apps, and you will find the SDK setup and configuration section
• Select Config and copy the Firebase configuration object
• Go to <project>/web/index.html and set firebaseConfig with the Firebase configuration object value.

/web/index.html

var firebaseConfig = {
    apiKey: "AIzaSyB4NEjiBYcHAbtz2Hy4dc8L7xyngnQQrG4",
    authDomain: "efood-web-test.firebaseapp.com",
    projectId: "efood-web-test",
    storageBucket: "efood-web-test.appspot.com",
    messagingSenderId: "536310321033",
    appId: "1:536310321031:web:a4de7b7eae799c9c0d22",
    measurementId: "536310321034",
};

• Also go to <project>/lib/main.dart and change FirebaseOptions argument value with the Firebase configuration object value.

/lib/main.dart

await Firebase.initializeApp(options: FirebaseOptions(
    apiKey: "AIzaSyB4NEjiBYcHAbtz2Hy4dc8L7xyngnQQrG4",
    authDomain: "efood-web-test.firebaseapp.com",
    projectId: "efood-web-test",
    storageBucket: "efood-web-test.appspot.com",
    messagingSenderId: "536310321033",
    appId: "1:536310321031:web:a4de7b7eae799c9c0d22",
    measurementId: "536310321034",
));

Web Push Notification Sound Customization​ #

If you want to change the default notification sound of the web then go to <project>/assets/notification.wav and rand replace notification.wav with your own notification.wav

Facebook Login​ #

• If you want Facebook login in your project then create your own app form https://developers.facebook.com/apps
• Configure your app form Settings->Basic with your own Display name, Contact email, Privacy Policy URL, Terms of Service URL, App icon
• Add your platform (web/android/ios) with click Add platform and configure your app.
• Add Facebook Login form products section.
• To Configuration setting in App->Facebook Login->Settings->Client OAuth settings enable Client OAuth login, Web OAuth login, Enforce HTTPS, Use Strict Mode for redirect URIs, Login with the JavaScript SDK.
• Also, you need to add yor Allowed Domains for the JavaScript SDK (ex- https://efood-web.6amtech.com)
• To get profile information you need to request access in App Review->Permissions and features get access for public_profile
• Now open your flutter project and go to <project>/lib/main.dart and replace it with your Facebook appID
• For Android go to <project>/android/app/src/main/res/values/string.xml and set value.

/android/app/src/main/res/values/

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">eFood</string>
   <string name="facebook_app_id">YOUR_APP_ID</string>
   <string name="fb_login_protocol_scheme">fb_YOUR_APP_ID</string>
   <string name="facebook_client_token">Go_to_your_fb_app->Settings->Advance->Security->Client token</string>
</resources>

• For ios go to ios/Runner/Info.plist and set value

ios/Runner/Info.plist

<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fb_your_app_id</string>
        </array>
    </dict>
<array>

<key>FacebookAppID</key>
<string>app_id</string>
<key>FacebookClientToken</key>
<string>
    Go_to_your_fb_app->Settings->Advance->Security->Client  token
</string>
<key>FacebookDisplayName</key>
<string>name</string>

• For web go to <project>/lib/main.dart set your appID.

/lib/main.dart

await FacebookAuth.instance.webAndDesktopInitialize(
    appId: "YOUR_FB_APP_ID",
    cookie: true,
    xfbml: true,
    version: "v13.0",
);

Google Login​ #

• If you want to enable your Google login then go to https://console.firebase.google.com and open your Project->Authentication->Sign-in method-> Add new Provider->Additional providers then select Google and enable, finlay Save.
• For Android, you need to set fingerprint in Project->Project settings-> Android apps-> add fingerprint then enter your SHA1 and SHA256 and Save.
• After published on Playscape you need to add your SHA1 and SHA256 form App integrity.
• To find App integrity App signing, go to Google Play Console Project-> Release-> Setup-> App integrity-> App signing
• Download your Google service and Copy that file and paste it under <project>/android/app/ the folder.
• Go to https://console.cloud.google.com and select your Firebase project, you can find your Client ID in, APIs & Services-> Credentials -> OAuth 2.0 Client IDs then select Web Client and finally copy the Client ID.
• For ios go to <project>/ios/Runner/Info.plist and add your Client ID

/ios/Runner/Info.plist

<dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
        <string>YOUR_CLIENT_ID</string>
    </array>
</dict>

• For web go to <project>/web/index.html and set your CLIENT_ID

/web/index.html

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">

Apple Login​ #

To configure the Apple Login Sign-up follow the steps mentioned below –

Step 1: Find out Team ID​ #

• Visit the Apple Developer page.
  Go to Account and find out Membership details section. There you will find TeamID.

Step 2: Create or Use App ID​ #

• Go to the Identifiers list here.
• Click the Plus icon beside Identifiers, and then select App IDs and continue
• Select type App and continue.
• Provide a brief description and a Bundle ID (the same one used for your app). This identifier will serve as the Client ID for Apple Sign-In.
• In Capabilities, select the required options like Push Notifications, Sign In with Apple, and Associated Domains (if you want the QR-Scan feature).
• Click Continue and proceed.

Step 3: Create Service ID​ #

• Go again to the Identifiers list here.
• Click the Plus icon beside Identifiers, and then select Service IDs and continue
• Add a description and an identifier for your service, then click Continue
• Download the file labeled as AuthKey_example.p8. This is the Service File, and the segment “example” within the file name is indicative of the KeyID. To illustrate, if your file is titled AuthKey_XXXXXXXXXX.p8, then XXXXXXXXXX signifies the KeyID.

Step 4: Submit Data in the Admin Panel​ #

• Go to the Admin panel.
• Navigate to 3rd Party > Social Login > Apple Login setup your data.
• Use the following information:
  • Client ID: The Bundle ID you previously specified.
  • Team ID: Obtained from the Apple Developer page.
  • Key ID: KeyID from the AuthKey_example.p8 file name.
  • Service File: Downloaded AuthKey_example.p8 file.
• Save and enable Apple Login status.

By following these steps, you can successfully set up and implement Apple Sign-In in your Project.

QR Code Setup​ #

Android Setup:

1. Modify assetlinks.json:

• Go to the web/.well-known/assetlinks.json file.
• Update the "package_name" value with your Flutter app’s package name:

"package_name": "YOUR_PACKAGE_NAME_HERE"

2. Generate and Add SHA-256 Fingerprint:

• Follow the instructions in this guide to generate your SHA-256 certificate fingerprint.
• After deploying your app to the Play Store, add the SHA-256 certificate fingerprint key in the Play Console under Setup -> App signing.

3. Update AndroidManifest.xml:

• Open android/app/src/main/AndroidManifest.xml.
• Replace "YOUR_DOMAIN_WITHOUT_HTTPS" with your domain (without “http://” or “https://”) in the <intent-filter> section:

<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="YOUR_DOMAIN_WITHOUT_HTTPS" android:scheme="http"/>
<data android:host="YOUR_DOMAIN_WITHOUT_HTTPS" android:scheme="https"/>
</intent-filter>

iOS Setup​ #

1. Update Runner.entitlements:

• Go to ios/Runner/Runner.entitlements.
• Replace "YOUR_DOMAIN_HERE_WITHOUT_HTTP" with your domain (without “http://” or “https://”). For example: efood-web.6amtech.com.

2. Edit apple-app-site-association:

• Go to web/.well-known/apple-app-site-association.

• Add your team ID and bundle ID. For example:

"applinks": {
  "apps": [],
  "details": [
    {
      "appID": "S8QB4VV633.com.example.deeplink",
      "paths": [ "*" ]
    }
  ]
}

Android Setup​ #

• Go to Admin Panel > Business Setup > QR Code
• Add your own data
• You need to enter you YOUR_DOMAIN in the Website Link field & submit

Firebase OTP Configuration​ #

For configuring OTP in the Firebase, you must create a Firebase project first. If you haven’t created any project for your application yet, please follow the instructions given here.

Now go the Firebase console and follow the instructions below-

Adding sign-in method​ #

1. Go to your Firebase project.
2. Navigate to the Build menu from the left sidebar and select Authentication.
3. Get started on the project and go to the Sign-in method tab.
4. From the Sign-in Providers section, select the Phone option.
5. Ensure to enable the method Phone and press save

Admin Panel Configuration​ #

To configure the Admin panel for Firebase OTP verification, follow these steps:

1. Go to your Firebase project.
2. In the Project settings, locate your Web API Key and make a copy of it.
3. Go to the Admin panel.
4. Navigate to the 3rd Party section.
5. Select 3rd Party Configuration.
6. Choose Firebase OTP Verification.
7. Paste the Web API Key copied from your Firebase project.
8. Turn on the Firebase OTP Verification Status.
9. Turn on the Phone Verification option under Business Setup.

Web Configuration​ #

To configure your web domain for Firebase OTP verification:

1. Go to your Firebase project.
2. Navigate to the Build menu from the left sidebar and select Authentication.
3. Go to the Settings tab.
4. Under the Authorized Domains section, add your web domain without specifying “http” or “https.” (for example: example.com).

App Configuration​ #

To configure the app, follow the steps below-

1. Go to the Project settings > General > Your apps.
2. Download google-services.json file for android and GoogleService-Info.plist for IOS app.
3. Copy that file and paste it under <project>/android/app/ folder for android and under <project>/iOS/ for IOS.