Button Widget | ID.me Developer

Code snippet

The following code snippet can be used to add the ID.me button widget to your app.

1 <span
2   id="idme-wallet-button"
3   data-scope="military,responder,student,teacher,government"
4   data-client-id="[YOUR_CLIENT_ID]"
5   data-redirect="[YOUR_REDIRECT_URI]"
6   data-response="code"
7   data-text="[AFFINITY GROUP] receives [OFFER] with ID.me"
8   data-show-verify="true">
9 </span>
10 <script src="https://s3.amazonaws.com/idme/developer/idme-buttons/assets/js/idme-wallet-button.js"></script>

This widget only supports a full page redirect to the authorization endpoint

Parameters

These parameters establish both necessary and adaptable configurations, empowering customers to align with ID.me brand guidelines, utilize the appropriate button for specific scenarios, and guide users seamlessly through subsequent steps.

Parameter	Values	Description	Required
data-scope	military, responder, student, teacher, government	Defines the community you are requesting permission to access	Yes
data-client-id	[YOUR_CLIENT_ID]	The client identifier received during app registration. It is automatically generated and can be found in your application dashboard.	Yes
data-redirect	[YOUR_REDIRECT_URI]	The url the user gets redirected to after authorizing an app. Set by the developer within the application dashboard.	Yes
data-response	code or token	The OAuth 2.0 grant type - Authorization Code (code) or Implicit (token)	Yes
data-text	Example: Military members receive 10% off with ID.me	A recommended parameter that displays a custom offer description within the ID.me Button Widget	Yes if `data-type="link"`
data-logo	[YOUR_LOGO_URL]	A recommended parameter that displays a logo at the community selection page	No
data-hero	[YOUR_HERO_IMAGE_URL]	A recommended parameter that displays a hero image at the community selection page	No
data-state	Example: 24730b6d	A parameter to carry through any server-specific state you need to protect against CSRF issues	No
data-display	popup or fullpage	A recommended parameter that determines to user experience. Defaults to fullpage	No
data-show-verify	true or false	Displays the “Verification by ID.me” text. Defaults to false	No
data-app-id	Example: SC529724439d8558619035353581	An Application Identifier, used to denote a unique application on the partner side	No

Example pop-up redirect page

Users will authenticate, verify, and authorize your application inside of the popup before being taken to the redirect URI.

1 <!-- This code snippet is not production quality -->
2 <html>
3   <head>
4    <script type="text/javascript">
5      // Your application logic to handle the OAuth response
6 
7      window.opener.location.reload();
8      window.close();
9    </script>
10   </head>
11   <body></body>
12 </html>

Best practice

ID.me recommends that you handle the OAuth token response, close the popup, and then refresh the parent window