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
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.
Tom Glod
Just working on this. Anyone wondering how they can do oAuth providers that do not allow localhost.
What you do is get super cheap php hosting with a domain, and then find some PHP code to proxy the response from the oAuth provider to the IP of the user.
There is nothing Livecode can do for you here. They can't fix it, because its actually not broken.