Setup the App on did

Give your new app a descriptive name e.g. ‘Wordpress Demo’ and use the full URL of the website in the ‘host’ box.

DID will generate a Client ID and a Client Secret for your app. Retain this information for the next step (leave the tab open so you can come back to it).

Configure the plugin

Once activated, the plugin creates a menu option called ‘miniOrange OpenID Connect’. Click on this to start configuring the plugin to work with DID.

You will be presented with a screen which looks like this:

Scroll right to the bottom on this page and look for the option called ‘Custom OpenID Connect App’ under the heading ‘Custom Applications’. It looks like this:

Select ‘Custom OpenID Connect App’. You will now see this screen:

Complete the fields using the following values:

App Name: DID

Client ID:copy and paste this from your DID app settings page.

Client Secret:copy and paste this from DID app settings page.

Scope: openid

Authorize Endpoint: https://auth.did.app/oidc/authorize

Access Token Endpoint: https://auth.did.app/oidc/token

Make sure these options are set as follows:

Set client credentials in header: checked.

Set client credentials in body: unchecked.

Show on login page: checked.

Finally, press ‘Save Settings’.

DID’s integration with this plugin is now complete. A ‘Sign in with DID’ button now appears on the WordPress sign in page:

Optional: Adding Login Buttons to your WordPress Template

You can add ‘Login with DID’ buttons elsewhere on your WordPress website using the plugin. To do this, choose the menu options: Appearance > Widgets.

In the example WordPress theme we are using, we have been able to add a login button to ‘Footer 1’. You can add the Login button widget to any dynamic part of your website templates by selecting the miniOrange Open ID Connect widget and clicking ‘add widget’ as per the screenshot below. The exact appearance of this will vary depending on your WordPress theme.

Optional: Login Button Styling

The ‘Login with DID’ button can be styled with some simple CSS rules. The following CSS can be used to style the button with DID’s colour scheme: