In this section, you’ll modify the logout app you built already, adding a sticker page so that the end-user can choose between multiple sets of credentials.
Let’s add Google as a second option for the end user.
To use Google’s OAuth 2.0 authentication system for login, you must set up a project in the Google API Console to obtain OAuth 2.0 credentials.
|
Note
|
Google’s OAuth 2.0 implementation for authentication conforms to the OpenID Connect 1.0 specification and is OpenID Certified. |
Follow the instructions on the OpenID Connect page, starting in the section, "Setting up OAuth 2.0".
After completing the "Obtain OAuth 2.0 credentials" instructions, you should have a new OAuth Client with credentials consisting of a Client ID and a Client Secret.
Also, you’ll need to supply a redirect URI, as you did for GitHub earlier.
In the "Set a redirect URI" sub-section, ensure that the Authorized redirect URIs field is set to http://localhost:8080/login/oauth2/code/google.
Then, you need to configure the client to point Google. Because Spring Security is built with multiple clients in mind, you can add our Google credentials alongside the ones you created for GitHub:
spring:
security:
oauth2:
client:
registration:
github:
clientId: github-client-id
clientSecret: github-client-secret
google:
client-id: google-client-id
client-secret: google-client-secretAs you can see, Google is another provider that Spring Security ships out-of-the-box support for.
In the client, the change is trivial - you can just add another link:
<div class="container unauthenticated">
<div>
With GitHub: <a href="/oauth2/authorization/github">click here</a>
</div>
<div>
With Google: <a href="/oauth2/authorization/google">click here</a>
</div>
</div>|
Note
|
The final path in the URL should match the client registration id in application.yml.
|
|
Tip
|
Spring Security ships with a default provider selection page that can be reached by pointing to /login instead of /oauth2/authorization/{registrationId}.
|
Many applications need to hold data about their users locally, even if authentication is delegated to an external provider. We don’t show the code here, but it is easy to do in two steps.
-
Choose a backend for your database, and set up some repositories (using Spring Data, say) for a custom
Userobject that suits your needs and can be populated, fully or partially, from external authentication. -
Implement and expose
OAuth2UserServiceto call the Authorization Server as well as your database. Your implementation can delegate to the default implementation, which will do the heavy lifting of calling the Authorization Server. Your implementation should return something that extends your customUserobject and implementsOAuth2User.
Hint: add a field in the User object to link to a unique identifier in the external provider (not the user’s name, but something that’s unique to the account in the external provider).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent