Skip to main content

3rd Party Setup

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://stackfood-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 go to <project>/lib/main.dart and replace 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">StackFood</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",
    );
tip

Recommended tutorial is below 👇

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 found 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/ 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">
tip

Recommended tutorial is below 👇

Apple Login​

To configure 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​

info

If you already have an App ID that you want to use for Apple Sign-In, you can skip creating a new one and proceed to the next step.

  • Go to the Identifiers list here.
  • Click the Plus icon besides 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 QR-Scan feature).
  • Click Continue and proceed.

Step 3: Create Service ID​

  • Go again to the Identifiers list here.
  • Click the Plus icon besides 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 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.

tip

Recommended tutorial is below 👇