Majority of users download an application and they want to interact quickly with the application, especially in the case of productivity tool or social network application. A lot of applications provide great UI but UX is also much important if you are trying to attract new users.UX can be improved by making the application entry process easy by letting them sign-in in just one tap.
One of the easist way to let users sign-in in just one tap by enabling the social login in your application.
Most of the application lets users sign-in with their Google, Facebook, LinkedIn, Twitter, etc. In this blog, we are going to explore one more way of letting your users sign-in to your application i.e SnapChat.
We will use SnapChat LoginKit to let our SnapChat users easily sign-in to our application. Login Kit Android gives you access to two Snapchat features, login and identity.
Requirements:
- Client ID from the developer portal
- Android Studio 3.0+
- Gradle 3.0+
- Android API Level 19+
To connect your app to Snapchat, your app must also have the following targets:
- Android support library version 22+
- Snapchat 10.34.0.0+
Getting Started:
Add the following code block to your root project’s build.gradle file:
repositories {
maven {
url "https://storage.googleapis.com/snap-kit-build/maven"
}
}Note: If you have trouble accessing Google (used in the link above), you can use our GitHub Maven repository with the following code block:
repositories {
maven {
url "https://raw.githubusercontent.com/Snap-Kit/release-maven/repo"
}
}Next, add the following dependency to your app build.gradle file
dependencies {
...
implementation([
'com.snapchat.kit.sdk:login:1.1.4',
'com.snapchat.kit.sdk:core:1.1.4'
])
}And next, add the following to the Android manifest file i.e application’s client ID, redirect URL, and scope to the appropriate metadata tags. These values will be used by SDK to enable the deep linking from your application to snapchat.
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
<meta-data
android:name="com.snapchat.kit.sdk.clientId" android:value="your client id" />
<meta-data android:name="com.snapchat.kit.sdk.redirectUrl" android:value="your redirect url" />
<!-- e.g redirect url : fluttersnap://snap-kit/auth-->
<meta-data
android:name="com.snapchat.kit.sdk.scopes" android:resource="@array/snap_connect_scopes" />
<!-- This should be a string array of scopes !-->
...
<activity android:name="com.snapchat.kit.sdk.SnapKitActivity" android:launchMode="singleTask">
<intent-filter>
<action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <!--Enter the parts of your redirect url below e.g., if your redirect url is
fluttersnap://snap-kit/auth android:scheme="fluttersnap" android:host="snap-kit"
android:path="/auth"!-->
<data
android:scheme="your scheme"
android:host="your host"
android:path="/you path"/>
</intent-filter>
</activity>
...
</application>You’ll have to define snap_connect_scopes as an Android resource array in values/arrays.xml. Example:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="snap_connect_scopes">
<item>https://auth.snapchat.com/oauth2/api/user.bitmoji.avatar</item>
</string-array>
</resources>Initiating login with snapkit:
Create a button in your XML file and add a click listener on it. Now you need to write this
SnapLogin.getAuthTokenManager(getApplicationContext()).startTokenGrant();
Subscribe to login Updates:
Add the following import to your file:
import com.snapchat.kit.sdk.core.controller.LoginStateController;For updates on the success of this login process, define an onLoginStateChangedListener:
@Override
protected void onStart() {
super.onStart(); SnapLogin.getLoginStateController(this).addOnLoginStateChangedListener(this); }Listen for the result:
final LoginStateController.OnLoginStateChangedListener mLoginStateChangedListener =
new LoginStateController.OnLoginStateChangedListener() {
@Override
public void onLoginSucceeded() {
// Here you could update UI to show login success
}
@Override
public void onLoginFailed() {
// Here you could update UI to show login failure
}
@Override
public void onLogout() {
// Here you could update UI to reflect logged out state
}
};Remove the listener inside your onStop:
@Override
protected void onStop() {
super.onStop(); SnapLogin.getLoginStateController(this).removeOnLoginStateChangedListener(this);
}To check whether a user is logged in or not check for this:
boolean isUserLoggedIn = SnapLogin.isUserLoggedIn(getContext());Fetch the user details inside onLoginSucceeded() method callback:
void fetchUserData(){
String query = "{me{bitmoji{avatar},displayName,externalId}}"; SnapLogin.fetchUserData(this, query, null, new FetchUserDataCallback() {
@Override
public void onSuccess(@Nullable UserDataResponse userDataResponse) { if (userDataResponse == null || userDataResponse.getData() == null){
return;
}
MeData meData = userDataResponse.getData().getMe();
if (meData == null) {
return;
} _name.setText(userDataResponse.getData().getMe().getDisplayName()); System.out.println(userDataResponse.getData().getMe().getExternalId());
}
@Override
public void onFailure(boolean isNetworkError, int statusCode) { }
});
}After the user logout of your application you can disconnect them using:
SnapLogin.getAuthTokenManager(this).revokeToken();For more detail on Snapchat LoginKit: Docs
That’s all for this tutorial, hope you liked it.
Read my other articles:
Did I get something wrong? Mention it in the comments. I would love to improve.
If you liked what you read, please leave some claps!
Follow me:
Twitter : https://twitter.com/imRaviSSingh
Facebook : https://www.facebook.com/itsravishankarsingh
Instagram : https://www.instagram.com/itsravishankarsingh/
Github : https://github.com/ravishankarsingh1996
LinkedIn : https://www.linkedin.com/in/itsravishankarsingh/
About.me :https://about.me/itsravishankarsingh
