Check the documentation for this version here
“Allow the developer to create an authentication system with 140+ providers, by just dragging a button to his application.”
SL - Social Login - uses the OAuth (Open Authorization) standard, for access delegation, commonly used as a way for Internet users to grant websites or applications access to their information on other websites but without giving them the passwords. Platforms like Facebook, Google, Linkedin, Slack and many others use it. For more information visit https://oauth.net/
So, what does OAuth mean to us? It means that we can have a centralized logic that allows us to login to all of those login providers. There’s only one problem: The way the communication is done with each provider. Each provider has its own URL to get the login page (the one where you input your credentials), and its own URL to get the Code and Access Token. Even the request type (POST or GET) can differ. So, if we want to make it simple, we need to wrap all inside a single component that we can easelly use, and that’s how SL was born :)
TL;DR
No SDKs needed
Supports any OAuth provider (140+ are loaded)
Easy and Fast to implement
In more detail
Most of the known providers have their own SDKs, that allow the developer to integrate the login functionality with “ease”. But, what if we need to integrate our app with multiple logins, let’s say for example, Facebook, Google and Linkedin. We would need to install Facebook SDK, Google SDK and Slack SDK. If we are lucky we have components on the forge for each one. Then we would need to learn 3 different SDKs and call the actions needed to do the login (because the SDKs normally offer more than just the login functionality, which in some cases is good, but we just want to login the user in our app).
So, what other advantages do we have? We can easily integrate it with any OAuth provider! 140+ are now loaded in the module and ready to be finished. See here how you can help
Fully implemented services are services that are ready to use. That means that both login flow and the user info flow are implemented. You just need to configure the service (app_id and app_secret) via the SLConfigurator (available in the component package). Other services are preloaded in the component, check the Helping SL to grow!. All providers that are fully implemented and the ones that need some more work can be seen here: https:/expertsmobile-dev.outsystems.com/SL_Configurator/OAuthServices
Right now we already have the basic logic working and fully implemented for Facebook, Google and Likedin. The idea is to increase that number with your help. So, what can you do?
Imagine that you are creating that amazing app that needs to have a login with, let’s say… Slack. SL already calls the Slack login page for you and the user is able to input it’s login details and get back to your application. What do you need to do now? You just need to get the user info, using the access token that SL provides you. Basically you need to:
Create a new REST call that will get the user info from slack
Normalize that response to the UserInfo Structure (from the SL_DRV module)
Call the AuthenticateUser server action and pass the UserInfo and the AuthServiceId (in this case Entities.OauthService.slack) variables as input.
That’s all you need to add a new service!
Now, if you think that your work is worth sharing (of course it is :D) request access to edit the forge component or send me a private message so I can add it. You just need to send the REST call with the mappings and I take care of the rest.
SL Configurator allows you to add all the needed settings for this component to work. This component is available here: https://www.outsystems.com/forge/component-overview/7894/social-login-configurator
Add login providers to your app
Set all the needed information
Client: app_id from your provider
Client secret: app_secret from you provider
Scopes: scopes needed by your application, like for example the email. They change from provider to provider
Background color: Login button background color
Class Names: Custom CSS classes to stylise the button
Order: When using the LoginButtonList Block the active login buttons are shown via a list. This parameter allows to set the order of each button
Enable and disable login buttons
Go to https://<yourenviroment>/SL_Configurator/ and click “Configure login button”. This leads you to the page where you can set all the needed settings.
Start by choosing the OAuth service, a.k.a. Provider.
Next you’ll need to set the client id and secret. Depending on the provider you choose, follow their documentation, since each provider has its own flow. For Facebook you need to create an application at https://developers.facebook.com/. After following all steps you should have the needed ClientId (aka appId) and secret. Add the info in the form. For the redirect URI use:- Apple: https://<your-personal-url>/SL_Core/rest/SocialLoginSignin/AuthRedirectOpenId- All others: https://<your-personal-url>/SL_Core/rest/SocialLoginSignin/AuthRedirect
You may also need to set the scopes. Some providers don’t need them, others do. Scopes work like permissions to access user data, and the user will be warned about them
You can also set Background Color and CSS classes to make your button prettier and the Order to change the order of the buttons when the LoginButtonList is used.
Finally set if you want this button to be enabled or not. You can set all information and activate it later if you want.
After completing the SLConfigurator > How to use you are now ready to add it to your mobile app. There are 2 ways of using it. By using the LoginButton Widget or by using the LoginButtonList Widget.
Yes, with that exact name. Why? Because we need a screen in the app to where we can redirect the user after the authentication process. In that screen add 3 input parameters called “code”, “state” and "User". Don’t forget to set the “Anonymous” role for this screen
Reference the LoginButton Widget from the SL component and drag it to your screen. Choose the OAuthServiceId that you’ve configured in the SLConfigurator from the list. Publish your app and test it in an iOS or Android device or simulator.
Reference the LoginButtonList Widget from the SL component and drag it to your screen. Publish your app and test it in an iOS or Android device or simulator.