Using Angular to authenticate users API

Question

I am building a web application in Angular ( Im new to Angular).

I building a form to pass new user info to the third party software via API end point.

to post data I need to pass name(new user) email(new user) user_key(mine) and api_key (changes evry hour)

To get the new api_key I need to Post

POST: https://pi.pardot.com/api/login/version/3
message body: email=<email>&password=<password>&user_key=<user_key>

and this returns

<rsp stat="ok" version="1.0">
    <api_key><api_key here></api_key>
</rsp>

Once I have the new Key I can pass it with the form post to post data.

Question

I think Ill need to have a function that runs before the Posting of data that dose the post to get the new api_keyand changes the api_key variable on my new user post.

so the main question is how do I do this with angular, I have added my current post controller bellow that post the new user data.

My controller

// submit button controller POST
// =============================================================================
FirstModule.controller('formController', function ($scope, $http) {
    $scope.formData = {};

    $scope.processForm = function (Fname, Lname, email) {
        var data = {
            Fname: $scope.formData.Fname,
            Lname: $scope.formData.Lname,
            email: $scope.formData.email,
            api_key: 'changes every hr', //needs to be dynamic
            user_key: 'my key'
        };

//Call the services
        $http.post('https://some api.com/api/prospect/version/4/do/create', JSON.stringify(data)).then(function (response) {
            if (response.data)
                $scope.formData = "Post Data Submitted Successfully!";

        }, function (response) {
            $scope.formData = "Post Data Submitted Failed";
            $scope.statusval = response.status;
            $scope.statustext = response.statusText;
            $scope.headers = response.headers();
        });
    };
});

My form

<form name="myForm" id="signup-form" class="col-sm-8 col-sm-offset-2"
                  ng-submit="processForm()"
                  ng-click="postdata(formData)">

                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>

So this part is Ok, but how do I run a function before this runs so I get the latest api_key ? and more importantly how can I do it safe ?

The API is Pardot

For security should I place all; API request on a backed script maybe node ?

score 0 · Answer 1 · answered Jun 07 '17 at 11:13

0

you can try to use app.run() and write the function in that. app.run() will always run before your controller. Here is one link you can check AngularJS app.run() documentation?

answered Jun 07 '17 at 11:13

Nitin Saini

11
3

Thanks ill look into this, So i build a function to get the api_key save then insert that api_key in my post controller ? – Beep Jun 07 '17 at 12:01
Yes, One more important thing to notice here is if you are maintaining an user session in your app then you can store that in the session and write a method in your app.run() like $scope.sessionDetails(); – Nitin Saini Jun 08 '17 at 13:36

Using Angular to authenticate users API

1 Answers1