[ad_1]
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Kotlin und Node JS einen Benutzer mit JWT (JSON Web Token) in der Android-App anmelden können. Wir werden Node JS zum Generieren von JWT und Mongo DB zum Speichern verwenden.
Eine Aktivität erstellen
Zuerst erstellen wir eine leere Aktivität mit dem Namen „LoginActivity.kt“. Es folgt der Code dieser Datei:
package com.adnantech.myapp
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class LoginActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)
}
}
Dadurch wird im Ordner „res/layout“ nach einer Datei mit dem Namen „activity_login.xml“ gesucht.
Erstellen Sie eine XML-Datei
Dann erstellen wir eine Datei mit dem Namen „activity_login.xml“ im Ordner „res/layout“. Diese Datei enthält den folgenden Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
tools:context=".LoginActivity">
<TextView
android:id="@+id/heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:textAlignment="center"
android:textSize="40sp"
android:textStyle="bold" />
<EditText
android:id="@+id/etPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/heading"
android:layout_marginTop="20dp"
android:hint="Enter phone"
android:inputType="phone" />
<EditText
android:id="@+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etPhone"
android:layout_marginTop="20dp"
android:hint="Enter password"
android:inputType="textPassword" />
<Button
android:id="@+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etPassword"
android:layout_marginTop="20dp"
android:text="Login" />
</RelativeLayout>
Es wird die Überschrift „Anmelden“ horizontal mittig angezeigt. Zwei Eingabefelder. Eine zur Eingabe der Telefonnummer und eine für das Passwort. Außerdem wird eine Schaltfläche angezeigt, die beim Klicken eine HTTP-Anfrage zur Authentifizierung des Benutzers aufruft.
Button-OnClick-Ereignis-Listener
Wir müssen einen „onclick“-Ereignis-Listener an die Schaltfläche anhängen. Daher werden wir Instanzen aller unserer Eingabefelder und Schaltflächen erstellen.
class LoginActivity : AppCompatActivity() {
private lateinit var etPhone: EditText
private lateinit var etPassword: EditText
private lateinit var btnLogin: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)
etPhone = findViewById(R.id.etPhone)
etPassword = findViewById(R.id.etPassword)
btnLogin = findViewById(R.id.btnLogin)
btnLogin.setOnClickListener {
doLogin()
}
}
private fun doLogin() {
// [HTTP request to authenticate the user]
}
}
Und innerhalb dieses Button-Click-Listeners rufen wir unsere Methode auf, die eine HTTP-Anfrage aufruft.
Aufruf einer HTTP-Anfrage
Um eine HTTP-Anfrage aufzurufen, stellen Sie zunächst sicher, dass in Ihrer Datei „AndroidManifest.xml“ die Berechtigungen INTERNET und ACCESS_NETWORK_STATE hinzugefügt wurden.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
Dann müssen Sie die folgende Zeile in Ihre „app/build.gradle“-Datei einfügen:
implementation "com.android.volley:volley:1.2.1"
Stellen Sie sicher, dass Sie nach dem Einfügen dieser Zeile „Gradle sync“ aktivieren. Sie sehen oben in Android Studio die Option, Gradle zu synchronisieren. Danach müssen Sie den folgenden Code in schreiben [HTTP request to authenticate the user] Abschnitt:
btnLogin.isEnabled = false
val queue = Volley.newRequestQueue(this)
val url = "http://172.20.10.4:3000/login"
val requestBody =
"phone=" + URLEncoder.encode(
etPhone.text.toString(),
"UTF-8"
) + "&password=" + etPassword.text
val stringReq: StringRequest =
object : StringRequest(
Method.POST, url,
Response.Listener { response ->
btnLogin.isEnabled = true
Log.i("mylog", response)
},
Response.ErrorListener { error ->
Log.i("myLog", "error = " + error)
}
) {
override fun getBody(): ByteArray {
return requestBody.toByteArray(Charset.defaultCharset())
}
}
queue.add(stringReq)
Dadurch wird zunächst die Anmeldeschaltfläche deaktiviert. Dann wird eine Instanz von Volley erstellt. Danach wird der Pfad einer API festgelegt. Sie können Ihre IP-Adresse erhalten, indem Sie einen der folgenden Befehle in Ihrem Terminal ausführen:
> ipconfig /all
or
> ifconfig
Sie müssen die IPv4-Adresse kopieren und als Ihre IP-Adresse einfügen.
Anschließend wird ein Anforderungshauptteil erstellt, die Parameter, die an die API gesendet werden. Erstellt eine Instanz von „StringRequest“. Wenn die Antwort empfangen wird, aktiviert es einfach die Anmeldeschaltfläche und zeigt die Antwort im Protokoll an. Sie können die Antwort anzeigen, indem Sie Ihren „Logcat“ in der unteren Leiste Ihres Android Studios öffnen. Wählen Sie „Info“ und suchen Sie nach „Mylog“.
Wenn Sie den JSON-String in die Kotlin-Klasse konvertieren möchten, können Sie dies ausprobieren Das Lernprogramm.
Wir haben bereits ein öffentliches GitHub-Repository für die Authentifizierungs-API erstellt. Sie können es sich ansehen Hier.
So können Sie mit Kotlin mit Node JS und Mongo DB als Backend eine Anmeldeaktivität in Android erstellen. Wenn Sie bei der Befolgung dieser Anleitung auf Probleme stoßen, lassen Sie es mich bitte wissen.
Beitragsaufrufe: 5
