{"id":18243194,"url":"https://github.com/amkirwan/ember-oauth2","last_synced_at":"2025-04-06T10:13:21.415Z","repository":{"id":6332249,"uuid":"7567770","full_name":"amkirwan/ember-oauth2","owner":"amkirwan","description":"JavaScript library for using OAuth 2.0 Implicit Grant flow (Client-Side Flow) with Ember.js ","archived":false,"fork":false,"pushed_at":"2024-01-17T18:02:41.000Z","size":5458,"stargazers_count":133,"open_issues_count":26,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T08:08:22.506Z","etag":null,"topics":["ember-addon","ember-oauth2","oauth2-provider"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amkirwan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-01-11T21:57:59.000Z","updated_at":"2024-01-17T18:02:46.000Z","dependencies_parsed_at":"2024-01-17T19:51:01.652Z","dependency_job_id":"3b5af611-ff24-4ef3-917c-7fcd179380c8","html_url":"https://github.com/amkirwan/ember-oauth2","commit_stats":{"total_commits":372,"total_committers":11,"mean_commits":33.81818181818182,"dds":0.08064516129032262,"last_synced_commit":"9582dd31fb941d03323c1bef44d6fd7c552b77a3"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amkirwan%2Fember-oauth2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amkirwan%2Fember-oauth2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amkirwan%2Fember-oauth2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amkirwan%2Fember-oauth2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amkirwan","download_url":"https://codeload.github.com/amkirwan/ember-oauth2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember-addon","ember-oauth2","oauth2-provider"],"created_at":"2024-11-05T08:03:39.844Z","updated_at":"2025-04-06T10:13:21.388Z","avatar_url":"https://github.com/amkirwan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![CI](https://github.com/amkirwan/ember-oauth2/actions/workflows/ci.yml/badge.svg)](https://github.com/amkirwan/ember-oauth2/actions/workflows/ci.yml)\n\nember-oauth2\n============\n\nJavaScript library for using OAuth 2.0 Implicit Grant flow (Client-Side Flow) or Authorization Grant flow (Server-Side Flow) for Ember.js\n\nThis creates an OAuth 2.0 Ember object class for handling authentication with OAuth 2.0 providers.\n\nCurrent Version: **[2.0.5-beta](https://github.com/amkirwan/ember-oauth2/releases/tag/v2.0.5-beta)**\n\nThe EmberCli addon [EmberTokenAuth](https://github.com/amkirwan/ember-token-auth) demonstrates how to use Ember-OAuth2 library for authentication.\n\n## Dependencies\n\nEmber-OAuth2 requires Ember and jQuery.\n\n\n## Browser Support\n\nEmber-OAuth2 uses localStorage for saving the tokens, localStorage is supported in Firefox 3.5+, Safari 4+, IE9+, and Chrome.\n\nThe latest version of Ember-OAuth2 is an Ember Addon and uses the ES6 modules. This allows Ember-OAuth2 to be used in projects like [EmberCLI](https://github.com/stefanpenner/ember-cli) easier.\n\n\n## Installation\n\nEmber-OAuth2 is an Ember Addon that can be installed with the following command from your ember project.\n\n```bash\n$ ember install ember-oauth2\n```\n\nEmber-OAuth2 is an Ember [service](https://guides.emberjs.com/v2.8.0/applications/services/) that you can inject to different parts of your app using the inject syntax\n\n```js\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\n\nexport default class ApplicationController extends Controller {\n  @service emberOauth2;\n}\n```\n\n\n## Configure\n\nFirst you must configure your OAuth provider. For Google you would configure it like this.\n\n```js\nwindow.EmberENV['ember-oauth2'] = {\n  google: {\n    clientId: 'xxxxxxxxxxxx',\n    authBaseUri: 'https://accounts.google.com/o/oauth2/auth',\n    redirectUri: 'https://oauth2-login-demo.appspot.com/oauth/callback',\n    scope: 'public write'\n  }\n}\n```\n\nIf using ember-cli, you can add the configuration to `config/environment.js`:\n\n```js\nEmberENV: {\n  FEATURES: {\n    // Here you can enable experimental features on an ember canary build\n    // e.g. 'with-controller': true\n  },\n  'ember-oauth2': {\n    google: {\n      clientId: 'xxxxxxxxxxxx',\n      authBaseUri: 'https://accounts.google.com/o/oauth2/auth',\n      redirectUri: 'https://oauth2-login-demo.appspot.com/oauth/callback',\n      scope: 'public write'\n    }\n  }\n}\n```\n\nThe example above sets *google* as a *providerId* along with configuration information for the provider. The following params are required for configuring a valid provider *clientId*, *authBaseUri* and *redirectUri*. Depending on the provider you might need to provide additional and/or optional configuration key/values.\n\nThe configuration object allows you to also customize the prefix for the state and token that are stored in the browsers localStorage. The default value for the state prefix is *state* and the default for token is *token*. Using the previous example you can customize the prefixes by doing the following.\n\n```js\nwindow.ENV['ember-oauth2'] = {\n  google: {\n    clientId: 'xxxxxxxxxxxx',\n    authBaseUri: 'https://accounts.google.com/o/oauth2/auth',\n    redirectUri: 'https://oauth2-login-demo.appspot.com/oauth/callback',\n    scope: 'public write',\n    statePrefix: 'foobar',\n    tokenPrefix: 'qux'\n  }\n}\n```\n\nThe following are the options available for configuring a provider:\n\n* `clientId`: (required) The client identifier that is used by the provider. Ember-OAuth2 uses the Implicit Grant flow (Client-Side Flow).\n* `authBaseUri`: (required) The authorization url for the OAuth2 provider.\n* `redirectUri`: (required) The URI that the OAuth2 provider will redirect back to when completed.\n* `scope`: Access your application is requesting from the OAuth2 provider.\n* `responseType`: The type of authorization your application is requesting. The default is `token` but can be set to `code` if using the Authorization Grant flow.\n* `statePrefix`: The prefix name for state key stored in the localStorage. The default value is `state` and the key would be `state-the_state_number`\n* `tokenPrefix`: The prefix name for token key stored in the localStorage. The default value is `token` and the key would be `token-the_provider_id`\n\n\n\n## Authorization\n\nTo sign into the OAuth2 provider create by injecting the service, set the provider with `setProvider` and call the `authorize`. You can inject this addon into your controller for example and when the user clicks a button fire the action to handle the request and set the service providerId and call authorize. This is a simple example and you would probably want to wrap this functionality in a session model. Checkout [ember-token-auth](https://github.com/amkirwan/ember-token-auth) for a full example.\n\n```js\n// login route\nimport Controller from '@ember/controller';\nimport { inject as service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class LoginController extends Controller {\n  @service emberOauth2;\n  \n  @action\n  async authenticate(providerId) {\n    this.emberOauth2.setProvider(providerId);\n\n    try {\n      let response = await this.emberOauth2.authorize();\n      this.emberOauth2.trigger('redirect', response.location.hash);\n    } catch (error) {\n      this.emberOauth2.trigger('error', error);\n    }\n  }\n}\n```\n\nCalling `authorize()` will open a new window and the OAuth provider's OAuth dialog will be displayed. If the user chooses to authenticate with your website upon authorization by OAuth provider the user will be redirected back to the redirectUri with the params access_token, token_type and state.\n\nAt the redirectURI add the following to process the params returned from the OAuth provider\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eAuthorize\u003c/title\u003e\n    \u003cscript\u003e\n      var hash = window.location.hash;\n      window.opener.emberOauth2.trigger('redirect', hash);\n      window.close();\n    \u003c/script\u003e\n  \u003c/head\u003e\n\u003c/html\u003e\n```\n\n\n\n\n## Implicit Grant Flow (Client-side flow)\n\nThis will process the returned params and save the `provider_id`, `access_token`, `scope` and `expires_in` (the time the access_token will expire) to the localStorage. This localStorage can be accessed with the key `token-the_provider_id`.\n\n\nAfter successful authorization and saving the access_token to the localStorage the `success` event will be called. This will allow the user to do any cleanup necessary or to retrieve user information from the OAuth provider. To configure the callback bind event handlers to the `success` and `error` events.\n\nThe `authorize` call returns a `Ember.RSVP.Promise`. Authorize will `resolve` with a reference to the dialog window when it opens successfully and `rejects` with an error when the window fails to open.\n\n})\n\nWhen using the client-side flow it is vital to validate the token received from the endpoint, failure to do so will make your application vulnerable to the [confused deputy problem](https://en.wikipedia.org/wiki/Confused_deputy_problem). As of version `v1.0.2` Ember-OAuth2 supports the `verifyToken` method for validating tokens when using the client-side flow. The user will need to override this method for validating the different server endpoints.\n\nHere is an example of how this might be accomplished in an Ember-CLI instance initializer using the Google token validation endpoint.\n\n```js\nimport Ember from 'ember';\nimport EmberOAuth2 from 'ember-oauth2';\nimport env from 'ember-pacu/config/environment';\n\nexport function initialize(app) {\n  verifyTokenInit(app);\n}\n\nfunction verifyTokenInit(app) {\n  EmberOAuth2.reopen({\n    // mitigate confused deputy\n    verifyToken: function() {\n      return new Ember.RSVP.Promise((resolve, reject) =\u003e {\n        // implement the adapter with the url to the google tokeinfo endpoint\n        var adapter = app.lookup('adapter:session');\n        adapter.google_tokeninfo().then(function(response) {\n          if (response.audience === env.APP.GOOGLE_CLIENT_ID) {\n            resolve(response);\n          } else {\n            reject('app uid does not match');\n          }\n        }, function(error) {\n          reject(error);\n        });\n      });\n    }\n  });\n}\n\nexport default {\n  name: 'ember-oauth2',\n  initialize: initialize\n};\n```\n\n\n\n\n\n## Authorization Grant flow\n\nIf using the Authorization Grant flow with your provider your backend server will need to handle the final steps of authorizing your application. Your success handler will need to send the `AUTHORIZATON_CODE` returned from OAuth2 provider to your backend server which can then retrieve an access token using the client_id, client_secret, and authorization_code.\n\nTo enable the Authorization Grant flow for a provider set the `responseType` value to `code`.\n\n```js\nwindow.ENV = window.ENV || {};\nwindow.ENV['ember-oauth2'] = {\n  google: {\n    clientId: 'xxxxxxxxxxxx',\n    authBaseUri: 'https://accounts.google.com/o/oauth2/auth',\n    redirectUri: 'https://oauth2-login-demo.appspot.com/oauth/callback',\n    responseType: 'code'\n  }\n}\n```\n\nTo build Ember.Oauth2 on your system you will need to have [Node.js](http://nodejs.org), and [npm](https://npmjs.org) installed.\n\n```bash\n$ git clone https://github.com/amkirwan/ember-oauth2\n$ cd ember-oauth2\n$ npm install\n$ bower install\n```\n\n## Tests\n\nTo run the tests you can run one of the following commands.\n\n```bash\n$ ember test\n$ ember test --serve\n$ npm test\n```\n\n## Building API Docs\n\nThe API Docs provide a detailed collection of methods and properties for Ember.OAuth2. To build the documentation for the project from the project directory run the following command.\n\nRequires node.js and yuidocjs to build. Follow the steps in [build](https://github.com/amkirwan/ember-oauth2#building) to install the dependencies before buiding the docs.\n\n```bash\n$ yuidoc .\n```\n\n\n## Contributors\n\n[Contributors](https://github.com/amkirwan/ember-oauth2/graphs/contributors) to this project.\n\n\n## Credits\n\n#### Thanks to the following projects for ideas on how to make this work.\n\n* [backbone-oauth](http://github.com/ptnplanet/backbone-oauth)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famkirwan%2Fember-oauth2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famkirwan%2Fember-oauth2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famkirwan%2Fember-oauth2/lists"}