Custom Social Connections on Lock v2

custom-social-connectons.md

Custom Social Connections

Auth0 Dashboard

Configure the custom social connection on the dashboard by adding all the data needed by the extension.

• Name
• Authorization URL
• Token URL
• Client ID
• Client Secret
• Scope
• Fetch Profile script

It will arrive in the application JSONP received from the CDN, inside the strategy oauth2, with the following syntax

{
  "name": "oauth2",
  "connections": [
    {
      "name": "digitalocean",
      "scope": "read"
    }
  ]
}

Android SDK

Currently, SocialConfig is responsible of defining the SocialButton design, by making each instance of the button create a new SocialConfig from it's strategy and using that configuration.

Lets create a OAuth2ConnectionConfig class:

public class OAuth2ConnectionConfig {
  protected int title;
  protected int color;
  protected int icon;

  public OAuth2ConnectionConfig(){
  }

  public OAuth2ConnectionConfig(String connection, @StringRes int title, @DrawableRes int icon, @ColorRes int backgroundColor){
    this.connection = connection;
    this.title = title;
    this.icon = icon;
    this.backgroundColor = backgroundColor;
  }

  //Field Getters
}

And a class to keep the current SocialConfig logic

public class SocialConfig extends OAuth2ConnectionConfig {

  public SocialConfig(Context context, Strategy strategy) {
    getResourcesForStrategy(context, strategy);
  }

  public getResourcesForStrategy(..) {
    //setIcon, setColor, setTitle
  }
}

Design Customization

By default, each non-configured custom social connection will have the classic Login with connection-name title, and the Auth0 color and logo. The client allows to configure this by passing the Lock.Builder a list of design values for each connection (OAuth2ConnectionConfig).

List<OAuth2ConnectionConfig> customizedConnections = new ArrayList<>();
OAuth2ConnectionConfig customDigitalOcean = new OAuth2ConnectionConfig("digitalocean", R.string.title, R.drawable.icon, R.color.background_color);
customizedConnections.add(customDigitalOcean);

Lock lock = Lock.newBuilder(this, auth0)
  // ...
  .customizeConnections(customizedConnections)
  .build();

Lock will use the custom style on each oauth2 strategy connection that matches the name.

How the customization will work internally

Currently Lock initializes the SocialViewAdapter with strategies of type SOCIAL.

List<Strategy> socialStrategies = lockWidget.getConfiguration().getSocialStrategies();
SocialViewAdapter adapter = new SocialViewAdapter(getContext(), socialStrategies);

If we say that oauth2 is a SOCIAL strategy too, it will be contained in that list, but it won't tell us which Connections it holds. For that we need to add another method in the Configuration class that allows us to get them.

Now the SocialViewAdapter needs to know how to configure each Connection. As today, each Strategy is a different item. We need to split those Strategies into Connections, so we can have as many items in that adapter as Connections.

The adapter needs to know when to look for the values in the resources R and when to get them from the user customizedConnections list. Lets say that this customizedConnections list is available from the view configuration LockWidget. The adapter will then receive both the list of Strategies and the user customized values for some of those Connections. Checking if the Connection name is included in that list, will tell the adapter to use SocialConfig or OAuth2ConnectionConfig class to get the configuration.

Finally, all the connections will have each icon/title/backgroundColor configured.

How the authorization will work internally

It's treated as another oauth connection, using the OAuth2WebProvider by default.