Currently, I am working on implementing a login system for my network using the Angular version of NativeScript. Below is the code snippet in which I am attempting to log into the network.
home.component.ts
import { LoginService } from '../Services/login/login.service';
export class LoginComponent implements OnInit {
public user: User;
loginForm: FormGroup;
constructor(private router: Router,
private userService: UserService,
private page: Page,
public loginDetails: LoginDetails,
private LoginService: LoginService
) {
this.user = new User();
this.user.email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a674a6724696567">[email protected]</a>";
this.user.password = "pass123";
this.user.logo = "~/Images/opos_logo.png";
}
submit() {
/* set a user variable with data from the formGroup */
const user: string = this.user.email;
/* set a password variable with data from the formGroup */
const password: string = this.user.password;
this.LoginService.loginUser(user, password)
.subscribe(data => this.checkUser(data));
}
}
Services/login/login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { Jwt } from '../../Classes/jwt';
@Injectable({
providedIn: 'root'
})
export class LoginService {
loginUrl = 'http://localhost/Login.w';
constructor(private _http: HttpClient) { }
loginUser(user, pass) {
return this._http.get<Jwt>(
this.loginUrl, { params: { fi_user: user, fi_pass: pass } });
}
}
Upon running the application as it is, an error message displayed:
"originalStack": "Error: java.io.IOException: Cleartext HTTP traffic to localhost not permitted\n at new ZoneAwareError (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/angular/zone-js/dist/zone-nativescript.js:1298:31)\n at onRequestComplete (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript/core/http/http-request/http-request.js:54:30)\n at Object.onComplete (file:///data/data/org.nativescript.preview/files/app/tns_modules/@nativescript... "
I followed the suggestions from this post on Stack Overflow to resolve the issue. I added an androidmanifest.xml file to the program by placing it in the path /App_Resources/Android/AndroidManifest.xml.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="__PACKAGE__"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"/>
<uses-sdk
android:minSdkVersion="17"
android:targetSdkVersion="__APILEVEL__"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:name="com.tns.NativeScriptApplication"
android:allowBackup="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:theme="@style/AppTheme"
android:networkSecurityConfig="@xml/network_security_config">
<activity
android:name="com.tns.NativeScriptActivity"
android:label="@string/title_activity_kimera"
android:configChanges="keyboardHidden|orientation|screenSize"
android:theme="@style/LaunchScreenTheme">
<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.tns.ErrorReportActivity"/>
</application>
In addition, I also included a network_security_config.xml file as suggested by the Stack Overflow post and placed it in res/xml/network_security_config.xml.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">domain.com (to be adjusted)</domain>
</domain-config>
</network-security-config>
I attempted to add the application android:usesCleartextTraffic="true" tag to my home.component.html to troubleshoot the error, but unfortunately, it did not resolve the issue.