I am using ng-token-auth with angular/ionic that connects to a rails api. I am currently working on the login page. I have the following form in the code:
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<input type="email"
name="email"
id="email"
placeholder="Email"
ng-model="loginForm.email"
required="required" />
<input type="password"
name="password"
id="password"
placeholder="Password"
ng-model="loginForm.password"
required="required" />
<button type="submit" class="button button-block button-positive">Sign in</button>
</form>
The submitLogin function succesfully sends a post request to:
POST http://localhost:8100/api/auth/sign_in
The problem is that this is on the ionic server. The rails app is located at localhost:3000. How do I get the post request to go to that URL. Since almost every single angular api ever created will be sending requests to a different server, I have to imagine this is included somehow.
You have to change default apiUrl in your app.js file (or whatever you called it) using .config
angular.module('myApp', ['ng-token-auth'])
.config(function($authProvider) {
$authProvider.configure({
apiUrl: 'http://localhost:3000'
});
});
Here is the link to all possible configuration options for
ng-token-auth
Related
How can I implement
<form method="post" action="https://accept.authorize.net/customer/addPayment">
<input type="hidden" name="token" value="pfGaUNntEKMGfyWPmI4p+Bb4TJf2F0NCoCBp3cOXB7"/>
<input type="submit" value="Manage my payment and shipping information"/>
</form>
in React JS? I have tried to implement it, but it did not redirect it to the form. I am calling the token via an API and also the action link.
I am trying to integrate paypal as a payment option. As I have done it (which works) is not using any paypal snd but just the simple html form. Ive been looking at it for a while and perhaps my question is stupid, but I don't understand what the difference is to just using the html form or (at paypal developer provided sdk)? Could someone explain please?
Also, I am trying to write a backend route with nodes/express. I set up the notify url for paypal which - as I understand- will return to me an object containing data (what was paid, the users paypal id etc.).
so what I did was:
1. set up notify url which goes to the (angular state) /summary. - Im not sure if it perhaps should be the backend url and not the state.
2. then I have the fronted http call (as I also want to display a purchase summary to customer after he paid at paypal).
3. route in the backend to post to db.
I have been looking a lot a different documentation and tutorials but don't quite understand it and if anyone would have a few min explaining it to me, that would be amazing!! Thank you!
app.controller('summaryCtrl', function($scope, $http){
return $http.post('api/order/summary', {???})
.then(function(paypalObj){
$scope.paypalObj=payppalObj;
})
// here I am not sure what Im sending/how do I know what the object Im getting back from paypal named)
})
router.post('/summary', function(req, res, next){
console.log(req.body,res, 'paypal')
User.findById(req.user.id)
....
Order.create
...
})
html form:
<form method="POST" accept-charset="utf-8" action="https://www.sandbox.paypal.com/xxx/xxx" name="pp" id="pp">
<input type="hidden" name="cmd" value="_xclick" class="validate">
<input type="hidden" name="business" value="name#yahoo.com" required="required">
<input type="hidden" name="currency_code" value="USD" required="required">
<input type="hidden" name="quantity" value="{{quantity}}" required="required">
<input type="hidden" name="amount" value="{{price}}" required="required">
<input type="hidden" name="return" value="http://localhost:1337" required="required">
<input type="hidden" name="cancel_return" value="http://localhost:1337/about" required="required">
<input type="hidden" name="notify_url" value="http://localhost:1337/api/order/summary" required="required">
</form>
insight my angular controller (as Im using angular:
$scope.paypalPay=function(){
$('#pp').get(0).submit()
};
I want to avoid using <form> so instead of
<form action="./login" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="password">
<input type="submit" value="Login">
</form>
I want to use something like
<input type="text" placeholder="Nombre de usuario" data-ng-model="username">
<input type="password" placeholder="Contraseña" data-ng-model="password">
<a data-ng-click="doLogin()">Login</a>
And in controller:
$scope.doLogin=function(){
var url = '/login?username=' + $scope.username + '&password=' + $scope.password;
$http.post(url).then(function(msg){
console.log(msg);
});
}
The request is sent to Spring framework and work perfectly when I use form,but when I use Angular to perform same action it gives me an error POST http://localhost:8080/login?username=admin&password=admin 404 (Not Found)
What changes I have to do? I would like to have the perfectly the same functionality of submit, as on wrong credentials Spring framework redirects me on another view.
I think that you should not delete the form but change it to a pure angularjs form with a ngSubmit attribute (be sure to delete the action attribute).
Like this :
<form method="post" ng-submit="doLogin()">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="password">
<input type="submit" value="Login">
</form>
Then, in your js controller, your http call is a post call with parameters passed like a get call (param1=value1¶m2=...), change your call to pass login parameters in post.
$scope.doLogin=function(){
var url = '/login';
$http.post(url, {username: $scope.username, password: $scope.password}).then(function(msg){
console.log(msg);
});
}
This way, your angularjs form will behave the same way than your previous code.
So, today I make a simple login page with AngularJS.
And the purpose of this login that I want to store the email from form into session.
This is my login:
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="data.email" required>
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password" required>
</label>
If we can refer to PHP programming language, you can use $_SESSION['email'] and you store the email into the session.
I already read several article about $SessionStorage Sample Example
What's the best approach to do store session in AngularJS ?
thanks :)
You can also try to make service based on window.sessionStorage or window.localStorage to keep state information between page reloads. I use it in the web app which is partially made in AngularJS and page URL is changed in "the old way" for some parts of workflow. Web storage is supported even by IE8. Here is angular-webstorage for convenience.
I am making a POST request to a RESTFUL api and the only way I can pass the parameters is if I add them into the URL used in the forms 'action' parameter. As soon as I take those parameters and put them down into the form's body component the request no longer works. My question is how do I use the inputs within the form to define the request parameters instead of the embedding the parameters into the action URL?
I do notice that when I submit the request the request body parameters show up, but the actual request fails saying that the parameters are not there.
Here is the HTML:
<form target="hiddenIframe" method="POST" action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain" enctype="multipart/form-data">
<input type="text" name="instanceId" value="5823" />
<input type="text" name="name" value="myTestQ1" />
<input type="text" name="docType" value="file" />
<input id="myFileName" type="file" name="data" />
<input type="submit"/>
</form>
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;" />
As you can see the action in the form tag is very long and is not dynamic... I would like to only have "/rest/bpm/wle/v1/process/" there, but when I do the upload fails.
I'd use some Javascript. Add an onchange to all the mandatory input fields. And the change method you'll be calling can update your action url with the new data from the form field.
Something like:
<input type="text" name="instanceId" value="5823" onchange="updateInstanceID()" id="instanceid" />
action="/rest/bpm/wle/v1/process/5853?action=addDocument&name=test123&docType=file&parts=none&accept=application/json&override-content-type=text/plain"
Now, your Javascript should have that method.
function updateInstanceID() {
var val = document.getElementById("instanceid").value;
var form = document.forms[0]; // assuming only one form on the page.
....
}
Now you can access your form.action field and update it accordingly.