Blogger API

INTRO

A user on Kodular asked about connecting to Blogger using it's API. I dove in deep, and finally reached a solution that works on Kodular and AI2

This guide will take you from the beginning, setting up a blog on blogger, configuring google cloud project and 0Auth, and eventually retrieving and sending data with the Blogger API. I will assume that you have a google account. I did all of the following in a single incognito window in Chromium on Linux (Xubuntu 20.04).

There are lots of images, to help you follow step by step....

I must give credit to Linda Lawton, who provides a blog post and video that helps to de-mystify Google's OAuth requirements for API. These are well worth a read and watch

PART I: Setting up a Blog on Blogger

Enter your password

Click on the 9 dots at the top right, and then click on Blogger

Blogger will open, click on the Create your blog button

Blogger will ask you to sign in

and enter your google account password

Enter a name for your blog

set the url for your blog

Enter a display/user name

and you are done!

The big long number in the url is your blogID. Save this somewhere safe for later use

Save this url somewhere safe for later use.

PART II: Setting up the Blogger API

Now open a new tab and go to: https://developers.google.com/blogger/docs/3.0/using#intro

Scroll down to this area, and click on Get a Key, to get your API key

Enter a name for a new project, or select an existing one (the former is the easier option)

Click on SHOW KEY

Click on the copy icon, and paste the key somewhere safe for later use.

Now scroll to this section on the Blogger API getting started page, and click on Get an OAuth client ID

Select your Blogger project from the drop down list, then click on Next

Enter a name here for your Blogger product.

Important step this, select Desktop app from the dropdown list

Using the copy icons, copy the Client ID and Client Secret to a safe place for later use. You can also download a Client Configuration file if you wish.

Scroll the getting started page again to find the scope for Blogger API. Copy this, and put in a safe place for later use.

Scroll back to this area of the getting started page, and this time click on Credentials Page. This will take you to your Google Cloud Console.

Here you can see where your API key and Client Configuration is stored on the cloud console

Now click on the OAuth consent screen link

Here, we see that the project/app has been published, so everything should be OK...let us test the api and see how it runs...

We will try a simple get the blog information call, for this we will need the blog url we created earlier, and the API key.

Put this url into your browser on a new tab. Obviously (and do the same from now on) replace my data with your data (all my keys have x's in them).

https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://creationsai2.blogspot.com&key=AIzaSyxxxxxxxxxxxxxxxIyMyWed2t6c4vdGVk

It should return the following in your browser window. Note the id which matches the one we saw earlier, and the url. We are connected!

OK then, let us now try to get the authorisation code needed to fetch an access token. This is a GET request so we can use (actually we have to use) the browser for this too

Use this url:

https://accounts.google.com/o/oauth2/v2/auth?client_id=526389630204-03212mrsnxxxxxxxxc58fe6iapjdr5i.apps.googleusercontent.com&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/blogger&response_type=code

If we run this, we get the Authorisation Error page below, not what was expected, given that Blogger API and Google kept telling us that everything was good.....Lets us head back to the google cloud console and change a few things....

Select the OAuth consent screen link again. Click on BACK TO TESTING

and CONFIRM

Now click on + ADD USERS, and enter your google account address

And SAVE (You may find that you need to press SAVE twice.)

Now click on the Enabled APIs and Services link. You can see that Blogger API is "enabled". But I do not believe this is enough!

Head back to the OAuth consent screen again, and scroll down. Enter your google account and then click SAVE AND CONTINUE. (This gets you into a sort of wizard, to help you complete everything)

Now click on ADD OR REMOVE SCOPES

Tick the box next to Blogger API, and then click on Update

You now see Blogger API added to the scopes. Click SAVE AND CONTINUE

We have already added your google account as a user, so just click SAVE AND CONTINUE again and we should be done.

PART III: Getting the Access Token and Refresh Token

OK then, let us now try again to get the authorisation code needed to fetch an access token.

Use this url:

This time around, we get asked to select our google account. Select your account.

Click Continue

Yes, we get an Authorisation code! Click the copy icon, and paste this somewhere safe. We need to use it within the next five minutes!

Now you need to open a Terminal program, in order to run a curl command from the command line. Prepare your curl command as follows, using the codes and information you have collected along the way (the things you have saved somewhere safe)

Run this command:

curl -s --request POST --data "code=4/1AX4XfWg6Hgmw-2mhJFgcERGHsYcDt09w1iE8biDR62tvDYGMxJFHeJstVxE&client_id=526389630204-03212mrsnxxxxxxxxc58fe6iapjdr5i.apps.googleusercontent.com&client_secret=GOCSPXxxxxxxxxTiIKss4lj5rnQJKGb49J&redirect_uri=urn:ietf:wg:oauth:2.0:oob&grant_type=authorization_code" https://accounts.google.com/o/oauth2/token

It should return your access token and your refresh token as follows:

{

"access_token": "ya29.a0ARrdaM92t_NY8q4mdxxxxxxxx9imqxuP87QQHKrDoWw2fgrw0douFYid24wMd_EIGfWjuOgACzzE_gPjjVlz9eTVROMTUZ2kkwM3AfgvLumNxWASUkX4bEBtmo4mHf7oUiX_LOF02KxSs2Vy46yk_2KP-nwX",
"expires_in": 3599,
"refresh_token": "1//03FsZFuoENhtKCgYIARAAGAMSNwF-xxxxxxxxxxo7vgfzDCImOy6XOzNMVu2p-xafOwNL3sTTuJtX1w8YFWRMRp8nzduN1CUAOpQ",
"scope": "https://www.googleapis.com/auth/blogger",
"token_type": "Bearer"

}

Copy the access token (which will only last for one hour) and the refresh token (which is long lived and should not expire) to a safe place.

While we are here, we may as well test the return from the refresh token call:

Run this command:

curl -s --request POST --data 'client_id=526389630204-03212mrsxxxxxxxxxxc58fe6iapjdr5i.apps.googleusercontent.com&client_secret=GOCSPX-xxxxxxxxTiIKss4lj5rnQJKGb49J&refresh_token=1//03FsZFuoENhtKCgYIARAAGAMSNwF-xxxxxxxxxxo7vgfzDCImOy6XOzNMVu2p-xafOwNL3sTTuJtX1w8YFWRMRp8nzduN1CUAOpQ&grant_type=refresh_token' https://accounts.google.com/o/oauth2/token

and it should return a new access token

{
"access_token":
"ya29.a0ARrdaM9cpnkxxxxxxxxY1PPDM0J5sKZ2yKaVrYACiMiN6EtYZ7SyRUhECJvMb7uwgfleViHYOU1SXyBOfVC196_Iu0rdW9r7sGB41rJxOXcJ5C9dGB1Q-HajfdFU2yeGABrIk_rwfQLDu-KyVZeI2VU5LmbLGA",
"expires_in": 3599,
"scope": "https://www.googleapis.com/auth/blogger",
"token_type": "Bearer"
}

We will use this final command, which will need converting to blocks, in our app to get a new access token for use with the API.

PART IV: Working with Blogger API in AppInventor

If you have got this far then well done! We now need to create our AppInventor app and blocks code in order to interact with our blog on Blogger. However, before we do that, I am going to recommend you do some reading. This will give you a good grounding on what you can do with the Blogger API, and help you to understand the blocks code I have used

Don't skip the above.

There is much that could be done, when interacting with Blogger using the API, but I have trimmed this down to @ 7 different activities:

Get an Access Token
- You need the access token to carry out "change" activities on your blog (create/update/delete). If you have a private blog, you will also need the access token for any view/read operations.
Get basic information about your blog
Get all the posts in your blog (but returning only some information on each)
Create a new blog post (CREATE)
Get a specific blog post (READ)
Update and existing blog post (UPDATE)
Delete an existing blog post (DELETE)

First up in the blocks, you are going to need to set some global variables, using all the bits of data you collected in PARTS I - III. you can leave the authToken blank, as this will be set with the first activity.

Get the Access Token

This replicates the last curl command we used in PART III

If all is well, the access token is returned. Set the variable authToken with the content of access_token

Get Blog Information

You more or less already have this data, but it is a useful command to have if working with multiple blogs.

You will see that I have used the fields parameter to return only some parts of the data export. This is good for performance with the API and your app. When the data is returned, I extract it from the JSON and convert it to an AI2 list, for use later.

Get Posts

In my example app, this is the important one, and should be run before attempting any of the CRUD activities. Again, I use the fields parameter to only return a few bits of information, and convert this to an AI2 list on return. This data is used to generate a list of all the Labels in use on the blog, and then for each of the CRUD activities, to allow the user to select a specific post or label. On a busy blog, this could be a big list!

Create Post

Now we get to use the authToken!

You do not have to add a Label to a post if you do not want to, just leave the corresponding textbox empty. If you want to add a new label, just type it into the textbox, ensure that each label is separated with a comma. You will see the spinner provided to offer the user a list of all the existing labels on the blog, extracted as described earlier.

Content can contain html tags for formatting.

It is not possible to upload an image or video using the API, but you can insert <img> tags to provide links to images stored on google drive or firebase storage. I have shown this below.

Note that the Create Post activity uses PostText (POST)

Displays the raw output returned by the API

The new post on the blog, also shows the label

Read a Post

This one doesn't require the authToken, but does require that you have run Get Posts to fetch the blog post IDs.

Using the spinner returns the blog post titles for selection

Note that the image is not displayed (the label in use is set to htmlFormat, otherwise you would see the raw content)

Update a Post

As you might expect, this is the most complicated activity to perform. The user must first get a list of posts, select the one to be edited, present the various fields for editing, then re-post the data to the blog post. The blocks are very similar to the Create Post, however, note that it uses PutText. (PUT)

Delete a Post

Again, we use the authToken, and need to select a post from the list. The API only returns a response code. The documentation indicates it should return 200 if successful, but my findings show that it returns 204, which means the same thing but indicates that there is no html body being returned. I therefore test for code 204 for a successful delete. not that we use the Web.Delete block