I am attempting to perform authentication with loopbackJS as a backend provider. After following the documentation on loopback's doc site I'm still receiving an "Unknown Provider error".
Here is the following code I've written so far.
Home View
<form class="centered" ng-controller="UserController as user">
<div class ="form-group">
<label for="exampleEmail">Email</label>
<input class="form-control" type="text" name="email" placeholder="{{user.usernames.email}}">
<label for="examplePassword">Password</label>
<input class="form-control" type="password" name="password" placeholder="{{user.usernames.password}}">
<p>{{user.description}}</p>
<button class="button" ng-show="user.usernames.signin" ng-submit="login()">login</a> </button>
</div>
</form>
Auth Controller
var app = angular.module('app')
app.controller('UserController', ['$scope','AuthService', '$state', function($scope, AuthService, $state){
$scope.user = {
email: 'foo#bar.com',
password: 'foobar'
};
$scope.login = function() {
AuthService.login($scope.user.email, $scope.user.password)
.then(function() {
$state.go('success');
});
};
}]);
Index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Todo Application</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<header ng-include="'views/header.html'"></header>
<body>
<ui-view></ui-view>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/services/auth.js"></script>
<script type="text/javascript" src="js/controllers/auth.js"></script>
<script src="js/services/lb-services.js"></script>
</body>
</html>
Also, in order to provide as much detail into the problem as possible here is a look at the errors presently in my console.
Thanks in advance for the help, it's greatly appreciated.
I believe that AuthService is some service you wrote yourself. You should use instead the utility provided by strongloop to generate the service from your server's models.
Authentication with loopback + angular is pretty straightforward like that.
Generate angular services from loopback server by running lb-ng . ./client/js/lb-services.js inside your server's root folder.
Then in angular, call MyUser.login({email: 'foo#bar.com', password: 'foobar'})
Done. If credentials are correct, the user will be authenticated for any further request (basically, the service memorizes the connection token, and sets it in the Authorization header each time a new request is made against your REST api).
Eventually, you may be interested in calling MyUser.isAuthenticated() to make your page behave differently if the user is, well, authenticated.
This is all documented here
You are using AuthService, which is user created service. It is abstraction over lb-services.js of loopback. You have to generate lb-services.js using lb command line.
Loopback angularjs Authentication : Login and registration
Steps:
Create new loopback project.
Generate lb-services.js and use it in angularjs project.
Use User.login() for login, User.create() for registration and User.isAuthenticated() to check user is login or not.
Best tutorial for loopback angularjs authentication
Related
I am trying to develop an application with Laravel Framework and AngularJS. However, I have the "routing" problem. I have the file "Master.blade.php". But the AngularJS "html" and "controller" files do not appear.
My Local Screen
webpack.mix.js [not problem js and sass files]
const { mix } = require('laravel-mix');
mix.scripts([
'node_modules/bootstrap/dist/bootstrap.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/angular-cookies/angular-cookies.js',
'resources/assets/js/app.js',
'resources/assets/js/controllers/authController.js'
], 'public/assets/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/assets/css/app.css');
web.php - Laravel routing
<?php
Route::get('/app', function () {
return view('layouts.master');
});
Master.blade.php
<!Doctype html>
<html ng-app="bildirioApp">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bildirio</title>
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script>
</body>
</html>
App.js
/* This is the main file where Angular is defined */
var bildirioApp = angular.module('bildirioApp', ['ngRoute', 'ngCookies']);
bildirioApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.when('/login', {
templateUrl : 'resources/views/auth/login.html',
controller : 'authController',
});
$routeProvider.otherwise('/');
}
]);
authController.js
bildirioApp.controller('authController', ['$scope', function ($scope) {
}]);
login.html
<div class="row">
<div class="col-sm-4 col-sm-push-3 well">
<h1>Login</h1>
<form name="loginForm" ng-submit="doLogin(loginForm)">
<div class="form-group">
<input class="form-control" type="email" name="email" ng-model="login.username" required placeholder="Enter your email address">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" ng-model="login.password" required placeholder="Enter your password">
</div>
<input class="btn btn-success" type="submit" name="save" value="Login">
</form>
</div>
</div>
It seems like the problem you are facing is that your login.html file is not found.
When you are setting your template to
templateUrl : 'resources/views/auth/login.html'
your server is actually looking for
{app_root_folder}/public/resources/views/auth/login.html
which, of course, does not exist. That is because Angular does not have access to anything but the public folder and specific routes you define.
If you looked at the Network section of your browser's Developer Tools you will probably see a 404 error.
There are 2 ways you can fix this.
Option 1 - Create a route that serves the login.html file.
First, change your App.js routing to:
$routeProvider
.when('/login', {
templateUrl : 'login/getView',
controller : 'authController',
});
Then, add the corresponding route in web.php which will serve the login.html file:
Route::get('/app', function () {
return view('layouts.master');
});
Route::get('/login/getView', function () {
return view('auth.login');
});
This, hopefully solves your problem. If not - monitor the Network requests in the Developer Tools to see if the login.html is found or not. Also make sure all other files are actually loaded correctly (i.e App.js).
Option 2 - Move your login.html to the public folder (not recommended)
You can move the login.html into the public folder (public/resources/views/auth/login.html).
This is NOT my preferred way of doing it since it breaks your MVC pattern.
I usually like to have all my view files in the resources/views folder and not split them between resources/views and public.
Also, when they are in the resources/views folder you can use .blade files so serve to Angular. This way you can do server-side rendering before it reaches Angular (i.e login.blade.php).
Hope this helps!
First question on stack overflow, will try to get it right. I am having trouble with a Twitter oauth in an Ionic app, using libraries cordova, and ng-cordova-oath amongst others.
I have succesfully managed a linkedin, facebook and google auth, retrieving data from user profiles on login, but this one has me beat.
I think the syntax is ok, as my alerts run in the browser, but when i emulate on android to test the logins, i am getting no response from the twitter login, success or failure.
I have triple checked the twitter developer site for my apps settings, am using the callback url "http://localhost/callback". I have tried overriding the callback uri in ng-cordova-oauth to a live url, and adjusting the matching setting in the developer console, as this wasn't working for my linked in login, but i am not even reaching the callback part of the flow.
Index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/sha1.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
Relevant block from app.js where libraries are provided:
angular.module('app', ['ionic', 'ngCordova', 'ngCordovaOauth', 'ui.router', 'app.controllers'])
controllers.js:
angular.module('app.controllers', [])
.controller('LoginCtrl', function($scope, $state, $cordovaOauth, $http) {
$scope.twitterLogin = function(){
alert("running twitterLogin()"); // Alert works
$cordovaOauth.twitter(
"P1E***************", /* Client ID */
"3et**************************************") /* Client Secret */
.then(function(result){
alert("result token recieved"); /* Not running, can't access result to get token */
}, function(error){
alert("Error getting result token"); /* Not running, runs in browser when not emulated, of course the login process can't be tested in the browser */
});
alert("Oauth finished"); // Not running, reaches here in browser after failed login, but never reaches here in emulator
}
});
login.html:
<div class="inline">
<img src="img/loginTwitter.png" ng-click="twitterLogin()" />
</div>
<html ng-app="app">
<head>
// Did you load angularjs in scripts?
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/sha1.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="LoginCtrl">
<div class="inline">
<img src="img/loginTwitter.png" ng-click="twitterLogin()" />
</div>
</body>
</html>
Your template should look something like this.
This is solved! The problem for me, if anybody else comes across it, is that i was using the wrong version of the sha1.js library. The version that is required to work with ng-cordova-oauth is the version 1 branch, and not the master branch, on the GitHub repository.
I'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07
I have a working test service on our local 2012 server which returns JSON like so:
192.168.1.11:8080/api/values
[{"ID":1,"Name":"sankar","Address":"cuttack","DOB":"1983-01-22T00:00:00"},{"ID":3,"Name":"My Test Name","Address":"My Test Address","DOB":"1980-01-01T00:00:00"}]
I'm using VS2010 and empty asp.net project (one .html page) with the following code to pull a simple list from the local server like so:
<html lang="en" data-ng-app="">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript">
function ValuesController($scope, $http) {
$scope.length = 0;
$scope.data = [];
$http.get("192.168.1.11:8080/api/values")
.then(
function (result) {
angular.copy(result.data, $scope.data);
},
function () {
//handle error
}
);
}
</script>
</head>
<body>
<div data-ng-controller="ValuesController">
<div class="row">
<h2>Projects and its Tasks</h2>
<p>Number of Projects : {{ data.length }}</p>
</div>
<div data-ng-repeat="d in data">
<p>Name : {{d.Name}}</p>
</div>
</div>
</body>
</html>
Try adding the protocol to your URL. I think angular might be treating that as a relative URL without the protocol.
$http.get("http://192.168.1.11:8080/api/values")
You will also need to enable CORS on your Web API and in AngularJS to make cross domain calls.
If you are just getting started and trying to learn how AngularJS works, you would probably be better off running the Web API under the same site that is hosting your JavaScript/HTML.
When I try to run page as described in https://www.firebase.com/docs/angular/
<html ng-app="sampleApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SampleController">
<input type="text" ng-model="text"/>
<h1>You said: {{text}}</h1>
</body>
</html>
and app.js:
angular.module("sampleApp", ["firebase"])
.factory("sampleService", ["$firebase", function($firebase) {
var ref = new Firebase("https://sizzling-fire-8112.firebaseio.com/");
return $firebase(ref);
}])
.controller("SampleController", ["$scope", "sampleService",
function($scope, service) {
service.$bind($scope, "text");
}
]);
There is: You said: {{text}} on the web screen.
What I did wron?
Thanks ;)
I suppose you are opening this page not via webserver, but directly from filesystem.
If so, never do that way. There can be various restrictions with AJAX, canvas, etc.
In your example you're trying to load outer scripts with protocol relative URLs.
In case of opening page from filesystem, URLs are being transformed into file://... format.
To solve this problem you should use a webserver. If you can't use it for some reasons, add http: to the beginning of the outer URLs, so it will be:
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js
instead of
//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js