Flutter

This guide helps you to integrate the Passbase SDK into your Flutter project

General

To integrate the Passbase Package you first need to sign up on our developer dashboard. Integration of the Passbase Flutter Package follows a few simple steps:

  1. Install the package in your project

  2. Initialization of the package with your API key

  3. Start a new verification process

  4. Handling verifications

We suggest you follow our best practice how to integrate Passbase in your wider system in the overview section.

1. Install the Package

At the root level of your project, open pubspec.yaml file and add the following line under dependencies section:

passbase_flutter: ^2.0.5

After that press Packages get Tested with Flutter version 1.17.5

iOS Specific Steps

Please follow these steps to complete the installation and integrate the SDK in the iOS project.

Adding Sources to Podfile

Navigate inside your iOS project folder and add the following three lines at top of the Podfile. You need to do this step to tell the Cocoapods where the Passbase iOS SDK is (our iOS SDK is a closed source project). If you forget this step, Cocoapods won't find our SDK.

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoomauthentication-cocoapods-specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'
source 'https://github.com/passbase/microblink-cocoapods-specs.git'

The minimum iOS version is 11.0. Make sure to include this in the Podfile. Also, please include use_frameworks! Otherwise, Sentry specific problems may occur. Don't forget to add the following two lines:

  1. platform :ios, '11.0'

  2. use_frameworks!

Then, navigate inside the terminal into your project folder (cd ios) and run the following command to install the Passbase iOS SDK as a dependency:

pod install

pod install can take longer (up to 20 minutes) depending upon the speed of you internet. You can monitor the network activity in the activity monitor.

Example of a complete Podfile

# Example of a Podfile
# 1. Add this here
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/zoomauthentication-cocoapods-specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'
source 'https://github.com/passbase/microblink-cocoapods-specs.git'
โ€‹
# 2. Add the platform requirement to at least iOS 11
platform :ios, '11.0'
โ€‹
# Flutter related code
# ...
โ€‹
target 'Runner' do
# 3. Add use_frameworks! because of Sentry pod
use_frameworks!
# Flutter related code
# ...
end

Adding Camera Permissions in Info.plist

If you made it here, you successfully installed the Passbase SDK for iOS. Now let's adjust your last settings and start your first verification.

You need to adjust your iOS projects settings now. Open the workspace file inside your ios folder. It should have the name Runner.xcworkspace. Then open in the left project navigator the the your app's Info.plistfile. Here we have to adjust the App's permission so that we can access your users' camera, to run a verification. You can do it in the property list view or by code:

Right click somewhere outside the table and select Add Row. Now just type Privacy and add a Camera Usage Description + explain why you need to access the camera. Repeat the same step for Photo Library.

If you are more comfortable with code, right click on Info.plist and select Open As -> Source Code. Add the lines below somewhere inside the <dict> </dict>

<!-- permission strings to be include in info.plist -->
<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera, to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>

Allow using embedded views

To use PassbaseButton on iOS, you need to opt-in for the preview of the embedded view by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.

You have successfully finished setting up the Passbase iOS SDK! ๐ŸŽ‰

Android Specific Steps

After installing the Passbase Flutter package, please complete the following steps to set up the Android environment correctly:

Adding Kotlin, Maven and minSdkVersion

Note: Make sure your Android Studio also supports Kotlin. As of this writing, Android Studio Version 3.5.1 has Kotlin support. If you're using an older version, you can install Kotlin support under Android Studio โ†’ Preferencesโ€ฆ โ†’ Plugins โ†’ Browse Repository โ†’ Type โ€œKotlinโ€ in search box โ†’ Install

Kotlin support is required in the main Android project. Please add the following lines to your project'sandroid/build.gradle file:

  1. Set kotlin_version to "1.3.21" or higher

  2. Add the line classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")to dependencies

Code Example

// In the different lines to your projcet's build.gradle file
buildscript {
ext.kotlin_version = '1.3.21' // 2. Add kotlin_version
dependencies {
...
// 3. Add classpath
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}

Set minSdkVersion to 21 or higher in android/app/build.gradle file:

android {
...
defaultConfig {
...
// Change minSdkVersion
minSdkVersion 21
...
}
...
}

Sync the gradle & run. You've successfully installed the Passbase SDK for Android! ๐ŸŽ‰

2. Initialize the SDK

Passbase uses API keys to allow access to the SDK and routes it back to your dashboard. You need to register on our website using your publishable API key from your developer dashboard's API settings. If you don't have a developer account yet, you can create one here: developer dashboard.โ€‹

First, add the following import statement to the top of the main.dart file:

import 'package:passbase_flutter/passbase_flutter.dart';

Please use the publishable API key for all integrations. The secret key should never be exposed or used in a web integration or mobile app since it can access sensitive user data if leaked!

Then, initialize the SDK with your own API key. In the implementation in the code snippet below, you need to replace YOUR_PUBLISHABLE_API_KEY with your own API key from your developer dashboard.

PassbaseSDK.initialize(publishableApiKey: "YOUR_PUBLISHABLE_API_KEY");
PassbaseSDK.prefillUserEmail = "testuser@yourproject.com"; //optional

You have successfully initialized the Passbase SDK! ๐ŸŽ‰

3. Start Verification

Please make sure, you've initialized the SDK before starting a new verification. Otherwise, you can't start the verification.

Keep in mind that in order to successfully finish a verification, you need to pass our liveness detection. Hence, if you develop on a Simulator (e.g. iPhone Simulator via Xcode), you will be able to test UI only. SDK does not send data to our backend on a Simulator. Therefore please use a real device (e.g. an attached iPhone) to fully test and develop with our SDK.

Use PassbaseButtonPassbaseButton component provided by the SDK

import 'package:passbase_flutter/passbase_flutter.dart';
โ€‹
...
PassbaseButton(
onFinish: (identityAccessKey) {
// do stuff in case of success
},
onError: (errorCode) {
// do stuff in case of cancel
},
onStart: () {
// do stuff in case of start
},
),
...

This will render the Passbase Button on UI and will automatically start verification on its press.

You have successfully started your first verification! ๐ŸŽ‰

4. Handling Verifications

In some cases it's useful to know if a users completes the verification or cancels it. For this, we can implement following delegate/callback methods:

Method

Description

onStart

This callback method activates once a user starts the verification flow.

onFinish

This callback method activates once a user completes the full verification flow. You receive an object called identityAccessKey which can be used to access the identity. Please see our section about Webhooks and API for more information.

onError

This callback method activates when a user cancels the verification flow or verification finish with an error. You can use this to find out if people who drop out of your verification flow.

Error codes:

CANCELLED_BY_USER REAUTHENTICATION_FAILED

import 'package:passbase_flutter/passbase_flutter.dart';
โ€‹
...
PassbaseButton(
onFinish: (identityAccessKey) {
// do stuff in case of success
},
onError: (errorCode) {
// do stuff in case of cancel
},
onStart: () {
// do stuff in case of start
},
),
...

We recommend the following process for handling identity verifications:

  1. Obtain the identityAccessKey of a successful identity verifications from the call back and save them to e.g. a user profile

  2. Set up webhooks to be notified once the identity verification has been processed by our system. Also once you have approved or rejected the user in our dashboard

  3. Now you can use your own backend to query the details about this identity verification with e.g. the authentication by key call to obtain the details

5. UI Customizations

No code solution allows you to change font and colors online without rebuilding your app.

6. ProGuard (Android)

If you are using ProGuard you might need to add the following options:

-dontwarn okio.**
-dontwarn retrofit2.Platform$Java8
-dontwarn com.facetec.zoom.sdk.**

to ProGuard exceptions

buildTypes {
release {
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}

Example & Demo App

You can find a code example of a whole class in the code section below. Also we have a full example integration app hosted on our Github Page.

โ€‹โ€‹Flutter Demo Appโ€‹

import 'package:flutter/material.dart';
import 'package:passbase_flutter/passbase_flutter.dart';
void main() => runApp(PassbaseFlutterDemoApp());
class PassbaseFlutterDemoApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PassbaseDemoHomePage(),
);
}
}
class PassbaseDemoHomePage extends StatefulWidget {
PassbaseDemoHomePage({Key key}) : super(key: key);
_PassbaseDemoHomePageState createState() {
PassbaseSDK.initialize(apiKey: "YOUR_PUBLISHABLE_API_KEY");
PassbaseSDK.prefillUserEmail = "testuser@yourproject.com"; //optional
return _PassbaseDemoHomePageState();
}
}
class _PassbaseDemoHomePageState extends State<PassbaseDemoHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
PassbaseButton(
onFinish: (identityAccessKey) {
// do stuff in case of success
print(identityAccessKey);
},
onError: (errorCode) {
// do stuff in case of cancel
print(errorCode);
},
onStart: () {
// do stuff in case of start
print("start");
},
width: 300,
height: 70,
),
],
),
),
);
}
}

You have completed the integration for Flutter! ๐ŸŽ‰

Troubleshooting

App is crashing when verification is started

If you experience a crash on Android when verification is started you can try to add this to your android/build.gradle file:

subprojects {
project.configurations.all {
resolutionStrategy.eachDependency { details ->
if (details.requested.group == 'androidx.core' &&
!details.requested.name.contains('androidx')) {
details.useVersion "1.1.0"
}
}
}
}

Camera is not starting in release build on android

If you experience that camera is not starting in release build make sure you set enableProguardInReleaseBuilds in build.gradle to false. Or add exeptions as described in ProGuard section above.