onepost-ui - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "onepost-ui",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "A prebuilt UI you can use along with the OnePost API",
		@@ -13,2 +13,12 @@ "main": "dist/OnepostUI.js",
		"private": false,
		"keywords": [
		"onepost",
		"onepost-ui",
		"twitter",
		"facebook",
		"instagram",
		"social",
		"api",
		"ui"
		],
		"presets": [
		@@ -15,0 +25,0 @@ "@babel/preset-typescript"

README.md

		@@ -5,19 +5,90 @@ # OnepostUI

		Using the OnePost API, you are able to build a custom UI yourself to fit your application. However, if you're building a web appliation and looking for an existing UI that is built to work with the Onepost API directly, then this is it!
		If you're using the OnePost API to build a web application, use this prebuilt UI to get up and running as quickly as possible with a beautiful responsive form.

		1. Pick your social accounts (Twitter, Facebook, or Instagram) you want to post to.
		2. Add your post's text and/or image. You can preview what your post will look for each social network as you type.
		3. Publish your post immediately to all accounts when your post is perfect (or schedule for a later time).

		![](https://user-images.githubusercontent.com/69064/109696613-3ec0df80-7b5b-11eb-8f4f-30d0f947fd64.png)

		This UI is completely responsive and easy to use:
		This UI was designed to work with the [OnePost API](https://rapidapi.com/onepost/api/onepost1) hosted on RapidAPI.

		1. Pick from your list of "Authorized pages" (aka your authorized Twitter, Facebook, or Instagram accounts)
		2. Add your post's text or image. Preview what your post will look for each social network.
		3. When you're ready, you can post immediately or schedule for a later date.

		## Installation

		Install using yarn:

		```shell
		yarn add onepost-ui
		```

		Then, import to get access to `OnepostUI`:

		```javascript
		import OnepostUI from "onepost-ui";
		```

		## Usage

		Take a look at [demo/index.html](https://github.com/akdarrah/onepost-ui/blob/master/demo/index.html) to see a working example.

		### Styles

		OnepostUI makes use of an `iframe` to render the form. Make sure your `iframe` is styled nicely using CSS. We also use [iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer) to make sure the content of the form is always visible.

		```css
		iframe {
		border: none;
		width: 1px;
		min-width: 100%;
		}
		```

		### HTML

		OnepostUI needs to know where it should be rendered. Add an HTML element somewhere in your page to use as the `target` HTML node:

		```html
		<div id="onepost-demo"></div>
		```

		### Javascript

		You can get your `publicKey` by [registering for a user account on our website](https://www.getonepost.com/). Then, use the [OnePost API](https://rapidapi.com/onepost/api/onepost1) to add at least one `Provider`, `Authorization`, and `AuthorizedPage` record to your account.

		Add this Javascript to your page to see the form in action:

		```javascript
		var target = document.getElementById("onepost-demo");
		var publicKey = "pk-cbe628a0-5538-0139-b375-76de50b5e55c";
		var authorizedPageIds = [13, 14, 15];

		var onSuccess = function(data){
		console.log("success!", data);
		}

		var onFailure = function(error){
		console.log("failure...", error.response);
		}

		var onepost = new OnepostUI(target, publicKey, authorizedPageIds, {
		onSuccess: onSuccess,
		onFailure: onFailure
		});

		onepost.attach();
		```

		### Server-side Processing

		When registering for a OnePost user account, you will be given a `secret_key` and a `public_key`. It is extremely important that your `secret_key` always remains a secret. Therefore, you must not use the `secret_key` in the frontend of your website where it could be exposed to users. As a result, OnepostUI uses your `public_key` for authentication.

		When the form is successfully submitted, a `PostIntent` record will be created with a `token` (you have access to this token in the `onSuccess` callback function). When you receive the token, you can submit a request to your web application for server side processing (where it is safe to use your `secret_key`).

		Use the [Get a Post Intent endpoint](https://rapidapi.com/onepost/api/onepost1?endpoint=apiendpoint_9476022d-7974-49e0-8d84-aefbd3105894) along with the token from the frontend to fetch the `PostIntent` data. WARNING: It is extremely important and highly recommend that you compare the `authorized_page_ids` of this record with the `AuthorizedPage`s the user is allowed to post to. Because of the nature of this architecture, it is possible the user could have modified (or added) an `AuthorizedPage` ID they should not have access to (resulting in posting to someone else's account).

		Once you are absolutely sure the `authorized_page_ids` are correct and valid, use the [Create a Post endpoint](https://rapidapi.com/onepost/api/onepost1?endpoint=apiendpoint_7cae6f56-d9c9-4d9c-8c6f-51d0feccb598) along with your token to create a new `Post` record (See the "With Post Intent Token" Request body example).

		## Development

		After checking out the repo, run `yarn install` to install dependencies. Then, run `yarn test` to run the tests. To build the project onto your local machine, run `gulp`.
		After checking out the repo, run `yarn install` to install dependencies. Then, run `yarn test` to run the tests. To build the project onto your local machine, run `gulp`. Finally, run `npm publish` to publish a new version to npm.

		@@ -24,0 +95,0 @@ ## Contributing

onepost-ui - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics