Skip to content

Commit 6de899c

Browse files
committed
OAuth instructions
1 parent 1eccde2 commit 6de899c

File tree

1 file changed

+23
-10
lines changed

1 file changed

+23
-10
lines changed

README.md

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,19 @@ const publishRequest = await webflow.sites.publish(site_id, {
7676

7777
## OAuth
7878

79-
To implement OAuth, you must register a Webflow App in your Workspace.
79+
To implement OAuth, you must register a Webflow App in your Workspace with the "Data CLient" building block and get its client ID and secret.
8080
See https://developers.webflow.com/apps/data/docs/register-an-app.
8181

82-
### Step 1: Authorize URL
82+
To get the client ID, edit the App in your workspace, go to the Building Blocks tab, and copy the ID from the **Client ID** field.
8383

84-
The first step in OAuth is to generate an Authorization URL. Use this URL
85-
to fetch your Authorization Code. See the [docs](https://docs.developers.webflow.com/v1.0.0/docs/oauth#user-authorization)
86-
for more details.
84+
For full instructions, see https://developers.webflow.com/data/reference/oauth-app.
85+
86+
### Step 1: Generate an authorization URL
87+
88+
The first step in OAuth is to generate an authorization URL.
89+
You direct your users to go to this URL, which prompts them to approve the App's access to specific sites or Workspaces.
90+
91+
This example code generates the authorization URL:
8792

8893
```javascript
8994
import { WebflowClient } from "webflow-api";
@@ -98,10 +103,12 @@ const authorizeUrl = WebflowClient.authorizeURL({
98103
console.log(authorizeUrl);
99104
```
100105

101-
### Step 2: Retrieve your access token
106+
### Step 2: Retrieve an access token
107+
108+
The callback from the authorization URL includes the state that you set in the request and an authorization code.
109+
You can use this authorization code to generate an access token for the App.
102110

103-
Use the `getAccessToken` function and pass in your `client_id`,
104-
`client_secret`, and `authorization_code`.
111+
This example passes the App's client ID and secret and the authorization code to the `getAccessToken` function:
105112

106113
```javascript
107114
import { WebflowClient } from "webflow-api";
@@ -115,14 +122,20 @@ const accessToken = WebflowClient.getAccessToken({
115122

116123
### Step 3: Instantiate the client
117124

118-
Instantiate the client using your `access_token`.
125+
Instantiate the client using the access token:
119126

120127
```javascript
121128
import { WebflowClient } from "webflow-api";
122129

123-
const webflow = WebflowClient({ accessToken });
130+
const webflow = new WebflowClient({ accessToken });
131+
132+
const {sites} = await webflow.sites.list();
133+
134+
console.log(sites);
124135
```
125136

137+
Now the App has access to the sites or Workspaces that the user allowed access to.
138+
126139
## Webflow Types
127140

128141
All of the types are nested within the `Webflow` namespace. Let IntelliSense

0 commit comments

Comments
 (0)