--- title: Step 4. Customizing the user experience description: PingOne Android component: orchsdks page_id: orchsdks:davinci:use-cases/external-idp/android/04_customize_the_user_experience canonical_url: https://developer.pingidentity.com/orchsdks/davinci/use-cases/external-idp/android/04_customize_the_user_experience.html keywords: ["DaVinci", "Flows", "Tutorial", "Source Code", "Integration", "SDK", "Android"] section_ids: tabs: Customizing browser tabs in the redirect experience native-on-dv: Embedding IdP libraries for a native experience android-facebook-sdk: Implementing the Facebook native sign-in SDK facebook-android-dependencies: Step 1. Add Facebook SDK for Android dependencies facebook-key-hashes: Step 2. Update your Facebook App ID with Android certificate fingerprints update_app_for_facebook: Step 3. Update your Android app with Facebook App ID details android-google-sdk: Implementing the Sign in with Google native SDK google-android-dependencies: Step 1. Add Sign in with Google dependencies android-specific-google-creds: Step 2. Create Android-specific client credentials in Google --- # Step 4. Customizing the user experience [icon: circle-check, set=far]PingOne [icon: android, set=fab]Android You can alter the following aspects of the social sign-on user experience: * [Customizing browser tabs in the redirect experience](#tabs) * [Embedding IdP libraries for a native experience](#native-on-dv) ## Customizing browser tabs in the redirect experience When using the browser-based redirect user experience in your apps, the **External IdP** module uses one of the following implementations: * Auth tabs Auth Tabs provide enhanced security features for OAuth 2.0 flows and are automatically used when supported by the device and when the redirect URI uses a custom scheme. Learn more in [Simplify authentication using Auth Tab](https://developer.chrome.com/docs/android/custom-tabs/guide-auth-tab) in the *Chrome for Developers* documentation. You can customize the auth tab as follows: Customizing auth tabs on Android ```kotlin BrowserLauncher.authTabCustomizer = { setColorScheme(CustomTabsIntent.COLOR_SCHEME_DARK) // Add other AuthTabsIntent configurations as needed } ``` | | | | - | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | Known issueYou might receive `BrowserCanceledException` when signing in to Facebook in an auth tab if the Facebook app is also installed.Learn more in [Limitations](../../../../release-notes/limitations.html#SDKS-4741). | * Custom tabs The **External IdP** module falls back to using custom tabs if auth tabs are not supported on the device. You can customize the appearance and behavior of custom tabs by using a trailing lambda as follows: Customizing custom tabs on Android ```kotlin BrowserLauncher.customTabsCustomizer = { setShowTitle(false) setColorScheme(CustomTabsIntent.COLOR_SCHEME_SYSTEM) // Use the system default color scheme setToolbarColor( ContextCompat.getColor( context, R.color.colorPrimary ) ) // Set a specific toolbar color setUrlBarHidingEnabled(true) // Add other CustomTabsIntent configurations as needed } ``` Learn more in [Customizing the UI](https://developer.chrome.com/docs/android/custom-tabs/guide-ui-customization) in the *Chrome for Developers* documentation. ## Embedding IdP libraries for a native experience Optionally, you can use an IdP's native SDK libraries to handle social sign-on directly rather than redirecting the user in a web browser. This can provide a smoother, more integrated experience for your users than the redirect method. To support a native experience you add the native libraries as dependencies in your Android application. If an IdP's native SDK libraries are not included in your app then the **External IdP** module falls back to use a browser redirect for social sign-on. The **External IdP** module for Android supports implementing the following native libraries: [icon: facebook, set=fab, size=3x] #### [Facebook](#android-facebook-sdk) Implementing the Apple native libraries for Android [icon: google, set=fab, size=3x] #### [Google](#android-google-sdk) Implementing the Google native libraries for Android ### Implementing the Facebook native sign-in SDK To use Facebook's native SDK in your Android app, you must complete the following tasks: * [Step 1. Add Facebook SDK for Android dependencies](#facebook-android-dependencies) * [Step 2. Update your Facebook App ID with Android certificate fingerprints](#facebook-key-hashes) * [Step 3. Update your Android app with Facebook App ID details](#update_app_for_facebook) #### Step 1. Add Facebook SDK for Android dependencies 1. In addition to the **External IdP** module dependencies, add Facebook's SDK library to the `dependencies` section of your `build.gradle.kts` file: ```gradle // Facebook native sign-on SDK for Android implementation("com.facebook.android:facebook-login:18.1.3") ``` #### Step 2. Update your Facebook App ID with Android certificate fingerprints You need to associate your Android app with your Facebook App ID. You can update your existing Facebook App ID in the Meta Developer console by adding the certificate fingerprints of your signing certificates. 1. In the [Meta for Developers](https://developers.facebook.com/apps/) console, select your app, and then navigate to **App Settings** > **Basic**. 2. In the **Android** section, in the **certificate fingerprints** field, enter the 28-character hash of your project's signing certificates. You should add both your debug and production key hashes. | | | | - | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | If you self-sign your app, use the following command in a terminal window in the root of your Android project to generate the hash:```shell keytool -exportcert -alias key-alias -keystore path-to-debug-or-production-keystore | openssl sha1 -binary | openssl base64 ``` | The result will resemble the following: ![Adding signing certificate hashes to a Facebook App ID.](../../../_images/android-facebook-app-key-hash-en.png) Learn more in [Create a Development Key Hash](https://developers.facebook.com/docs/android/getting-started/#create_hash) and [Create a Release Key Hash](https://developers.facebook.com/docs/android/getting-started/#release-key-hash) in the Facebook SDK for Android documentation. #### Step 3. Update your Android app with Facebook App ID details 1. In Android Studio, open your `/app/src/main/AndroidManifest.xml` file, and add the following within the `` element: ```xml ``` Replace the placeholders with values from the application you created in the [Meta Developer site](https://developers.facebook.com/). * *{{app\_id}}* Click the **App ID** label in the header bar of the Meta Developer site for your app to copy the value. Add your application ID to both the `facebook_app_id` and `fb_login_protocol_scheme` properties. * *{{client\_token}}* In the Meta Developer site for your app, navigate to **App Settings** > **Advanced** > **Security**, and copy the **Client token** value. | | | | - | ------------------------------------------------------------------------------------------------------ | | | Do not use the **App secret** value found in **App settings** > **Basic** in your client applications. | * *{{redirect\_uri}}* Click the **App ID** label in the header bar of the Meta Developer site for your app to copy the value. Prefix the value with the string `fb` to create the custom URI Facebook uses to redirect users to your Android app. For example, `fb1085352047332439` The result resembles the following: ```xml ... ... ``` Learn more in [Facebook Login for Android - Quickstart](https://developers.facebook.com/docs/facebook-login/android) in the Meta Developers documentation. ### Implementing the Sign in with Google native SDK To use the Sign in with Google native SDK in your Android app, complete the following tasks: * [Step 1. Add Sign in with Google dependencies](#google-android-dependencies) * [Step 2. Create Android-specific client credentials in Google](#android-specific-google-creds) #### Step 1. Add Sign in with Google dependencies 1. In addition to the core Orchestration SDK for Android dependencies, add Google's SDK libraries to the `dependencies` section of your `build.gradle.kts` file: ```gradle // Google native sign-on SDK for Android implementation("com.google.android.libraries.identity.googleid:googleid:1.1.1") // Needed by Android 13 and earlier implementation("androidx.credentials:credentials-play-services-auth:1.5.0") ``` | | | | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | | If your application will only support Android 14 and later you can remove the `credentials-play-services-auth` dependency.Only apps running on Android 13 and earlier require that dependency to support social sign-on. | #### Step 2. Create Android-specific client credentials in Google You Android app needs to be able to communicate directly with Google to authenticate users with its SDK. To enable this communication you must create Android-specific credentials in the Google API Dashboard. Using the Google SDK in your Android apps creates an embedded user experience, and you do not have to configure additional redirects back to your app. Instead, associate your app with the Android-specific credentials you create by adding your Android app's certificate fingerprints: 1. In a browser, navigate to the [Google API Dashboard](https://console.cloud.google.com/apis/dashboard). 2. In the left navigation, click **Credentials**. 3. Click **CREATE CREDENTIALS**, and from the drop-down list, select `OAuth client ID`. 4. In the **Application Type** drop-down list, select `Android`. 5. In the **Name** field, enter a name for your app. 6. In the **Package name** field, enter the package name of your app. For example, `com.pingidentity.samples.app`. 7. In the **SHA-1 certificate fingerprint** field, enter the SHA-1 fingerprint of your project's signing certificate. | | | | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | If you self-sign your app, use the following command in a terminal window to get the fingerprint:```shell keytool -keystore path-to-debug-or-production-keystore -list -v ```Learn more in [Authenticating Your Client ](https://developers.google.com/android/guides/client-auth)in the Google Play Store documentation. | The result will resemble the following: ![Configuring a client ID for Android apps in Google Cloud](../../../_images/GoogleCloudConsole-android-client-id.png)Figure 1. Configuring a client ID for Android apps in Google Cloud 8. Click **Create**. | | | | - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | You do not need to configure your Android app or the PingOne server with the details of this client ID.The certificate fingerprint associates your app with the client ID. |