Call Your API Maker APIs from a Web or Mobile App: Tokens, CORS, Errors and Types

Intro

0:00 Your APIs, called from a web page and from a phone. The web shop of Calm Home, in plain JavaScript : the token of the app, pages of products, a customer who signs in, a token that expires, errors under their fields, and the sites allowed to call.

An app and its backend, the usual way

0:17 An app usually waits for its backend : an endpoint written for every screen, tokens signed, checked and refreshed by hand, CORS to configure in every service, an error format that changes from one endpoint to the next, and types copied into the frontend by hand. With API Maker, the APIs are there as soon as the tables are, one token API gives and refreshes every token, every answer has the same envelope, and the types come from the schemas.

0:47 In this video : an API user for the app, its token, pages of products, a customer who signs in, a token that expires, errors under their fields, allowed origins, types, files and live data, and the same calls from a phone.

The shop

1:03 The shop is one HTML page, on an address of its own : no framework, no build, only fetch. It calls API Maker, on another address : the products of MongoDB, the orders of MySQL, and the custom API Cart Quote, of video fifteen. At the bottom of the page, every call it makes : its address, the tokens it carries, and its status.

The app is an API user

1:28 An app calls API Maker as an API user. API User Permissions : Shop app, user name shop_app. Its password is a key of the default secret, and it has one group. Security, API Group Permissions, and the group Shop app : two instances, two databases and two tables. On products, one API : Get all. And one custom API : Cart Quote. Shop Token, below it, is public : it needs no group.

The token of the app

1:59 A web page can not keep a secret : anyone can read what it holds. So the password of the app stays on the server. Shop Token is a public custom API. It reads the password from the secret, and asks for a token of shop_app : forty five seconds here, to see it expire, three days by default. The page calls Shop Token once, then sends the token in x-am-authorization, on every call.

Pages of products

2:26 The page opens. Its first call, Shop Token : two hundred, the token of the app. Then the first page of products, with that token : six of thirty six. Next : the second page. A page of products is one GET, with its query. select : the name, the price and the category, and the id comes with them. sort : by name. limit : six rows, and skip : the rows of the pages before.

2:55 With getTotalCount, the answer brings totalCount, thirty six, next to the rows : six pages.

A customer signs in

3:02 Now a customer. Kabir types his email, and his password. Sign in : the token API, with the name of the auth provider customer_login, checks them and gives the token of the person. Then his orders, with both tokens : the row scope of video twenty six keeps only his, and a post-hook writes their status in words.

A token that expires

3:23 Forty five seconds later, the token of the app has expired. Next : four hundred and one. The page sends its refresh token to the token API, and gets a new token. It calls again : two hundred. The customer sees nothing. One function of the page does this, for every call.

Errors under their fields

3:44 The cart is priced by Cart Quote. A quantity of zero, an email without its domain. Get the price : four hundred, and every error in one answer, each with its field : email, and items dot quantity. The page puts each message under the input of its field. Two lamps, the right email, a coupon, and the price : the subtotal, the discount, the shipping and the total.

Origins

4:11 The page and API Maker are on two addresses : for the browser, two origins. Before a call that carries a token header, the browser asks first, with OPTIONS. API Maker answers : any origin, these methods, and the headers asked for. So the calls go through, from any site, and the tokens decide what each one may do. To let only your own sites call : Operations, Sandbox Settings, Allowed Origins.

4:40 Add New, the address of the shop in production, and Save. From then on, a page on any other address gets four hundred and three, before anything runs : this page, here. A server or a phone app sends no origin : the list does not apply to them. It keeps the pages of other sites away from your APIs.

Types, files and live data

5:03 In a TypeScript app, the types come from the schemas too. Generated Interfaces : an interface for every table, and IProducts for the products of the catalog. Download the file, and save it in the app with the extension d.ts. Pick the fields the page selects, and the compiler checks every row the page reads. A file goes the same way : a FormData with a field named files, sent with fetch.

5:30 No content type : the browser writes it, with its boundary. Import Stock, of video sixteen, checks the file before its code runs : a PDF gets four hundred. And live data is one WebSocket on the port of the APIs, with the same two tokens : video twenty two.

From a phone

5:49 A phone app makes the same calls, with the same tokens. In API Testing, the instance mongodb, the database catalog, the table products, and Get all. The Integrations tab writes this call in your language : dozens of languages and libraries. For iOS, Swift, with URLSession. And for Android, Kotlin, with OkHttp. The token goes in place of the word token.

Good habits

6:22 Good habits, for every app : the password of an API user stays in the secret, never in an app : a public custom API hands out its token. One API user for each app, with a group as small as its screens. What belongs to a person needs the token of that person, and a row scope. Your own sites in Allowed Origins. And HTTPS in front of the server : video sixty one.

Recap

6:48 To sum up. An app is an API user, with a small group. Its token comes from a public custom API : the password stays in the secret. Pages with select, sort, limit, skip and the total. A person signs in for a token of their own. A four hundred and one is answered with the refresh token. Every error comes with its field. And Allowed Origins lists your sites.

7:15 Next : find your way around the panel. API Maker. Build faster, spend smarter, deliver better.