Social Login Mobile

Stable Version 1.0.3 (OutSystems 11)
Published on 22 Apr by 

Social Login Mobile

Documentation


Vision

“Allow the developer to create an authentication system with 140+ providers, by just dragging a button to his application.”

How it works

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 :)

Advantages over using the SDKs

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

Which services are fully implemented?

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://andre-goncalves.outsystemscloud.com/SL_Configurator/OAuthServices

Helping SL to grow!

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.

Social Login Configurator

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

Features

  • 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

How to use

Configuring a login button

Go to https://<yourenviroment>/SL_Configurator/OAuthServicesConfigs.aspx and click “Configure login button”. This leads you to the page where you can set all the needed settings. 

  1. Start by choosing the OAuth service, a.k.a. Provider. 

  2. 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 https://<your-personal-url>/SL_Core/Authorizing

  3. 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

  4. 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.

  5. Finally set if you want this button to be enabled or not. You can set all information and activate it later if you want.

Using in your app

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. 

Create a screen called “ValidateAuthorization”

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 2 input parameters called “code” and “state”. Don’t forget to set the “Anonymous” role for this screen

Using the LoginButton widget

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.

Using the LoginButtonList widget

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.


Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from André Gonçalves who created this component.
Dependencies
See all 5 dependencies