How do I use the OAuth2 library?

LiveCode 9 includes a new OAuth2 library for presenting an authorization dialog to your users allowing them to give your application access to their data on a third party web service. There are many services that implement OAuth2 authorization and each will have their own developer portal for setting up an application that can connect to them. In this lesson we will use the Dropbox api to show info about the current Dropbox account from LiveCode.

Creating a `showAccountInfo` command

Create a new stack and edit its script or edit the script of an existing stack. We will change the values of the kClientID and kClientSecret constants when we have created the Dropbox App.

constant kAuthURL = "https://www.dropbox.com/oauth2/authorize"
constant kTokenURL = "https://api.dropboxapi.com/oauth2/token"
constant kClientID = "xxxxxxxxx"
constant kClientSecret = "xxxxxxxxx"
constant kScopes = ""
constant kPort = "54303"

command showAccountInfo
   OAuth2 kAuthURL, kTokenURL, kClientID, kClientSecret, kScopes, kPort
   
   if the result is not empty then
      answer error "Not authorized!"
   else
      local tAuth
      put it into tAuth
      
      set the httpHeaders to "Content-type: application/json; charset=UTF-8" & \
            return & "Authorization: Bearer " & tAuth["access_token"]
      
      local tPost, tUrl
      put "{" & quote & "account_id" & quote & ":" && quote & tAuth["account_id"] & quote & "}" \
            into tPost
      put "https://api.dropboxapi.com/2/users/get_account" into tUrl
      post tPost to url tUrl
      
      local tAccount 
      put jsonToArray(it) into tAccount
      
      local tList
      repeat for each line tLine in the keys of tAccount
         put tLine && ":" &&  tAccount[tLine] & return after tList
      end repeat
      delete last char of tList
      answer tList
   end if
end showAccountInfo

 

Creating a Dropbox App

In your browser go to https://www.dropbox.com and sign into your account Then browse to Dropbox' App Console  and click the `Create App` button.

Enter a name for your Dropbox app, fill in the details and then click `Create App`

In the next page, in the Settings tab, you can see the app's client ID and client secret which we will need later in the lesson.

Scroll down in the Settings tab, and write down the value of the "App Key" field. This is the client ID.

Click "Show" in the value of the "App Secret" field. This is the client secret

Notice in the image above the App Key (i.e. the client secret) is blurred. This value should not be made public. For LiveCode apps the safest way to include the value in a standalone application is in a password protected stack script.

The OAuth2 library presents an authorization dialog and accepts connections on the loopback address 127.0.0.1 so that it can handle redirects in the OAuth2 flow. In the "Redirect URIs" field add a redirect url of http://127.0.0.1:54303/

Make sure you do not omit the trailing slash!

Then press the Add button:

Next step is to set the required permissions. Go to the Permissions tab.

For our use case (i.e. getting info about the Dropbox account), we need the following permissions:

  • account_info.read
  • sharing.read

Testing the script

We will use a button that will call the showAccountInfo command:

on mouseUp
   showAccountInfo
end mouseUp

In the stack script, replace the values of kClientID and kClientSecret:

constant kClientID = "xxxxxxxxx"
constant kClientSecret = "xxxxxxxxx"

with the values of your own client ID (i.e. your App Key) and client secret (i.e. your App Secret)

Press the button. You should see an OAuth2 dialog asking you to login to Dropbox. Enter your Dropbox credentials and press Sign in:

In the next window, press Continue:

In the next window, you should see the required permissions for your app. These are the ones you had checked previously when creating the app. Click Allow:

Now, the api is getting info about your account, and it returns it to the LC app, which displays it using an answer dialog:

 

Standalone inclusions

Add the OAuth2 library to a standalone by checking `OAuth2` on the `Inclusions` pane of the `Standalone Application Settings` dialog. This will include the OAuth2 library and it's dependency mergJSON.

Note: In this example, we used OAuth2 and the Dropbox API to get back some info about the account. You can use the Dropbox API for fetching other information as well. In this case, you 'll need a different endpoint, i.e. a URL other than "https://api.dropboxapi.com/2/users/get_account"

You'll also need different permissions, and possibly slightly different syntax for the post command. For more details, you can have a look at the Dropbox API documentation here:

https://www.dropbox.com/developers/documentation/http/documentation

14 Comments

Roland

Worked for me, but requires getting used a bit to Slack.com, studying it and being able to watch ones own postings in Slack subitted from this LiveCode stack.

Bastian Liebold

Does anyone feel like writing a tutorial for facebook login and/or login with Google as well? Would be great and a big help for me!

Heather Laine

Thanks for the suggestion, we'll see if we can find someone to do this

Mimu

Hi, Bastian
Take a look here:
https://forums.livecode.com/viewtopic.php?f=7&t=31840

I‘ve put together a small samplestack to access google calendar using oauth2

Christian Jacquelinet

Hi, is there also an openID library available with liveCode ?

Panos Merakos

Hello Christian,

No, there is not an OpenID library in LiveCode

Mark

Is there anyone out there who has done this (or something similar) with DropBox?

Elanor Buchanan

Hi Mark,

I don't have an example like this but there is a Dropbox library that you might find useful.

Elanor

Mark

Hi, I think this lesson might need updating. I wasn't able to create an http:// loopback address because Splash now enforces using https:// for security. More importantly, when I press the Post to Slack button I get an error "redirect_uri did not match any configured URIs. Passed URI: http://127.0.0.1:54303/". Thanks

Panos Merakos

Hello Mark,

Indeed, it seems that Slack no longer supports the relevant standard to allow this to work - i.e. Slack only supports oauth2 for use by websites, *not* local apps.
So we need to update the lesson to not use Slack.

Mark

Hi Panos, thanks for the feedback. Given this is an oauth2 lesson and we are developing apps, not websites, would it make sense to switch to something that does support apps? (Dropbox might be a good choice!)

Panos Merakos

hello Mark - yes, I have added this to our TODO list, i.e. to update the lesson to use a different example.
Cheers,
Panos

Mark

Brilliant, thanks Panos. When you get round to it, if you need a tester let me know. I have a use-case just waiting to try it on. Best, Mark

Martin Koob

Watching the presentations about LiveCode DevCon 2022 about LC 10 I was wondering if one of the new features in LC10 could resolve the issue with SaaS services that strictly require an https:// loopback address thereby preventing the use of the oAuth2 library in local apps.

Could you export a small app to do authentication using oAuth2 as a web app, host it on a web site and then embed that app in a browser widget? That way the https:// loopback address would work and as far as the user would see the authentication dialog would be in the local app.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.