Skip to content

Commit

Permalink
Merge pull request #93 from HelNershingThapa/main
Browse files Browse the repository at this point in the history 
OAuth2.0 Implementation
  • Loading branch information
@bhousel
bhousel committed Apr 25, 2022
2 parents 48715dd + 5d1215f commit de87163
Show file tree
Hide file tree
Showing 7 changed files with 611 additions and 2,646 deletions.
109 changes: 54 additions & 55 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
[![build](https://github.com/osmlab/osm-auth/workflows/build/badge.svg)](https://github.com/osmlab/osm-auth/actions?query=workflow%3A%22build%22)
[![npm version](https://badge.fury.io/js/osm-auth.svg)](https://badge.fury.io/js/osm-auth)


## osm-auth

Easy authentication with [OpenStreetMap](http://www.openstreetmap.org/)
over [OAuth](http://oauth.net/) with
over [OAuth 2.0](https://oauth.net/2/) with
[CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).


### Demo

Try it out now at: http://osmlab.github.io/osm-auth/
Try it out now at: http://osmlab.github.io/osm-auth/

Or you can run the demo locally by cloning this project, then run:

Expand All @@ -21,86 +19,88 @@ $ npm run build
$ npm start
```

This will start a local server on port 8080. Then open `http://localhost:8080` in a browser.

This will start a local server on port 8080. Then open `http://127.0.0.1:8080/` in a browser.

### Using osm-auth in your project

##### Basic:

Copy `osmauth.js`, use the `osmAuth` object. This uses
Copy `osmauth.js`, use the `osmAuth` object. This uses
[UMD](https://github.com/umdjs/umd), so it's compatible
with [RequireJS](http://requirejs.org/) etc too, if you're into that kind
of thing.


##### With node:

```sh
$ npm install osm-auth
```

```js
var osmAuth = require('osm-auth');
var osmAuth = require("osm-auth");
```

**Requires land.html to be accessible, or a page that does the same thing -
calls an auth complete function - to be available.**


### Getting Keys

Register a new OAuth application on openstreetmap.org:
Register a new OAuth2.0 application on openstreetmap.org:

1. Go to your user page
2. Click 'my settings'
3. Click 'oauth settings'
4. At the bottom, 'Register your application'
2. Click 'My Settings'
3. Click 'OAuth 2 applications'
4. At the bottom, 'Register new application'
5. Fill in the form & submit
6. Copy & Paste the secret & consumer key into the osmAuth config object as below

6. Copy & Paste the client ID, secret, redirect URI and scope(s) into the osmAuth config object as below

### Example

```js
var auth = osmAuth({
oauth_consumer_key: 'WLwXbm6XFMG7WrVnE8enIF6GzyefYIN6oUJSxG65',
oauth_secret: '9WfJnwQxDvvYagx1Ut0tZBsOZ0ZCzAvOje3u1TV0',
auto: true // show a login form if the user is not authenticated and
// you try to do a call
client_id: "IEt_7zJAqJ5dUW_uTg29jPIba0-xB61k-OKyFVH6mAw",
client_secret: "1Z-TAOcQMFELTVSx0l36fJDb2LrymA8A4JnY243sZw0",
redirect_uri: "http://127.0.0.1:8080/land.html",
scope: "read_prefs write_api",
auto: true, // show a login form if the user is not authenticated and
// you try to do a call
});

document.getElementById('authenticate').onclick = function() {
// Signed method call - since `auto` is true above, this will
// automatically start an authentication process if the user isn't
// authenticated yet.
auth.xhr({
method: 'GET',
path: '/api/0.6/user/details'
}, function(err, details) {
// details is an XML DOM of user details
});
document.getElementById("authenticate").onclick = function () {
// Signed method call - since `auto` is true above, this will
// automatically start an authentication process if the user isn't
// authenticated yet.
auth.xhr(
{
method: "GET",
path: "/api/0.6/user/details",
},
function (err, details) {
// details is an XML DOM of user details
}
);
};
```


#### Example with single-page



```
var auth = osmAuth({
oauth_consumer_key: 'WLwXbm6XFMG7WrVnE8enIF6GzyefYIN6oUJSxG65',
oauth_secret: '9WfJnwQxDvvYagx1Ut0tZBsOZ0ZCzAvOje3u1TV0',
auto: true,
singlepage: true, // Load the auth-window in the current window, with a redirect,
landing: window.location.href // Come back to the current page
client_id: "IEt_7zJAqJ5dUW_uTg29jPIba0-xB61k-OKyFVH6mAw",
client_secret: "1Z-TAOcQMFELTVSx0l36fJDb2LrymA8A4JnY243sZw0",
redirect_uri: "http://127.0.0.1:8080/land.html",
scope: "read_prefs write_api",
auto: true,
singlepage: true, // Load the auth-window in the current window, with a redirect,
landing: window.location.href // Come back to the current page
});
var urlParams = new URLSearchParams(window.location.search);
if(urlParams.has('oauth_token')){
// The token passed via the URL has to be passed into 'auth.bootstrapToken'. The callback is triggered when the final roundtrip is done
auth.bootstrapToken(urlParams.get('oauth_token'),
if(urlParams.has('code')){
// The authorization code passed via the URL has to be passed into 'auth.bootstrapToken'.
// The callback is triggered when the final roundtrip is done
auth.bootstrapToken(urlParams.get('code'),
(error) => {
if(error !== null){
console.log("Something is wrong: ", error);
Expand All @@ -109,7 +109,7 @@ document.getElementById('authenticate').onclick = function() {
/* Do authenticated stuff here*/
}, this.auth);
}else{
} else {
// Attempt to do something authenticated to trigger authentication
Expand All @@ -121,27 +121,28 @@ document.getElementById('authenticate').onclick = function() {

[CORS-supporting browsers](http://caniuse.com/#feat=cors)


### API

`.osmAuth(options)`

At a minimum, options must contain an OAuth consumer key and secret:
At a minimum, options must contain OAuth client ID, secret, redirect URI and scope(s):

```
{
oauth_secret: ...
oauth_consumer_key: ...
client_id: "IEt_7zJAqJ5dUW_uTg29jPIba0-xB61k-OKyFVH6mAw",
client_secret: "1Z-TAOcQMFELTVSx0l36fJDb2LrymA8A4JnY243sZw0",
redirect_uri: "http://127.0.0.1:8080/land.html",
scope: "read_prefs write_api",
}
```

Additional options are:

* `url` for a base url (default: "https://www.openstreetmap.org")
* `landing` for a landing page name (default: "land.html")
* `loading`: a function called when auth-related xhr calls start
* `done`: a function called when auth-related xhr calls end
* `singlepage`: use full-page redirection instead of a popup for mobile
- `url` for a base url (default: "https://www.openstreetmap.org")
- `landing` for a landing page name (default: "land.html")
- `loading`: a function called when auth-related xhr calls start
- `done`: a function called when auth-related xhr calls end
- `singlepage`: use full-page redirection instead of a popup for mobile

`.logout()`

Expand All @@ -158,22 +159,20 @@ authentication popup or if it couldn't be brought to the front (e.g. because of

`.xhr(options, callback)`

Signed [XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest).
[XMLHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest).
Main options are `url` and `method`.

`.options(options)`

Set new options.


### Based on

Uses [ohauth](https://github.com/osmlab/ohauth) and
[store.js](https://github.com/marcuswestin/store.js) behind the scenes.

Built for and used by OpenStreetMap's [iD editor](https://github.com/openstreetmap/iD).


### See Also

* [OAuth in Javascript](http://mapbox.com/osmdev/2013/01/15/oauth-in-javascript/)
- [OAuth in Javascript](http://mapbox.com/osmdev/2013/01/15/oauth-in-javascript/)

0 comments on commit de87163

Please sign in to comment.