Integrate AGC UI in 15 Minutes - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
AGC UI is a one stop solution where multiple third party providers can be integrated using Huawei AGC Auth Service for authentication. AGC UI provides our user to login by any third party providers and we can validate their identity without any requirement to implement our own backend servers. AGC UI has many features which we can utilize:
1) Has similar functionality as Firebase UI
2) Provides user token validation at server side
3) User can login in and link multiple third party providers in an application.
4) Has a default theme, but can be customize easily according to our need.
5) It is an open source library
Need of AGC UI
1) Firebase UI will not work on HMS devices.
2) Firebase UI provides multiple providers sign in at a single place.
3) Required single UUID for multiple providers.
4) Developer has no longer require to focus on UI part, it saves lot of integration time.
How it works?
1) Client app request for the UI to AGC UI library.
2) Based on the selection of the provider's, UI will be shown to client App.
3) User select specific provider for Authentication.
4) AGC UI will request the selected provider authentication page.
5) Show the authorization page to user in browser.
6) User enters their credentials.
7) AGC Server authenticate the user and returns the SignInResult to the client app.
Instead of writing boiler plate codes for third party providers which we need in our application for our users to authenticate using Huawei Auth Service, AGC UI allows us to authenticate users through a number of different third party providers avoiding boiler plate codes, providing us with both variety and flexibility when it comes to authentication within our applications. In this article we will see two ways of integrating AGC UI in our application:
a) Default theme
b) Customization theme
Demo
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Prerequisite
1) Must have a Huawei Developer Account.
2) Must have a Huawei phone with HMS 4.0.0.300 or later.
3) Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
Things need to be done
1) Create a project in android studio.
2) Get the SHA Key. For getting the SHA key, refer this article.
3) Create an app in the Huawei AppGallery connect.
4) Enable Auth Service setting in Manage APIs section.
5) Provide the SHA Key in App Information Section.
6) Provide storage location.
7) After completing all the above points we need to download the agconnect-services.json from App Information Section. Copy and paste the Json file in the app folder of the android project.
8) Enter the below maven url inside the repositories of buildscript and allprojects (project build.gradle file):
Code:
maven { url ‘http://developer.huawei.com/repo/’ }
9) Enter the below class path dependencies in project build.gradle file:
Code:
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
10) Enter the below plugin in the app build.gradle file:
Code:
apply plugin: ‘com.huawei.agconnect’
11) Enter the below permission in android manifest file
Code:
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
12) Now Sync the gradle.
Common steps required
As I mentioned earlier there are two ways we can integrate AGC UI in our application but both the ways required to follow a common steps to work with AGC UI library:
Enabling Huawei account, email address and mobile number
1) Navigate to AGC UI Github repository
https://github.com/Huawei-DTSE-India-Delhi-NCR/AGC-UI-Auth
2) Select AGC-UI-AUTH-MODULE as shown below:
3) Download the code as shown below:
4) Open the your android project and make the following changes in the app build.gradle file:
Code:
minSdkVersion 17 dataBinding {
enabled = true
}
compileOptions {
sourceCompatibility = 1.8
targetCompatibility = 1.8
}
5) Import the downloaded AGC-UI-AUTH-MODULE library as dependencies using project structure settings in your project and after importing the module the app build.gradle file should look like this:
Code:
implementation project(path: ':agcbase')
implementation project(path: ':agccommon')
implementation project(path: ':agcfacebook')
implementation project(path: ':agcphone')
implementation project(path: ':agcemail')
implementation project(path: ':agcgoogle')
implementation project(path: ':agchuweiid')
6) Navigate to AGC console and select your project.
7) Select Auth Service under your project Build
8) Enable mobile number, email address Authentication mode.
9) Enable Huawei account and provide your APP ID and APP SECRET of your project as shown below:
Enabling Facebook
1) Navigate to Facebook developer console. If you have not registered yourself as a developer yet, then Facebook will ask you to register as a developer.
2) Create new app and select android as platform.
3) Provide your project package name and Key Hash. For key hash put the below code in onCreate method of your project and run the project:
Code:
private void getFbHashKey(){
try {
PackageInfo info = getPackageManager().getPackageInfo(
"com.huawei.hmsui",
PackageManager.GET_SIGNATURES);
for (Signature signature : info.signatures) {
MessageDigest md = MessageDigest.getInstance("SHA");
md.update(signature.toByteArray());
Log.d("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));
}
} catch (PackageManager.NameNotFoundException e) {
} catch (NoSuchAlgorithmException e) {
}
}
4) After creating the app get the App ID and App Secret of Facebook.
5) Enable Facebook authentication mode and provide the App ID and App Secret in Auth Service.
6) Add following facebook configuration into your application string.xml file
Code:
<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="fb_login_protocol_scheme">YOUR_FACEBOOK_APP_SECRET </string>
Enabling Twitter
1) Navigate to Twitter developer console. If you have not registered yourself as a developer yet, then Twitter will ask you to register as a developer.
2) Create a new app.
3) Get the API key and API key Secret.
4) Enable Twitter authentication mode in Auth Service and provide the API key and API secret key shown below:
e) In order to avoid “Failed to get request token” error we need to provide twittersdk:// as Callback URLs, website URL, Terms and Service and Privacy Policy in twitter authentication settings section.
f) Add following twitter configuration into your application string.xml file.
Code:
<string name="twitter_api_key">YOUR_TWITTER_API_KEY</string>
<string name="twitter_api_secret">YOUR_TWITTER_API_KEY_SECRET </string>
Enabling Google
1) Go to Google Developer Console. If you have not registered yourself as a developer yet, then Twitter will ask you to register as a developer.
2) Create your project. Provide your package name and SHA1 key there and get the Client ID and Client Secret.
3) Enable Google authentication mode in Auth Service and provide the Client ID and Client Secret as shown below:
4) Add following Google configuration into your application string.xml file.
Code:
<string name="google_client_id">YOUR_GOOGLE_CLIENT_ID </string>
<string name="redirect_uri">Your_PACKAGE_NAME:/oauth2callback</string>
5) Add following into your application manifest file.
Code:
<activity android:name="net.openid.appauth.RedirectUriReceiverActivity">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="YOUR_PACKAGE_NAME" />
</intent-filter>
</activity>
6) Add below dependency in app gradle
Code:
implementation 'net.openid:appauth:0.2.0'
Default theme of AGC UI
The default theme of AGC UI is nothing but the default user interface which is provided by the library. Following are the steps to use the default theme of AGC UI:
1) Comment or remove setContentViewMetho
2) Use initializeButton method to show or hide third party providers as shown below:
Code:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main2);
initializeButton(true,true,true,true,true,true);
}
3) Enable app log and app name as shown below:
Code:
enableAppLogo(true);
enableAppName(true);
Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/shablagooital.ttf");
appLogo( getResources().getDrawable(R.drawable.ic_body_builder),400,400);
appBackgroundColor("#fafafa");
appName("PANDAVAS",50,"#3e454f",typeface);
Byenabling them, we can provide our own app logo and name as shown above.
4) After user login using any provider the data we will receive in onActivityResult as shown below:
Code:
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == Activity.RESULT_OK) {
if (data.getExtras() != null) {
Log.d(getClass().getName(), "RESPONSE IS " + data.getExtras().getString("response"));
Intent intent = new Intent(Main2Activity.this, HomeActivity.class);
startActivity(intent);
finish();
}
}
if(resultCode == Activity.RESULT_CANCELED){
// Do Anything
Toast.makeText(getApplicationContext(),"Canceled",Toast.LENGTH_LONG).show();
}
}
Result
Customization theme of AGC UI
We can also customize our own user interface using AGC UI. Following are the steps to customize:
1) Download the semi-circular radial menu library from the below link:
http://hasmukhbhadani.blogspot.com/2014/04/radial-menu-semi-circular-radial-menu.html
Get two files from this library that is SemiCircularRadialMenu and SemiCircularRadialMenuItem. Paste this two files in your project and modify them if you required.
2) Add the following code in our layout xml file:
Code:
<com.huawei.hmsui.arclib.SemiCircularRadialMenu
android:id="@+id/radial_menu"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
3) Add the following code in our Activity file:
Code:
// HUAWEI ID
mHuaweiId.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, HuaweiIdAuth.class), Constant.REQUEST_HU_SIGNIN_CODE);
}
});
Code:
// TWITTER LOGIN
mTwitter.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, TwitterAuth.class), Constant.REQUEST_TWITTER_CODE);
}
});
Code:
// GOOGLE LOGIN
mGoogle.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, GSignInActivity.class), Constant.REQUEST_GOOGLE_CODE);
}
});
Code:
// FACEBOOK LOGIN
mFacebook.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, FacebookAuth.class), Constant.REQUEST_FACEBOOK_CODE);
}
});
Code:
// EMAIL LOGIN
mHuaweiEmail.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, EmailAuthActivity.class), Constant.REQUEST_EMAIL_AUTH);
}
});
Code:
// PHONE LOGIN
mHuaweiPhone.setOnSemiCircularRadialMenuPressed(new SemiCircularRadialMenuItem.OnSemiCircularRadialMenuPressed() {
@Override
public void onMenuItemPressed() {
startActivityForResult(new Intent(MainActivity.this, PhoneRegisterActivity.class), Constant.REQUEST_PHONE_AUTH);
}
});
In the above code using startActivityForResult we can get the login functionality for providers.
4) After user login using any provider the data we will receive in onActivityResult same as default theme.
Result
AGC UI vs Firebase UI
Limitation of AGC UI
1) It will not support google sign in with underscore(_) in package name like:
com.example.demotest(supported)
com.example.demo_test(unsupported)
2) Update Email and update phone is not working in AGC for third party providers.
3) AGC UI only works for Android.
What we learn?
We learn how to integrate AGC UI and create two ways of login. It is an open source library so go crazy and build something useful.
GitHub
Very soon I am going to post the entire code on GitHub. So come back again to check it out.
FAQ
Question 1: While google signin we are getting Uri Mismatch Error
Answer:
1) Check redirectUri and client id in string.xml. RedirectUri in your string xml must be your_package_name+:/oauth2callback and client id must be android clientid.
2) Open AndroidManifest.xml and Check for android scheme in intent-filter of RedirectUriReceiverActivity. It must be your_package_name.
Question 2: While google signin getting 401(Authorization Error)
Answer: Check google developer console and confirm you are using client id of same application/project.
Question 3: Third party provider authentication is successful, but not able to Signing in AGC
Answer:
1) Check for provider on AGC console, it is enabled or not.
2) Check your app's authentication mode details by following
AGC console > My Project > Build > Auth Service > specific provider
For more reference
https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-auth-service-introduction
https://github.com/Huawei-DTSE-India-Delhi-NCR/AGC-UI-Auth