{"id":31624881,"url":"https://github.com/learning-layers/openid-connect-button","last_synced_at":"2025-10-06T18:14:49.556Z","repository":{"id":18955421,"uuid":"22175697","full_name":"learning-layers/openid-connect-button","owner":"learning-layers","description":"An OpenID Connect Button allowing arbitrary browser-based Web applications to authenticate and get access to user information using an external OpenID Connect Provider. The application itself must be registered as client at the OpenID Connect provider.","archived":false,"fork":false,"pushed_at":"2021-04-26T16:07:57.000Z","size":32,"stargazers_count":16,"open_issues_count":0,"forks_count":2,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-04-14T23:18:32.200Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learning-layers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-23T20:28:29.000Z","updated_at":"2021-11-10T15:14:27.000Z","dependencies_parsed_at":"2022-08-03T06:45:47.034Z","dependency_job_id":null,"html_url":"https://github.com/learning-layers/openid-connect-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learning-layers/openid-connect-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-layers%2Fopenid-connect-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-layers%2Fopenid-connect-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-layers%2Fopenid-connect-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-layers%2Fopenid-connect-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learning-layers","download_url":"https://codeload.github.com/learning-layers/openid-connect-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-layers%2Fopenid-connect-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278655520,"owners_count":26023026,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-10-06T18:14:45.678Z","updated_at":"2025-10-06T18:14:49.543Z","avatar_url":"https://github.com/learning-layers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Please note, that this project ist deprecated. New Repo: https://github.com/rwth-acis/openidconnect-signin\n\n\n\u003ca name=\"openid-connect-button\"/\u003e\nopenid-connect-button\n==\n\nAn OpenID Connect Button to instrument Web pages with OpenID Connect authentication and access to user information using an external OpenID Connect Provider via the OpenID Connect [implicit flow](http://openid.net/specs/openid-connect-core-1_0.html#ImplicitFlowAuth). \n\n![OpenID Connect Button sample instance](./oidc-button-sample.png \"OpenID Connect Button sample instance\")\n\n**Table of Contents**\n\n- [openid-connect-button](#openid-connect-button)\n\t- [Try it](#try-it)\n- [Developer Tutorial](#developer-tutorial)\n\t- [Add the OpenID Connect Button to a Web page](#add-oidc-to-web-page)\n\t\t- [Step 1: Register page as OpenID Connect client](#add-oidc-to-web-page-1)\n\t\t- [Step 2: Include OpenID Connect Button script on client page](#add-oidc-to-web-page-2)\n\t\t- [Step 3: Add HTML element representing button to the client page](#add-oidc-to-web-page-3)\n\t\t- [Step 4: Handle sign in with JavaScript callback](#add-oidc-to-web-page-4)\n\t- [License](#license)\n- [Framework plugins](#framework-plugins)\n\t- [Meteor (web framework)](#meteor-framework)\n\n\u003ca name=\"try-it\"/\u003e\nTry it\n--\n\nTODO: add link to working online demo.\n\n\u003ca name=\"developer-tutorial\"/\u003e\nDeveloper Tutorial\n==\nThis tutorial provides step-by-step instructions on how to instrument an arbitrary Web page client with the OpenID Connect Button to enable authentication and access to user information. The button is automatically rendered based on a couple of attributes that define OpenID Connect-relevant configuration details. Developers receive access to different OpenID Connect related information such as provider configuration, tokens, and user information. When users of a client sign in with an OpenID Connect provider, the client gets an *access token*, which can be further used to make calls to service APIs capable of interacting with the OpenID Connect provider.\n\n\u003ca name=\"add-oidc-to-web-page\"/\u003e\nAdd the OpenID Connect Button to a Web page\n--\nAdding the OpenID Connect button to a Web page client is done in four simple steps:\n\n- __Step 1: Register page as OpenID Connect client.__\n- __Step 2: Include OpenID Connect Button script on client page.__\n- __Step 3: Add HTML element representing button to the client page.__\n- __Step 4: Handle sign in with JavaScript callback.__\n\n\u003ca name=\"add-oidc-to-web-page-1\"/\u003e\n###Step 1: Register page as OpenID Connect client\nFirst step is to make the OpenID Connect server aware of your client page. Necessary prerequisite is that your page is deployed under a publicly accessible URL, ideally hosted on a secure HTTP server. Therefore, you need to provide a couple of details about your client to the OpenID Connect server (most importantly a redirect URI). In turn, the server generates a client ID and a client secret to be used in later steps.\n\nOpenID Connect client registration frontends look different on different server implementations. In this section, we walk you through the dialogs provided by the Open Source [MITREid Connect Server](https://github.com/mitreid-connect/) version 1.1.8.\n\n1. Log in to the OpenID Connect server (register for an account, if necessary).\n1. In the *Developer* section in the menu on the left choose __*Self-service client registration*__.\n1. Click the button __*Register a new client*__.\n1. A page __*New Client*__ with six tabs *Main*, *Access*, *Credentials*, *Crypto*, *Other*, and *JSON* will open. In the next steps, configure your client on each of the tabs. __Be sure to press Save after completing every tab!__\n  1. Tab *Main* \n    1. enter an arbitrary *Client name*\n    1. paste the deploy URL of your client page as *Redirect URI* and click the \"+\" button\n    1. optionally fill in all other fields\n  1. Tab *Access*\n    1. for *Grant Types* choose __*implicit*__\n    1. for *Response Types* check fields __*token*__, __*id_token*__, and __*token id_token*__ (uncheck all other boxes)\n  1. Tab *Credentials*: keep *Token Endpoint Authentication Method* on __*Client Secret over HTTP Basic*__\n  1. Tab *Crypto*: leave all fields on __*Use server default*__\n  1. Tab *Other*: nothing to do here for now\n  1. Tab *JSON*: shows a JSON representation of your client configuration\n1. Go back to tab *Main* and copy values for *Client ID* and *Registration Access Token*.\n1. __Store values for Client ID and Registration Access Token in a safe place! You will need them for using the OpenID Connect Button and for any re-configuration of your OpenID Connect client!__\n1. In case you have to re-configure your client, select __*Self-service client registration*__ from the *Developer* section in the menu on the left, enter Client ID and Registration Access Token in the fields on the right and click the button __*Edit an existing client*__. If you are an administrator of the OpenID Connect server, you can make use of the menu entry __*Manage Clients*__ in the *Administrative* section in the menu on the left.\n\n\u003ca name=\"add-oidc-to-web-page-2\"/\u003e\n###Step 2: Include OpenID Connect Button script on client page\n\nInclude the following script just before the closing body tag:\n```html\n\u003c!-- Place this asynchronous JavaScript just before your \u003c/body\u003e tag --\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  (function() {\n    var po = document.createElement('script'); \n    po.type = 'text/javascript'; \n    po.async = true;\n    po.src = './oidc-button.js';\n    var s = document.getElementsByTagName('script')[0]; \n    s.parentNode.insertBefore(po, s);\n  })();\n\u003c/script\u003e\n```\n\nThe OpenID Connect Button script depends on [jQuery](http://jquery.com/), [bootstrap](http://getbootstrap.com/), [jsjws](https://github.com/kjur/jsjws), and [jsrsasign](https://github.com/kjur/jsrsasign). Be sure to include all required dependencies to JS and CSS, as demonstrated in `index.html`.\n\n\u003ca name=\"add-oidc-to-web-page-3\"/\u003e\n###Step 3: Add HTML element representing button to the client page\n\nInclude a HTML element that represents the OpenID Connect Button. The script included in the previous step will transform the element into a button appearance. Use the client ID you retrieved from step 1.\n```html\n\u003cspan class=\"oidc-signin\"\n\tdata-callback=\"signinCallback\"\n\tdata-name=\"Learning Layers\"\n\tdata-logo=\"http://learning-layers.eu/wp-content/themes/learninglayers/images/logo.png\"\n\tdata-server=\"https://api.learning-layers.eu/o/oauth2\"\n\tdata-clientid=\"CLIENTID\"\n\tdata-scope=\"openid phone email address profile\"\u003e\n\u003c/span\u003e\n```\nThe HTML element must define the following data attributes:\n\n| Attribute Name       | Description |\n| ---------------------|-------------|\n| *data-name*     | Name of the OpenID Connect Provider |\n| *data-logo*     | URL of an OpenID Connect Provider logo (ideally 32px high SVG/PNG with transparent background)|\n| *data-size*     | Display size of the button ('xs': extrasmall, 'sm': small, 'default': default, 'lg': large)|\n| *data-server*   | URL of the OpenID Connect Provider server | \n| *data-clientid* | OpenID Connect client ID as retrieved in Step 1 |\n| *data-scope*    | Space-separated OpenID Connect scopes. The standard scope is simply \"openid\", but other scopes are usually also available (e.g. email, address, profile). A full list of scopes supported by the OpenID Connect provider is available via OpenID Connect discovery of provider configuration (see below for more information) |\n| *data-callback* | Name of a callback function defined in a script tag of the client page handling the outcome of the sign in process done by the button (see next step). |\n\n\u003ca name=\"add-oidc-to-web-page-4\"/\u003e\n###Step 4: Handle sign in with JavaScript callback\n\nIn a script of your client page define a JavaScript function that is triggered after the OpenID Connect Button is loaded. The name of the function must match the value of the *data-callback* attribute of the HTML element defined in Step 3. The function is passed an object that represents the authorization result.\n\nWhen sign in is successful, the result simply contains the string \"success\". At this point, you have access to the following variables representing OpenID Connect-related information:\n\n| Variable Name  | Description |\n|----------------|-------------|\n| *oidc_server*  | OpenID Connect Provider server URL |\n| *oidc_name*    | OpenID Connect Provider name |\n| *oidc_logo*    | OpenID Connect Provider logo URL |\n| *oidc_clientid*| OpenID Connect client ID |\n| *oidc_scope*   | OpenID Connect scope |\n| *oidc_provider_config* | OpenID Connect Provider configuration as retrieved via [OpenID Connect Discovery](http://openid.net/specs/openid-connect-discovery-1_0.html#ProviderConfigurationResponse)\n| *oidc_userinfo* | OpenID Connect user info claim as retrieved from the [OpenID Connect User Info](http://openid.net/specs/openid-connect-core-1_0.html#UserInfoResponse) endpoint.\n| *oidc_idtoken* | OpenID Connect ID token including parsed payload (cf. [OpenID Connect Core](http://openid.net/specs/openid-connect-core-1_0.html#IDToken))|\nIf the user is not signed-in, the result represents the respective error message describing the cause of the failed sign in. Causes include authentication errors, denial of access to user information expressed by user in OpenID Connect consent dialog, invalid tokens, etc.\n\nThe following example of a callback function greets the signed in user with a welcome message displayed in an HTML element with id \"status\" in case sign in succeeded and in case of an error logs the cause on the console.\n\n```js\nfunction signinCallback(result) {\n\tif(result === \"success\"){\n\t    // after successful sign in, display a welcome string for the user\n\t\t$(\"#status\").html(\"Hello, \" + oidc_userinfo.name + \"!\");\n\t} else {\n\t    // if sign in was not successful, log the cause of the error on the console\n\t\tconsole.log(result);\n\t}\n}\n\u003ca name=\"license\"/\u003e\n```\nLicense\n--\nThe OpenID Connect Button is released under the BSD [license](https://github.com/nmaster/openid-connect-button/blob/master/LICENSE) by Dominik Renzel, Advanced Community Information Systems (ACIS) Group, RWTH Aachen University, Germany.  \n\n\u003ca name=\"framework-plugins\"/\u003e\nFramework plugins\n==\n\n\u003ca name=\"meteor-framework\"/\u003e\nMeteor (web framework)\n--\nFor the meteor web framework you can add the Learning Layers OpenID Connect Button via ```meteor add aur0r:accounts-learninglayers```. You can find the plugin in AtmosphereJS at [https://atmospherejs.com/aur0r/accounts-learninglayers](https://atmospherejs.com/aur0r/accounts-learninglayers). License: MIT.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-layers%2Fopenid-connect-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearning-layers%2Fopenid-connect-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-layers%2Fopenid-connect-button/lists"}