How to Enable Social Provider Authentication in PingOne for Customers
Are you looking to implement social registration and sign-on for your website, app or other digital property? Social login is not only convenient for your end user or customer, but it’s also more secure than many other sign-on methods. (Passwords, we’re looking at you!)
If you’re a PingOne for Customers user, you can easily integrate social login into your app. In this blog, I’ll walk through step by step how to set it up and how to see it in action. And if you don’t already have a PingOne for Customers account, you can sign up for a free trial to see firsthand what the experience is like.
To begin, grab your PingOne for Customers account and a social provider to link. I used Google Sign-In in this blog, but you can also use supported built-in providers Facebook or LinkedIn. Or, you can easily build your own connection to an identity provider using our SAML or OIDC connectors.
Here are the steps I’ll cover, and feel free to jump ahead if you already have a particular step completed:
First, we’ll need a user so we can test our social provider integration. Creating a new user is quick and simple through the admin GUI, or you can create one through the API with something like Postman or through a terminal.
Follow along with the
Here’s what it looks like in the admin UI.
After signing on, click the “IDENTITIES” tab at the top.
Then, click the “+ Add User” button in the top right corner.
If you're just creating a test user, you can just fill out the required “Username” field and an email address to verify the account when we sign in.
Click “Save” to confirm the new user creation.
Generate a one-time password and copy it down for later by clicking the "Generate Password" link after clicking the "Reset Password" button.
You can click the eye icon to view the password in order to copy it.
Finally, don’t forget to click “Save”!
And now we have a fresh new user in our database!
Back to the Steps Overview
Step 2. How to Create an App Connection
App connections are how apps communicate with PingOne for Customers. We’ll set one up for our demo so we can call it when authorizing and authenticating.
Follow along with the video or the steps and images below.
The first step is to go to the “CONNECTIONS” page by clicking the tab at the top of the admin console.
Then we’ll click the “+ Application” button to start creating our new app connection.
We’ll create a Single Page App (SPA) app connection for this demo. Select the Single Page App card and click the “Configure” button to move to the next step.
Give the app connection a name. Then, click the “Configure” button.
Next, we’ll need to configure some scopes. You can add the ones I’ve added here (including profile). Then, click the “Save and Continue” button to proceed.
profile
phone
p1:read:user
email
address
And we’re done! We have a new app connection to start making calls to. But before we start making calls, let’s add our social provider for users to sign on or register with.
Step 3. How to Create a Social Identity Provider
This step will set up a social provider for us to use with our authentication policy.
You’ll need some kind of developer account at one of the identity providers to connect it to PingOne for Customers. We’ve used Google Sign-In in this demo, and you can find a link below on how to set up an account with an OAuth connection.
https://developers.google.com/identity/sign-in/web/sign-in
First go to the “CONNECTIONS” page.
Click the “Identity Providers” tab located on the left side of the screen.
Once on the Identity Providers page, we’ll click the “+ Provider” button to create a new identity provider.
You can choose whichever identity provider you’d like, and in this demo we’ll use Google Sign-In.
This step requires filling in a name. Use whatever name you’d like! Then click Continue.
Next, we’ll enter information about the identity provider we’ll be connecting to. For Google Sign-In, it requires a client ID and secret. The callback URL can be used in the Google OAuth client you create as the redirect URI. Finally, click Save and Continue.
The Map Attributes page allows you to take Google attributes and turn them over into PingOne attributes. A username attribute is already created to be able to map the users. We don’t need any more for this demo, so we’ll just click Save and Finish.
Here’s our new identity provider, Google Sign-In! Don’t forget to enable it by clicking the toggle button in the top right corner of the provider configuration. It'll show as green when enabled and grey otherwise.
Step 4. How to Create a New Authentication Policy with the Option to Sign on or Register with a Social Provider
We want to create a new authentication policy that we’ll be using with our app. It needs to have a social provider enabled as one of the authentication options.
First, let’s go to the “SETTINGS” page by clicking the link at the top.
Find the “Authentication” dropdown tab on the left side and open it.
Click the “Policies” subsection under “Authentication.” On that page click the “+ Add” button in the top right.
Give the new authentication policy a name.
Open the dropdown menu and select “Login".
We can enable registration for users not already in our database by selecting the checkbox next to "Enable Registration". The "Enable account recovery" checkbox controls whether users can go through a "Forgot Password?" flow.
With Enable Registration turned on, a dropdown menu will appear. The dropdown gives you the choice of which population to add the new user to. Open the dropdown and click the population you want new users to be added to.
Click “Add Provider”. This will enable the authentication policy to make use of an external Identity Provider.
Select the dropdown and select an identity provider.
Click “Save”. Alternatively, you could add more steps to this authentication policy that'll happen for our end user after the "Login" step .
We’re done with this step! Celebrate! You now have a new authentication policy with the identity provider we created up above.
Step 5. How to Form the Request URL to Initiate Authentication
In this step, we’ll form the request URL to act as an end user trying to authenticate.
We’ll need to start with the authorization URL as our base. Navigate to the app connection you created earlier. Click the pencil to expand and open the “Configuration" Tab. The authorization URL will be the first link under the Basic section.
We'll also need the client ID. Grab the client ID from the same tab a little further down.
Add the components of the URL to make the request.
Start with the authorization URL:
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize
Add the response type. We'll use "token" for our SPA:
response_type=token
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize?response_type=token
Then add the client ID:
client_id=122ef902-09de-4338-b843-bb11e3601039
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize?response_type=token&client_id=122ef902-09de-4338-b843-bb11e3601039
And the redirect URI:
redirect_uri=https://developer.pingidentity.com
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize?response_type=token&client_id=122ef902-09de-4338-b843-bb11e3601039&redirect_uri=https://developer.pingidentity.com
And finally the scopes:
scope=openid profile
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize?response_type=token&client_id=122ef902-09de-4338-b843-bb11e3601039&redirect_uri=https://developer.pingidentity.com&scope=openid profile
And this is our final URL! If you navigate to the URL in a browser now, you’ll get to the sign-on page, but you won’t see the social provider we added yet. The app connection is using the default authentication policy as we haven’t set a specific one for our app connection. The next step will walk you through how to add our authentication policy to our app connection.
Step 6. How to Apply an Authentication Policy to an App Connection
A user can register through a register link on the login page when it's enabled in the authentication policy.
Navigate to the "Connections" page as we’ve done before by clicking the button at the top of the admin console.
Find your app connection that you created earlier and click the dropdown button to show the expanded view. Here’s the button and what the app I created looks like expanded.
Switch over to the Policies view.
And click the pencil icon to edit.
Now, we can apply our authentication policy we created earlier to this app connection by clicking the plus icon next to our authentication policy.
Finally, click the “Save” button to commit our changes.
Now, our app connection will use our authentication policy with a social provider!
Step 7. How to Register a Social Provider with a User
Let’s connect our user to our app via the social provider login option we created, in this case, Google Sign-In.
Navigate to the URL we created in Step 5. For my setup, the URL looks like this:
https://auth.pingone.com/123d66b5-d2f0-48d0-8ec0-cf4cafd35d25/as/authorize?response_type=token&client_id=122ef902-09de-4338-b843-bb11e3601039&redirect_uri=https://developer.pingidentity.com&scope=openid profile
It takes us to the out-of-the-box login page from PingOne for Customers. And, voila! Our login page includes an option to use Google Sign-In.
Clicking the “Sign in with Google” button routes you to Google’s authentication page. Then you’ll be redirected to PingOne for Customers where it asks you to create a profile. If you were a user without an account, you could create one here by filling out the form. In our case, we created a user in the first step, so we want to link our social account with our existing user.
To do that, click the “Sign in” button at the bottom of the form to link the social account to a user in your PingOne for Customers database.
Enter the username for the account created in Step 1 along with the password we generated for that user.
Now, you can click that big “Sign On” button you’ve been eyeing.
Since we signed in with our generated one-time password, we’ll be asked to create a more permanent password. Go ahead and fill in the values in the form. The password field is also helped by a tip window that opens to show the requirements necessary to meet the password policy.
Now, we can click “Save” at the bottom to confirm the change to our password.
With success, we’re redirected to the redirect_uri with an access token in the URL!
If we go back to our users view on the Identities page, we’ll see that our user now has Google linked as a social provider. You can view this under the Authentication tab of the user.
Since we’ve enabled an external Identity Provider in our authentication policy, we have the ability to sign on with our social provider. And, since we already had a user in our database, we linked the social account to it. You could allow your customers to register with a social provider and it would create a new account for them.
I hope you’ve found this blog post helpful! If you’d like to try out PingOne for Customers yourself, sign up for a free trial.
