Using Facebook SDK native framework for iOS and Android for Social Login and more (Part 1)
January 23, 2017 Allen Drennan
January 23, 2017 Allen Drennan
[SHOWTOGROUPS=4,20]
In this article we will demonstrate how to embed the iOS framework SDK for Facebook so you can present a more professional social login feature for users of your app.
We will also show how to perform various Facebook SDK requests transparently for the user from your client app using the Facebook SDK framework instead of making direct GraphPath http requests. Additionally, we will also be covering how to best use the Facebook APIs from your backend Delphi service.
Part 1 focuses on Facebook/iOS, Part 2 focuses Facebook/Android, Part 3 focuses on Twitter/iOS and Part 4 focuses on Twitter/Android.
Introduction
If you are building mobile apps today and those apps are interacting with a backend then you must consider using social login to streamline the experience for users. People who install your app are going to leery of providing personal information or new authentication credentials to an app they do not trust and often look for a social login option that is consistent with other apps they have used.
Facebook offers an embedded framework that you can include into your Delphi mobile application so that you can present a native Facebook interface for social login to obtain a user’s access token or their email address transparently.
Currently most Facebook API examples for Delphi involve obtaining an access token by launching a web browser such as Safari on iOS for OAuth. While this works, it is not ideal because users launch the web browser while your app goes into the background and when authentication is completed or fails, must return to your app. Additionally the user is presented with the same behavior on subsequent launches of your application to help verify your authenticating credentials. This is fine if necessary and as a backup method but it is hardly ideal when all you want to present a smoother experience for your user.
Once the user approves your app for Facebook login, future app launches can be completely automatic and transparent because the Facebook framework abstracts the complexities of managing the access token and approval process for us.
For more information about us, our support and services visit the Grijjy homepage or the Grijjy developers blog.
The example contained here depends upon part of our Grijjy Foundation library.
The source code and related example repository are hosted on GitHub at https://github.com/grijjy/DelphiSocialFrameworks.
Challenges with Delphi
Unfortunately, using these frameworks is not a straightforward exercise in Delphi. Most of the frameworks for iOS and SDKs for Android (both Facebook and Twitter) expect a common environment for development such as XCode (Objective C) or Android Studio (Java). This leads to some issues with the way that Delphi handles certain aspects of linking frameworks and libraries that were designed for Objective C and Android Studio.
In this article and the articles to come we will discuss methods to work around the issues on iOS first. On both iOS and Android it requires a bit of hacking to get Delphi to conform more closely to what is expected.
But in the end, it works and you can have Facebook and Twitter social login in both iOS and Android Delphi apps.
Getting Started with the Facebook SDK for iOS
To get started using the Facebook SDK framework for iOS inside your Delphi application you need to take care of a few steps.
Create a Facebook developers account
You should start by creating a Facebook developers accounts at https://developers.facebook.com
To setup a new app for Facebook so you can test and build:
1. Select the Add new app for Facebook, then provide a Display Name, then click Create App ID.
Download the Facebook SDK for iOS
You can download the Facebook SDK framework for iOS from the following location, https://developers.facebook.com/docs/ios
To extract the static libraries required, unzip the SDK and copy the framework files to your Delphi library path:
Your info.plist needs to contain some extra keys that are specific to the Facebook SDK for iOS.
Add the following keys to the info.plist.TemplateiOS.xml. Replace the string value under CFBundleURLSchemes of fb12345678901234 with lowercase fb followed by your App ID. Replace the string value under FacebookAppID with your actual App ID and replace the string value under FacebookDisplayName with your chosen Display Name for the Facebook app.
Add some common iOS frameworks to your Delphi environment
Under Tools, Options, SDK Manager you will need to add the following frameworks:
Once completed, make sure you Update Local File Cache.
Add the required application delegates callbacks to the RTL
Most of the various frameworks for iOS require that you implement application delegates. For example, the Facebook SDK requires the implementation of the following app delegates:
For example Delphi intercepts applicationDidFinishLaunchingWithOptions but does not expose the Options parameter to any application events or messages. These Options are required by the Facebook framework and many other frameworks you might need for iOS apps.
Since we can only have a single application delegate for the app when calling UIApplicationMain() we must consider making a copy of FMX.Platform.iOS and modifying our own version of it so we can respond to the delegates in the manner that the framework expects.
[/SHOWTOGROUPS]
In this article we will demonstrate how to embed the iOS framework SDK for Facebook so you can present a more professional social login feature for users of your app.
We will also show how to perform various Facebook SDK requests transparently for the user from your client app using the Facebook SDK framework instead of making direct GraphPath http requests. Additionally, we will also be covering how to best use the Facebook APIs from your backend Delphi service.
Part 1 focuses on Facebook/iOS, Part 2 focuses Facebook/Android, Part 3 focuses on Twitter/iOS and Part 4 focuses on Twitter/Android.
Introduction
If you are building mobile apps today and those apps are interacting with a backend then you must consider using social login to streamline the experience for users. People who install your app are going to leery of providing personal information or new authentication credentials to an app they do not trust and often look for a social login option that is consistent with other apps they have used.
Facebook offers an embedded framework that you can include into your Delphi mobile application so that you can present a native Facebook interface for social login to obtain a user’s access token or their email address transparently.
Currently most Facebook API examples for Delphi involve obtaining an access token by launching a web browser such as Safari on iOS for OAuth. While this works, it is not ideal because users launch the web browser while your app goes into the background and when authentication is completed or fails, must return to your app. Additionally the user is presented with the same behavior on subsequent launches of your application to help verify your authenticating credentials. This is fine if necessary and as a backup method but it is hardly ideal when all you want to present a smoother experience for your user.
Once the user approves your app for Facebook login, future app launches can be completely automatic and transparent because the Facebook framework abstracts the complexities of managing the access token and approval process for us.
For more information about us, our support and services visit the Grijjy homepage or the Grijjy developers blog.
The example contained here depends upon part of our Grijjy Foundation library.
The source code and related example repository are hosted on GitHub at https://github.com/grijjy/DelphiSocialFrameworks.
Challenges with Delphi
Unfortunately, using these frameworks is not a straightforward exercise in Delphi. Most of the frameworks for iOS and SDKs for Android (both Facebook and Twitter) expect a common environment for development such as XCode (Objective C) or Android Studio (Java). This leads to some issues with the way that Delphi handles certain aspects of linking frameworks and libraries that were designed for Objective C and Android Studio.
In this article and the articles to come we will discuss methods to work around the issues on iOS first. On both iOS and Android it requires a bit of hacking to get Delphi to conform more closely to what is expected.
But in the end, it works and you can have Facebook and Twitter social login in both iOS and Android Delphi apps.
Getting Started with the Facebook SDK for iOS
To get started using the Facebook SDK framework for iOS inside your Delphi application you need to take care of a few steps.
Create a Facebook developers account
You should start by creating a Facebook developers accounts at https://developers.facebook.com
To setup a new app for Facebook so you can test and build:
1. Select the Add new app for Facebook, then provide a Display Name, then click Create App ID.
- Once the app is created on Facebook’s dashboard, select Settings, Basic and note the Display Name and App ID. You will need these values to communicate from your Delphi app.
- On the same page, click Add Platform and choose iOS.
- Under the Bundle ID for iOS you need to provide the name of your Delphi application. This is usually the same as your Project name in Delphi (ex: LoginWithDelphi in our example). You should also enable Single Sign On in the iOS section.
- Click Save Changes.
Download the Facebook SDK for iOS
You can download the Facebook SDK framework for iOS from the following location, https://developers.facebook.com/docs/ios
To extract the static libraries required, unzip the SDK and copy the framework files to your Delphi library path:
- Copy and rename the FBSDKCoreKit.framework\FBSDKCoreKit to FBSDKCoreKit.a
- Copy and rename the FBSDKLoginKit.framework\FBSDKLoginKit to FBSDKLoginKit.a
Modify your project’s info.plist.TemplateiOS.xmlNote: Delphi will not normally link these libraries into the project so we trick Delphi into link them by creating an import to an existing OBJ_CLASS inside of the static library in the Grijjy.FBSDK.iOS.API unit.
procedure StubProc1; cdecl; external ‘FBSDKCoreKit.a’ name ‘OBJC_CLASS_$_FBSDKAccessToken’;
procedure StubProc2; cdecl; external ‘FBSDKLoginKit.a’ name ‘OBJC_CLASS_$_FBSDKLoginManager’;
Your info.plist needs to contain some extra keys that are specific to the Facebook SDK for iOS.
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <%VersionInfoPListKeys%> <%ExtraInfoPListKeys%> <--- Add your keys here </dict> </plist> |
Add the following keys to the info.plist.TemplateiOS.xml. Replace the string value under CFBundleURLSchemes of fb12345678901234 with lowercase fb followed by your App ID. Replace the string value under FacebookAppID with your actual App ID and replace the string value under FacebookDisplayName with your chosen Display Name for the Facebook app.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>fb12345678901234</string> </array> </dict> </array> <key>FacebookAppID</key> <string>12345678901234</string> <key>FacebookDisplayName</key> <string>My Display Name</string> <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key><true/> <key>NSExceptionDomains</key> <dict> <key>facebook.com</key> <dict> <key>NSIncludesSubdomains</key> <true/> <key>NSExceptionRequiresForwardSecrecy</key> <false/> </dict> <key>fbcdn.net</key> <dict> <key>NSIncludesSubdomains</key> <true/> <key>NSExceptionRequiresForwardSecrecy</key> <false/> </dict> <key>akamaihd.net</key> <dict> <key>NSIncludesSubdomains</key> <true/> <key>NSExceptionRequiresForwardSecrecy</key> <false/> </dict> </dict> </dict> <key>LSApplicationQueriesSchemes</key> <array> <string>fbapi</string> <string>fb-messenger-api</string> <string>fbauth2</string> <string>fbshareextension</string> <string>fb-messenger-platform-20150128</string> <string>fb-messenger-platform-20150218</string> <string>fb-messenger-platform-20150305</string> </array> |
Add some common iOS frameworks to your Delphi environment
Under Tools, Options, SDK Manager you will need to add the following frameworks:
- CoreData
- Social
- Accounts
Once completed, make sure you Update Local File Cache.
Add the required application delegates callbacks to the RTL
Most of the various frameworks for iOS require that you implement application delegates. For example, the Facebook SDK requires the implementation of the following app delegates:
- applicationDidFinishLaunchingWithOptions
- applicationOpenURLWithSourceAnnotation
- applicationDidBecomeActive
For example Delphi intercepts applicationDidFinishLaunchingWithOptions but does not expose the Options parameter to any application events or messages. These Options are required by the Facebook framework and many other frameworks you might need for iOS apps.
Since we can only have a single application delegate for the app when calling UIApplicationMain() we must consider making a copy of FMX.Platform.iOS and modifying our own version of it so we can respond to the delegates in the manner that the framework expects.
[/SHOWTOGROUPS]