使用 Angular 验证用户 API

Posted 2023-03-08

【中文标题】使用 Angular 验证用户 API

【英文标题】：Using Angular to authenticate users API

【发布时间】：2017-11-08 15:06:12

【问题描述】：

我正在 Angular 中构建一个 Web 应用程序（我是 Angular 新手）。

我构建了一个表单以通过 API 端点将新用户信息传递给第三方软件。

要发布数据，我需要通过 name(new user) email(new user) user_key(mine) 和 api_key (changes evry hour)

要获得新的api_key，我需要发布

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

这会返回

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

一旦我有了新的密钥，我就可以通过表单发布它来发布数据。

问题

我认为我需要有一个函数在发布数据之前运行，以获取新的 api_key 并更改我的新用户帖子上的 api_key 变量。

所以主要问题是我如何使用 angular 来做到这一点，我在下面添加了我当前的 post 控制器来发布新的用户数据。

我的控制器

// 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();
        );
    ;
);

我的表单

<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>

所以这部分没问题，但是我如何在它运行之前运行一个函数，以便获得最新的 api_key ？更重要的是，我怎样才能安全地做到这一点？

API 是Pardot

为了安全，我应该全部放置；支持脚本上的 API 请求可能是节点？

【参考方案1】：

您可以尝试使用 app.run() 并在其中编写函数。 app.run() 将始终在您的控制器之前运行。这是您可以查看的一个链接AngularJS app.run() documentation?

【讨论】：

谢谢我看看这个，所以我构建了一个函数来获取 api_key 保存然后将该 api_key 插入我的后控制器？

是的，这里要注意的更重要的一点是，如果您在应用程序中维护用户会话，那么您可以将其存储在会话中并在 app.run() 中编写一个方法，例如 $scope .sessionDetails();