OAuth2.0 Implementation

README.md

@@ -1,17 +1,15 @@
 [![build](https:/osmlab/osm-auth/workflows/build/badge.svg)](https:/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:
 
@@ -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:/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);
@@ -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
 
@@ -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()`
 
@@ -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:/osmlab/ohauth) and
 [store.js](https:/marcuswestin/store.js) behind the scenes.
 
 Built for and used by OpenStreetMap's [iD editor](https:/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/)