OpenId Connect Walkthrough

This demo application will take you through the new way to connect your apps to JustGiving.

You're already signed in as {{email}}.

Hi, {{displayName}}!

Now that this example app is connected to your JustGiving account, we can make calls to the JustGiving API using our access token. For example:

GET https://api.justgiving.com/v1/account
                            
Accept: application/json
Authorization: Bearer {{accessToken}}
x-app-id: 7e81a0d5

The API responded:

{{apiResponseJson}}

Click "next" when you're ready to continue.

Something went wrong. You might want to re-start the walkthrough.

                          {{apiError}}
                        

What just happened?

You signed in to the "Walkthrough" app using your JustGiving account, via the OpenID Connect protocol. this app doesn't know your password, but it has an OAuth 2.0 access token allowing it to perform certain actions on your behalf.

OpenID Connect =
 
OpenID (information about user identity)
 
+
 
OAuth 2.0 (authorization and permissions)

If you no longer want this app to have this access, you can revoke its permissions by visiting the Permissions page on JustGiving.

If you want to add Connect with JustGiving functionality to your own website or application, click "next".

Preparing your app for OpenID Connect (Step 1 of 3)

Register your app with JustGiving and get a unique six-letter App ID. You will also need to tell us the URL of your app.

Screenshot of new app registration:

New app signup screenshot

Preparing your app for OpenID Connect (Step 2 of 3)

Now enter your App ID:

Preparing your app for OpenID Connect (Step 3 of 3)

Now paste the following code into your website:

                           <script src="{{idServer + '/js/connect.js"></script>'}}

                            <jg-login onlogin="checkLoginState" />

                            <script>

                            JG.init({
                                appId: '{{userAppId}}',
                                environment: '{{environment}}'
                            });

                            var checkLoginState = function() {
                                JG.checkConnected(function(status){
                                    if(status.connected) {
                                      // access data about the signed-in user and use it how you want:
                                      var displayName = status.displayName;
                                      var email = status.email;
                                      var userId = status.userId;
                                      var accessToken = status.accessToken;
                                    }
                                });
                            }
                            </script>