Introduction
In this article, I will be integrating Huawei Auth Service in an Application. The Auth Service SDK into our app, we can easily and quickly provide functions such as registration and sign-in for our users. We can choose to provide our users with one or more of the authentication modes like Mobile number, Email address, Facebook, WeChat etc. We will integrate the authentication by Facebook into the app, so that our users can use Facebook to sign in to the app securely,
React Native
React Native helps you to create real and exciting mobile apps with the help of JavaScript only, which is supportable for both android and iOS platforms.
Just code once, and the React Native apps are available for both iOS and Android platforms which helps to save development time.
React Native is a framework that builds a hierarchy of UI components to build the JavaScript code.
It uses the same fundamental UI building blocks as regular iOS and Android apps.
Requirements
- Any operating system (MacOS, Linux and Windows).
- Must have a Huawei phone with HMS 4.0.2.300 or later.
- Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
- Minimum API Level 21 is required.
- Required EMUI 9.0.0 and later version devices.
Integrate HMS Dependencies
First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.
Create a project in android studio, refer Creating an Android Studio Project.
Generate a SHA-256 certificate fingerprint.
To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.
Or use cmd as explained in SHA256 CODECreate an App in AppGallery Connect.
Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.
- Enter SHA-256 certificate fingerprint and click Save, as follows.
React Native Project Preparation
Environment set up, refer below link.
https://reactnative.dev/docs/environment-setupCreate project using below command.
react-native init project name
Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project. If you cannot find node modules run below command under project directory using CLI.
“npm install” & “npm link”Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
maven {url 'http://developer.huawei.com/repo/'}
Configure app level build.gradle. (Add to dependencies)
Implementation project (“:react-native-hms-account”)
Linking the HMS Account Kit Sdk.
Run below command in the project directory
react-native link react-native-hms-account
Add below permissions to Android.manifest file.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
- Enabling Auth Service (i). Sign in to AppGallery Connect and click My projects. (ii). Click a project that you want to enable Auth Service from the project list. (iii). Choose Build > Auth Service. If it is the first time that you use Auth Service, click Enable now in the upper right corner.
(iv). Click Enable in the row of each authentication mode to be enabled.
For more details visit this documentation.
Development
On the app sign-in page, obtain user information from AppGallery Connect, and check whether a user has signed in. If a user has signed in, the user's home page is displayed; if no user has signed in, the sign-in page is displayed.
After a user requests to sign in using a Facebook account, obtain the user authorization information of the account.
Call FacebookAuthProvider.credential to generate a credential using the access token obtained from the Facebook account, and then call AGCAuth.signIn to implement sign-in.
let credential = FacebookAuthProvider.credential("accessToken");
AGCAuth.getInstance()
.signIn(credential)
.then((signInResult) => {
// signInResult.user to get user info
})
.catch((error) => {
// error
});
Homepage.js
const [list, setList] = useState([])
const [value, setValue] = useState("")
// A function that add data to the list array
function addText(text) {
if (value !== "") {
setList(prev => {
return [
...prev,
{ text: text, isSelected: false } // Adding a JS Object
]
})
setValue("")
} else {
alert("Please type in something!")
}
}
// A function that set the value of isSelected based on the state of the checkbox
function setIsSelected(index, value) {
let data = []
// Making a deep copy of the list array
for (let i = 0; i < list.length; i++) {
if (index === i) {
data.push({ ...list[i], isSelected: value }) // Updating the object at position i === index
} else {
data.push(list[i])
}
}
setList(data) // Setting the new state
}
// A function that delete an item at position idx from the list array
function deleteItem(idx) {
Alert.alert(
"Delete Item",
"Are you sure you want to delete this item?",
[
{
text: "Cancel",
style: "cancel"
},
{
text: "Yes", onPress: () => {
const data = list.filter((item, index) => index !== idx)
setList(data)
}
}
])
}
return <View style={styles.container}>
<Text style={{ ...FONTS.h1_semiBold, color: COLORS.secondary, marginBottom: 15 }}>What needs to be done.</Text>
<FlatList style={{ flex: 1 }}
data={list}
renderItem={({ item, index }) => <Card data={item} index={index} setIsSelected={setIsSelected} deleteItem={deleteItem} />}
keyExtractor={(item, index) => index.toString()}
/>
<View style={styles.textBoxWrapper}>
<TextInput
style={styles.textInput}
placeholder="New Task"
placeholderTextColor={COLORS.primary}
onChangeText={text => setValue(text)}
value={value} />
<TouchableOpacity
style={styles.btn}
onPress={() => addText(value)}>
<Text style={{ fontSize: 34, color: COLORS.secondary }}>+</Text>
</TouchableOpacity>
</View>
</View>
Testing
Run the android App using the below command.
react-native run-android
Result
Conclusion
In this article, we have learnt that how to integrate the Facebook authentication mode into the app, so that our users can use Facebook to sign in to the app securely.
Reference
Account Kit: Documentation
Account Kit: Training Video
Top comments (0)