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.
Related
I'm making a tutorial mixing AngularJS and Spring Boot that run on a Tomcat server and I'm trying to make a route work but it just doesn't seem to be doing anything. Do you guys see anything wrong here? I've done angular routing before but had no trouble, I think that something is happening due to the fact that it runs in Tomcat...
This is the page that calls the route:
<!DOCTYPE html>
<html ng-app="appCliente">
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="./js/app.js"></script>
<script src="./js/controller/cliente-controller.js"></script>
<script src="./js/controller/estado-controller.js"></script>
<script src="./js/controller/cidade-controller.js"></script>
</head>
<body>
Clientes
<div ng-view="ng-view">
</div>
</body>
</html>
And this is the app declaration JS file:
var appCliente = angular.module('appCliente', ['ngRoute']);
appCliente.config(function($routeProvider){
$routeProvider
.when('/clientes', {
controller:'clienteController',
template: '<h2>Something</h2>'
})
.otherwise({
redirectTo:'/'
});
});
Any idea of what seems to be the problem?
(I noticed that when I try to load the initial page - http://localhost:8080/ - Spring Boot is putting some characters after the url automatically - http://localhost:8080/#!/ - but it loads normally)
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
I have a very simple AngularJS app that I'm using to test the creation of a new Safari Extension. When I run it from localhost in a regular Safari page all works, but when I run the same code in the context of an extension routing is not working.
I have spent some time tracing the Angular routing code in both scenarios (which is kind of fun) to try to find differences but have not been able to except for the redirect path (http://localhost/.../helloworld.html#/login vs. safari-extension://com.yourcompany.../helloworld.html#/login). Hitting the extension path directly in a browser window renders the same thing I'm seeing in the extension - basic AngularJS functionality is working (updating "sometext") but routing is not (the route specification doesn't replace the ng-view). No errors are being thrown.
helloworld.html
<!DOCTYPE html>
<html ng-app="obApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
Write some text in textbox:
<input type="text" ng-model="sometext" />
<h1>Hello {{ sometext }}</h1>
<div ng-view></div>
</body>
</html>
app.js
var obApp = angular.module('obApp', ['ngRoute', 'obControllers']);
obApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.html',
controller: 'LoginCtrl'
}).
otherwise({
redirectTo: '/login'
});
}]);
controllers.js
var obControllers = angular.module('obControllers', []);
obControllers.controller('LoginCtrl', ['$scope',
function($scope) {
// do stuff
}
]);
login.html
HERE I AM!
UPDATE:
It has something to do with the XHR request to get the routing page - from a regular web page the XHR.send() returns readyState=4 and status=200, from the extension it returns readyState=3 and status=0 (when it moves to readyState=4 status is still 0). It makes me suspect cross-origin XMLHTTPRequest restrictions but it's definitely requesting the page from the exact same domain (safari-extension://...)
HELP! :-)
I'm answering my own question here because it looks like this is how I'm going to need to proceed, but if someone has a better idea please let us know.
I've hacked the AngularJS core library (ugh) to return a status of 200 if there is a response to the request under the condition of the location protocol being "safari-extension" (otherwise return 404). The authors did the same for the condition of the protocol being "file" because it also always returns a 0 status in that case too so I don't feel too bad.
I'll see if I can bring Google's attention to it, either so they can enlighten me as to what I'm missing or else possibly have them add it in a future rev.
UPDATE:
Looking at the history of this code in the GitHub project I see that they implemented the identical fix I was going to propose in a later version of AngularJS. :-)
I'm trying to write an AngularJS client side only app.
I thought I might be able to load it from chrome by typing in the address bar:
file:///C:/path/to/project//index.html
I also tried to invoke chrome with the flag --allow-file-access-from-files
Unfortunatly nothing happened - just the busy sign on the tab name is working.
Why does is not loading my app?
I'm using the following code:
index.html:
<!doctype html>
<html ng-app="app">
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
<script src="app.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<h1>Index</h1>
<a id="link" href="/login">Go to login</a>
<ng-view></ng-view>
</body>
</html>
app.js:
angular.module('app', ['ngRoute']).
config(function($routeProvider) {
$routeProvider.
when('/', {controller: HomeCtrl, templateUrl: 'app.html'}).
when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
otherwise({redirectTo:'/'});
});
function HomeCtrl($scope) {
$scope.numbers = [1,2,3,4,5];
}
function LoginCtrl($scope) {
}
app.html:
<div ng-controller="HomeCtrl">
<ul ng-repeat="number in numbers" >
<li>{{number}}</li>
</ul>
</div>
Edit:
2 possible solutions:
Close all chrome instances and run from command line: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow-file-access
Run Firefox which does not have this restriction (Like #GeekBoy mentioned)
As far as I know google chrome does not allow javascripts to be run from file system. But I did a quick google search and found this. Might be useful
Link
On the flipside you can use firefox. Firefox doesn't have such restrictions as far as I know
Try changing the following lines:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
to
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
I think since you're using a file-based way to get at index.html, it's assuming the // also points to a local system resource. By specifically indicating http://, it will look at the actual locations.
I know that this is an old question but for anyone that might still be interested, here is a small project that demonstrates how to write an angularjs client-side app. It is a complete AngularJS 1.63 single page application with routing that does not need a web server: https://github.com/jlinoff/aspa-nows.
There were two key challenges to getting it working: getting the the page href references right because of the newly introduced default hash prefix: ! (see aa077e8 for details), and embedding the template HTML code into index.html as ng-template scripts to avoid CORS errors. Once those fixes were made, it worked as expected.
The project README.md explains what needed to be done in detail and the full source code is available.
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