Hướng dẫn: Sử dụng API web cổng thông tin

Bài viết
09/20/2024

Trong hướng dẫn này, bạn sẽ thiết lập một trang web và mẫu web tùy chỉnh, trong đó sử dụng API web để đọc, ghi, cập nhật và xóa các bản ghi khỏi bảng người liên hệ.

Lưu ý

Bạn có thể thay đổi tên cột hoặc sử dụng một bảng khác trong khi làm theo các bước trong ví dụ này.

Bước 1. Tạo thiết đặt trang web

Trước khi có thể sử dụng API Web cổng thông tin, bạn phải bật thiết đặt trang web cần thiết với ứng dụng Quản lý cổng thông tin. Các mục thiết đặt trang web phụ thuộc vào bảng mà bạn muốn sử dụng khi tương tác với API web.

Khởi động ứng dụng Quản lý cổng thông tin.
Trên ngăn bên trái của ứng dụng Quản lý cổng thông tin, chọn Thiết đặt trang web.
Chọn Mới.
Trong hộp Tên, hãy nhập Webapi/contact/enabled.
Trong danh sách Trang web, hãy chọn bản ghi trang web của bạn.
Trong hộp Giá trị, hãy nhập true.
Chọn Lưu & Đóng.
Chọn Tạo mới.
Trong hộp Tên, hãy nhập Webapi/contact/fields.
Trong danh sách Trang web, hãy chọn bản ghi trang web của bạn.
Trong hộp Giá trị, hãy nhập
tên, họ, tên đầy đủ, địa chỉ email1, điện thoại1
Chọn Lưu & Đóng.
Chọn Tạo mới.
Trong hộp Tên, hãy nhập Webapi/error/innererror.
Trong danh sách Trang web, hãy chọn bản ghi trang web của bạn.
Trong hộp Giá trị, hãy nhập true.
Chọn Lưu & Đóng.
Xác minh thiết đặt trang web cho API Web.

Bước 2. Đặt cấu hình quyền

Bạn sẽ phải định cấu hình quyền để người dùng có thể sử dụng tính năng API Web. Trong ví dụ này, bạn sẽ cần thiết lập hoặc tạo vai trò web mới sử dụng API web, sau đó thêm quyền của bảng cho bảng Người liên hệ và liên kết quyền của bảng đó với vai trò web, rồi cuối cùng gán vai trò web cho người dùng để cho phép họ sử dụng API web.

Lưu ý

API web tuân theo các quyền của bảng đến từ ngữ cảnh vai trò web của người dùng đã xác thực hoặc vai trò web ẩn danh. Hãy cân nhắc xem liệu người dùng của bạn đã có vai trò web có quyền truy cập vào các bảng cụ thể trong trang web mà API web cần hay chưa. Bạn không cần tạo thêm vai trò web chỉ để sử dụng API web.

Tạo vai trò web

Nếu hiện tại không có vai trò web có quyền đối với bảng mà bạn đang truy cập thông qua API web hoặc yêu cầu ngữ cảnh truy cập dữ liệu khác, hãy làm theo các bước sau đây để biết cách tạo vai trò web mới và gán quyền của bảng.

Khởi động ứng dụng Quản lý cổng thông tin.
Trên ngăn bên trái, trong phần Bảo mật, hãy chọn Vai trò web .
Chọn Mới.
Trong ô Tên, nhập Người dùng API web (hoặc bất kỳ tên nào phản ánh rõ nhất vai trò của người dùng khi truy cập chức năng này).
Trong danh sách Trang web, hãy chọn bản ghi trang web của bạn.
Chọn Lưu.

Tạo các quyền của bảng

Khởi chạy studio thiết kế Power Pages.
Chọn không gian làm việc Bảo mật .
Trong phần bảo vệ , chọn Quyền bảng.
Chọn Quyền mới.
Trong hộp Tên, hãy nhập Quyền đối với bảng người liên hệ.
Trong danh sách Tên bảng, hãy chọn Người liên hệ (liên hệ).
Trong danh sách Loại quyền truy nhập, hãy chọn Toàn cầu.
Chọn quyền Đọc, Ghi, Tạo và Xóa.
Chọn + Thêm vai trò và chọn vai trò web bạn đã chọn hoặc đã tạo trước đó.
Chọn Lưu & Đóng.

Thêm người liên hệ vào vai trò web

Khởi động ứng dụng Quản lý cổng thông tin.
Trên ngăn bên trái, trong phần Bảo mật, hãy chọn Người liên hệ.
Chọn một địa chỉ liên hệ mà bạn muốn sử dụng trong ví dụ này cho API Web.

Lưu ý

Địa chỉ liên hệ này là tài khoản người dùng được sử dụng trong ví dụ này để kiểm tra API Web. Đảm bảo chọn đúng địa chỉ liên hệ trong cổng thông tin của bạn.
Chọn Có liên quan>Vai trò web.
Chọn Thêm vai trò web hiện có.
Chọn vai trò Người dùng API web được tạo trước đó.
Chọn Thêm.
Chọn Lưu & Đóng.

Bước 3. Tạo trang web

Bây giờ bạn đã bật API Web và định cấu hình quyền của người dùng, hãy tạo một trang web với mã mẫu để xem, chỉnh sửa, tạo và xóa bản ghi.

Khởi chạy studio thiết kế Power Pages.
Trong không gian làm việc Trang, hãy chọn + Trang.
Trong hộp thoại Thêm trang,
Trong hộp Tên, hãy nhập WebAPI và chọn Bắt đầu từ bố cục trống.
Chọn Thêm.
Chọn tùy chọn Chỉnh sửa mã ở góc trên bên phải.
Chọn Mở Visual Studio Code.

Sao chép đoạn mã mẫu sau và dán vào giữa các thẻ <div></div> của phần trang.

    <!-- Sample code for Web API demonstration -->
<style>
    #processingMsg {
        width: 150px;
        text-align: center;
        padding: 6px 10px;
        z-index: 9999;
        top: 0;
        left: 40%;
        position: fixed;
        -webkit-border-radius: 0 0 2px 2px;
        border-radius: 0 0 2px 2px;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        display: none;
    }

    table td[data-attribute] .glyphicon-pencil {
        margin-left: 5px;
        opacity: 0;
    }

    table td[data-attribute]:hover .glyphicon-pencil {
        opacity: 0.7;
    }
</style>

<script>
  $(function() {
    //Web API ajax wrapper
    (function(webapi, $) {
      function safeAjax(ajaxOptions) {
        var deferredAjax = $.Deferred();
        shell.getTokenDeferred().done(function(token) {
          // Add headers for ajax
          if (!ajaxOptions.headers) {
            $.extend(ajaxOptions, {
              headers: {
                "__RequestVerificationToken": token
              }
            });
          } else {
            ajaxOptions.headers["__RequestVerificationToken"] = token;
          }
          $.ajax(ajaxOptions)
            .done(function(data, textStatus, jqXHR) {
              validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
            }).fail(deferredAjax.reject); //ajax
        }).fail(function() {
          deferredAjax.rejectWith(this, arguments); // On token failure pass the token ajax and args
        });
        return deferredAjax.promise();
      }
      webapi.safeAjax = safeAjax;
    })(window.webapi = window.webapi || {}, jQuery)
    // Notification component
    var notificationMsg = (function() {
      var $processingMsgEl = $('#processingMsg'),
        _msg = 'Processing...',
        _stack = 0,
        _endTimeout;
      return {
        show: function(msg) {
          $processingMsgEl.text(msg || _msg);
          if (_stack === 0) {
            clearTimeout(_endTimeout);
            $processingMsgEl.show();
          }
          _stack++;
        },
        hide: function() {
          _stack--;
          if (_stack <= 0) {
            _stack = 0;
            clearTimeout(_endTimeout);
            _endTimeout = setTimeout(function() {
              $processingMsgEl.hide();
            }, 500);
          }
        }
      }
    })();
    // Inline editable table component
    var webAPIExampleTable = (function() {
      var trTpl = '<% _.forEach(data, function(data){ %>' +
        '<tr data-id="<%=data.id%>" data-name="<%=data.fullname%>">' +
        '<% _.forEach(columns, function(col){ %>' +
        '<td data-attribute="<%=col.name%>" data-label="<%=col.label%>" data-value="<%=data[col.name]%>">' +
        '<%-data[col.name]%><i class="glyphicon glyphicon-pencil"></i>' +
        '</td>' +
        '<% }) %>' +
        '<td>' +
        '<button class="btn btn-default delete" type="submit"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>' +
        '</td>' +
        '</tr>' +
        '<% }) %>';
      var tableTpl = '<table class="table table-hover">' +
        '<thead>' +
        '<tr>' +
        '<% _.forEach(columns, function(col){ %>' +
        '<th><%=col.label%></th>' +
        '<% }) %>' +
        '<th>' +
        '<button class="btn btn-default add" type="submit">' +
        '<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add Sample Record' +
        '</button>' +
        '</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>' + trTpl + '</tbody>' +
        '</table>';
      function getDataObject(rowEl) {
        var $rowEl = $(rowEl),
          attrObj = {
            id: $rowEl.attr('data-id'),
            name: $rowEl.attr('data-name')
          };
        $rowEl.find('td').each(function(i, el) {
          var $el = $(el),
            key = $el.attr('data-attribute');
          if (key) {
            attrObj[key] = $el.attr('data-value');
          }
        })
        return attrObj;
      }
      function bindRowEvents(tr, config) {
        var $row = $(tr),
          $deleteButton = $row.find('button.delete'),
          dataObj = getDataObject($row);
        $.each(config.columns, function(i, col) {
          var $el = $row.find('td[data-attribute="' + col.name + '"]');
          $el.on('click', $.proxy(col.handler, $el, col, dataObj));
        });
        //User can delete record using this button
        $deleteButton.on('click', $.proxy(config.deleteHandler, $row, dataObj));
      }
      function bindTableEvents($table, config) {
        $table.find('tbody tr').each(function(i, tr) {
          bindRowEvents(tr, config);
        });
        $table.find('thead button.add').on('click', $.proxy(config.addHandler, $table));
      }
      return function(config) {
        var me = this,
          columns = config.columns,
          addHandler = config.addHandler,
          deleteHandler = config.deleteHandler,
          $table;
        me.render = function(el) {
          $table = $(el).html(_.template(tableTpl)({
            columns: columns,
            data: me.data
          })).find('table');
          bindTableEvents($table, {
            columns: columns,
            addHandler: addHandler,
            deleteHandler: deleteHandler
          });
        }
        me.addRecord = function(record) {
          $table.find('tbody tr:first').before(_.template(trTpl)({
            columns: columns,
            data: [record]
          }));
          bindRowEvents($table.find('tbody tr:first'), config);
        }
        me.updateRecord = function(attributeName, newValue, record) {
          $table.find('tr[data-id="' + record.id + '"] td[data-attribute="' + attributeName + '"]').text(newValue);
        }
        me.removeRecord = function(record) {
          $table.find('tr[data-id="' + record.id + '"]').fadeTo("slow", 0.7, function() {
            $(this).remove();
          });
        }
      };
    })();
    //Applicaton ajax wrapper 
    function appAjax(processingMsg, ajaxOptions) {
      notificationMsg.show(processingMsg);
      return webapi.safeAjax(ajaxOptions)
        .fail(function(response) {
          if (response.responseJSON) {
            alert("Error: " + response.responseJSON.error.message)
          } else {
            alert("Error: Web API is not available... ")
          }
        }).always(notificationMsg.hide);
    }
    function loadRecords() {
      return appAjax('Loading...', {
        type: "GET",
        url: "/_api/contacts?$select=fullname,firstname,lastname,emailaddress1,telephone1",
        contentType: "application/json"
      });
    }
    function addSampleRecord() {
      //Sample data to create a record - change as appropriate
      var recordObj = {
        firstname: "Willie",
        lastname: "Huff" + _.random(100, 999),
        emailaddress1: "Willie.Huff@contoso.com",
        telephone1: "555-123-4567"
      };
      appAjax('Adding...', {
        type: "POST",
        url: "/_api/contacts",
        contentType: "application/json",
        data: JSON.stringify(recordObj),
        success: function(res, status, xhr) {
          recordObj.id = xhr.getResponseHeader("entityid");
          recordObj.fullname = recordObj.firstname + " " + recordObj.lastname;
          table.addRecord(recordObj);
        }
      });
      return false;
    }
    function deleteRecord(recordObj) {
      var response = confirm("Are you sure, you want to delete \"" + recordObj.name + "\" ?");
      if (response == true) {
        appAjax('Deleting...', {
          type: "DELETE",
          url: "/_api/contacts(" + recordObj.id + ")",
          contentType: "application/json",
          success: function(res) {
            table.removeRecord(recordObj);
          }
        });
      }
      return false;
    }
    function updateRecordAttribute(col, recordObj) {
      var attributeName = col.name,
        value = recordObj[attributeName],
        newValue = prompt("Please enter \"" + col.label + "\"", value);
      if (newValue != null && newValue !== value) {
        appAjax('Updating...', {
          type: "PUT",
          url: "/_api/contacts(" + recordObj.id + ")/" + attributeName,
          contentType: "application/json",
          data: JSON.stringify({
            "value": newValue
          }),
          success: function(res) {
            table.updateRecord(attributeName, newValue, recordObj);
          }
        });
      }
      return false;
    }
    var table = new webAPIExampleTable({
      columns: [{
        name: 'firstname',
        label: 'First Name',
        handler: updateRecordAttribute
      }, {
        name: 'lastname',
        label: 'Last Name',
        handler: updateRecordAttribute
      }, {
        name: 'emailaddress1',
        label: 'Email',
        handler: updateRecordAttribute
      }, {
        name: 'telephone1',
        label: 'Telephone',
        handler: updateRecordAttribute
      }],
      data: [],
      addHandler: addSampleRecord,
      deleteHandler: deleteRecord
    });
    loadRecords().done(function(data) {
      table.data = _.map(data.value, function(record){
        record.id = record.contactid;
        return record;
      });
      table.render($('#dataTable'));
    });
  });
</script>
<div id="processingMsg" class="alert alert-warning" role="alert"></div>
<div id="dataTable"></div>

Dán mã.

Chọn CTRL-S để lưu mã.
Trong studio thiết kế, hãy chọn Đồng bộ hóa để cập nhật trang web bằng các chỉnh sửa code.

Bước 4. Sử dụng API web để ghi, xem, chỉnh sửa, tạo và xóa

Cách kiểm tra chức năng API Web:

Chọn Bản xem trước rồi chọn Máy tính để bàn.
Đăng nhập vào trang web của bạn bằng tài khoản người dùng đã được gán vai trò Người dùng API web đã tạo trước đó.
Truy cập trang web WebApi đã tạo trước đó.
Chọn Thêm bản ghi mẫu để thêm bản ghi mẫu từ tập lệnh.
Chọn một trường. Trong ví dụ này, chúng tôi đã chọn Email để thay đổi địa chỉ email của một liên hệ.
Chọn biểu tượng Xóa để xóa bản ghi.

Bây giờ bạn đã tạo một trang web với một mẫu để ghi, chỉnh sửa, tạo và xóa bản ghi, bạn có thể tùy chỉnh các biểu mẫu và bố cục.

Bước tiếp theo

Soạn yêu cầu HTTP và xử lý lỗi

Chia sẻ qua