Menu 1

Connecting WordPress to OpenStreetMap with Auth0

If you log in to this blog you can now do so using your OSM account. If I say so myself, that’s pretty awesome. Here’s how I did it:

First we need to install the Auth0 WordPress Plugin which you can find by opening up WP, going to plugins and searching for “Auth0.”

Auth0 is just fantastically awesome. It’s a service which allows you to login to anything using anything. For example, you have a rails project and want to log in using facebook. Or you have a Node project and you want to log in using Active Directory. Or in our case, WordPress and log in using OSM. Auth0 is very extensible and developer friendly. For example, there are arbitrary JS events that fire through the login process. You can have twilio send you an SMS when someone logs in as an example.

Another way I like to think about it is like this: It used to be that you’d write a PHP app with JS front end and SQL backend. What Ruby on Rails did is meld together SQL and Ruby so now you only need to learn two things (Ruby and JS). You didn’t have to write SQL as well. Now things like meteor are removing even that so you just write JS everywhere. In a similar way – the first thing you do when you make an app is usually go build your login system. No more! Just use Auth0 and avoid all that pain. Auth0 is going to be more secure than anything you do, and immediately extensible.

Once you’ve installed your WP plugin, head over to the connection API Explorer.  Most things in your Auth0 dashboard are trivial you just turn them on and off like this:Capture

But OSMs authentication API isn’t this easy for a number of reasons. First, it uses OAuth 1.0(a) and Auth0 support version 2 out of the box as a thing on the dashboard. Second, OSM still uses XML where the rest of the world has moved on to JSON.

But it still works! We just need to use the Auth0 connection API to create a connection.

Next you need to log in to OSM. Click on your user at the top right, click settings, click OAuth settings, and create a OAuth Client. More docs are here. Once you have a OAuth app set up on OSM, you will get your client id and secret you can use with the code below.

On the Auth0 dashboard, create an application (applications -> create) and note down the client ID and secret.

On the API page, create a token with connections:create with the token generator at the top left – this lets you create new connections straight from the browser:

Capture2You also want to create a token with all the permissions around the following: clients (create and update), connections (create, read and update), rules (create and delete) and users (create, read and update). Note down this token, as the Auth0 WP plugin will need it.

Next we need to paste some code in to the box marked “body”:

{
  "name": "OpenStreetMap",
  "strategy": "oauth1",
  "options": {
    "client_id": "YOUR OSM CLIENT ID HERE",
    "client_secret": "YOUR OSM SECRET HERE",
    "requestTokenURL": "https://www.openstreetmap.org/oauth/request_token",
    "accessTokenURL": "https://www.openstreetmap.org/oauth/access_token",
    "userAuthorizationURL": "https://www.openstreetmap.org/oauth/authorize",
    "scripts": {
      "fetchUserProfile": "function (token, tokenSecret, ctx, cb) {var parseString = require('xml2js').parseString;var OAuth = new require('oauth').OAuth;var oauth = new OAuth(ctx.requestTokenURL,ctx.accessTokenURL,ctx.client_id,ctx.client_secret,'1.0',null,'HMAC-SHA1');oauth.get('http://api.openstreetmap.org/api/0.6/user/details',token,tokenSecret,function(e, b, r) {if (e) return cb(e);if (r.statusCode !== 200) return cb(new Error('StatusCode: ' + r.statusCode));parseString(b, function (err, result) {if (err) return cb(err);var profile = {user_id: result.osm.user[0]['$']['id'],given_name: result.osm.user[0]['$']['display_name'],picture: result.osm.user[0].img[0]['$'].href};cb(null, profile);});});}"
    }
   },
"enabled_clients": [
    "AUTH0 APPLICATION CLIENT ID HERE"
  ]
}

Remember to enter your ID and secret. Now click the “Try” button and you should get a “201” response that the connection was created.

So now we need to hook this up to the Auth0 login box (called the “lock”). Back on your wordpress site, go to the Auth0 plugin, settings, basic. Here enter your client ID and secret from when you made the application in the Auth0 dashboard. Also add the API token you created with all those permissions and click save. Next go to the advanced settings and enter the following in the CSS box:

#a0-lock.a0-theme-default .a0-zocial.a0-osm {
    color: #fff;
    width: 40px;
    height: 40px;
    background: #ffffff url('https://www.openstreetmap.org/favicon.ico') center center no-repeat no-repeat;
    background-size: 21px;
    border: 1px solid #5C666F;
}

And then this in the JS box:

lock.once('signin ready', function() {
    var link = jQuery('<div title="Login with Open Streen Maps" class="a0-zocial a0-icon a0-osm " dir="ltr"><span>Login with Open Streen Maps</span></div>');
    link.on('click', function () {
        lock.getClient().login({
            connection: 'OpenStreetMap' });
    });

    var iconList = jQuery('.a0-iconlist');
    iconList.append(link);
});

We need to do this to add the button on the login box for OSM. Lastly, go back to your Auth0 dashboard and the app you created. You’ll need to add a line in “Allowed Callback URLs ” which will be unique for your site, but for my blog it’s this: https://stevecoast.com/index.php?auth0=1

That should be it, now users can log in using OSM:

Capture3Notice that I’ve turned on facebook, GitHub and so on… and a the end there’s the OSM logo. Click it and you can login with OSM!

Of course, now you’ve done this it means you can connect an iOS application, your webapp or anything else to OSM in the same way. Magic.

Comments are closed.

Powered by WordPress. Designed by WooThemes