|
Note
|
This repository contains the guide documentation source. To view the guide in published form, view it on the Open Liberty website. |
You’ll explore how to allow users to log in to your application with their social media accounts by using the Open Liberty Social Media Login feature.
Social media login provides a form of single sign-on (SSO) that application users can use to sign in to a secured website with their existing social media account. Social media login simplifies the authentication process for users and allows you to provide a secure authentication method for your users without having to explicitly implement it.
The Social Media Login feature in Open Liberty provides configuration elements to configure application authentication by using one or more social media platforms, including GitHub, LinkedIn, Facebook, Twitter, and Google. You can also create a custom configuration for any other social media platform that implements the OAuth 2.0 standard or the OpenID Connect 1.0 standard for authorization.
The application that is provided with this guide is secured through basic authentication. The application includes a simple welcome page that includes a message and a Log in button. The welcome page is defined in the hello.html file, and the Log in button is defined in the button element of that page. When the application user clicks the Log in button, a dialog box opens requesting the user’s username and password for authenticating to the service. In this guide, you will replace the basic authentication dialog with a dialog to log in with a social media provider.
hello.html
link:finish/src/main/webapp/hello.html[role=include]Before you begin, you must have a GitHub account to complete this guide. Register for a GitHub account, if you don’t already have one.
Obtain an OAuth 2.0 client ID and client secret credentials for accessing the GitHub API by registering a new application in your GitHub account. Register a new application on the Settings > Developer settings > OAuth Apps page of your account.
Set the Homepage URL to https://localhost:9443, and set the authorization callback URL to https://localhost:9443/ibm/api/social-login/redirect/githubLogin.
When the registration is complete, the client ID and client secret credentials are displayed. To provide your application with the credentials, export the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.
For more information about creating an OAuth application, see the GitHub documentation.
Replace the values of the [github-client-id] and [github-client-secret] fields in the following command:
https://raw.githubusercontent.com/OpenLiberty/guides-common/prod/os-tabs.adoc
export GITHUB_CLIENT_ID=[github-client-id] export GITHUB_CLIENT_SECRET=[github-client-secret]
set GITHUB_CLIENT_ID=[github-client-id] set GITHUB_CLIENT_SECRET=[github-client-secret]
First, navigate to the start directory.
Enable the Social Media Login feature in the application by updating the Liberty server.xml configuration file.
Replace the Libertyserver.xmlconfiguration file.src/main/liberty/config/server.xml
The socialLogin-1.0 feature definition enables the Social Media Login feature in the application so that you can use the githubLogin configuration element to configure GitHub as a social media login provider.
The client ID and client secret credentials for your GitHub OAuth2 application are injected into the githubLogin configuration element with values of github.client.id and github.client.secret. These values are supplied by the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables.
For more information, see the githubLogin element documentation.
server.xml
link:finish/src/main/liberty/config/server.xml[role=include]Check out the service that you created by going to the http://localhost:9080/api/hello.html URL.
Try logging in with your social media account. After you log in with your GitHub account, authorize access to your GitHub user data with the OAuth2 application that you created in the Creating a GitHub OAuth2 application section. After authentication, you’re redirected to the /hello endpoint that’s served by HelloServlet, which also serves the securedHello.jsp page.
The securedHello.jsp page contains a Log out button that makes a POST request to the /logout endpoint, which is served by LogoutServlet.
Because the logout feature isn’t fully implemented, an error is returned when you click the Log out button:
Exception thrown by application class 'io.openliberty.guides.sociallogin.LogoutServlet.doPost:50' java.lang.NullPointerException: at io.openliberty.guides.sociallogin.LogoutServlet.doPost(LogoutServlet.java:50) at javax.servlet.http.HttpServlet.service(HttpServlet.java:706) at javax.servlet.http.HttpServlet.service(HttpServlet.java:791) at com.ibm.ws.webcontainer.servlet.ServletWrapper.service(ServletWrapper.java:1230) at [internal classes]
hello.html
link:finish/src/main/webapp/hello.html[role=include]HelloServlet.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/HelloServlet.java[role=include]securedHello.jsp
link:finish/src/main/webapp/securedHello.jsp[role=include]LogoutServlet.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/LogoutServlet.java[role=include]The LogoutServlet provided in the start directory uses the logout() method in the HttpServletRequest class to log the user out of the application. After a user is logged out, the user is redirected to the hello.html page.
You are also provided with a LogoutHandler class and ILogout interface to add custom logout logic that revokes the application permissions from a user’s account.
The logoutHandler.getLogout() method gets an implementation of the ILogout interface for GitHub and uses the logout() method of that interface to revoke the OAuth2 permissions that are granted to the application by the user.
The response that’s returned by this logout() method is verified by the application, which checks whether it has a 2xx series status code.
The request.logout() method is then called to log the user out of the application.
The logoutHandler.getLogout() method returns the implementation of the ILogout interface based on the name of the social media provider that a user chooses. The social media provider’s name is retrieved by using the UserProfileManager class. The UserProfileManager class returns the ID of the social media login configuration. In this application, when the application user selects GitHub, the name of the social media provider is githubLogin.
Implement the ILogout interface to revoke permissions for the application from the user’s GitHub account.
Replace theGitHubLogoutclass.src/main/java/io/openliberty/guides/sociallogin/logout/GitHubLogout.java
GitHub’s REST API provides a DELETE endpoint, which is stored in the unauthorizeUrl variable. The unauthorizeUrl variable is used to revoke application permissions from the user. The JAX-RS Client is used to send a request to this DELETE endpoint.
Your GitHub application client ID and client secret credentials are obtained from the github.client.id and github.client.secret configuration properties. These credentials are encoded and stored in the encodedAuth variable and added to the request as an Authorization header.
The GitHub access token for a user, which is stored in the accessToken variable, is retrieved from their user profile that is modelled by the UserProfile class. The UserProfile object can be retrieved with the UserProfileManager class. The access token is used in the DELETE request body, which is stored in the requestBody variable.
GitHubLogout.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/logout/GitHubLogout.java[role=include]LogoutHandler.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/logout/LogoutHandler.java[role=include]LogoutServlet.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/LogoutServlet.java[role=include]ILogout.java
link:finish/src/main/java/io/openliberty/guides/sociallogin/logout/ILogout.java[role=include]Check out the service that you created by going to the http://localhost:9080/api/hello.html URL.
Try logging in with your GitHub account. After authenticating, you are redirected to the https://localhost:9080/api/hello URL. When you click the Log out button, you are unauthenticated and redirected back to the http://localhost:9080/api/hello.html URL.
If you try logging in again, you are asked to reauthorize your application with GitHub. Then, you’re authenticated and redirected to the https://localhost:9080/api/hello URL. While you stay logged in to GitHub, the application doesn’t prompt you to enter your GitHub credentials.
As an exercise, configure Facebook as a second social media provider for social media login for your application. If you add more than one social media login provider, a selection form is presented to the user. This form contains all of the social media providers that are configured in your application.
For information about setting up an OAuth2 application and revoking permissions, see the Facebook documentation:
You secured a web application in Open Liberty by using the Social Media Login feature.
Learn more about MicroProfile.